84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<component :is="componentName"
|
||
|
|
type="output"
|
||
|
|
:outputType="outputType"
|
||
|
|
:count="count"
|
||
|
|
:raw-code="rawCode"
|
||
|
|
:code-css-class="codeCssClass" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import CodeCell from '../code/index.vue';
|
||
|
|
import Html from './html.vue';
|
||
|
|
import Image from './image.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
codeCssClass: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
count: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
output: {
|
||
|
|
type: Object,
|
||
|
|
requred: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
'code-cell': CodeCell,
|
||
|
|
'html-output': Html,
|
||
|
|
'image-output': Image,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
outputType: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
componentName() {
|
||
|
|
if (this.output.text) {
|
||
|
|
return 'code-cell';
|
||
|
|
} else if (this.output.data['image/png']) {
|
||
|
|
this.outputType = 'image/png';
|
||
|
|
|
||
|
|
return 'image-output';
|
||
|
|
} else if (this.output.data['text/html']) {
|
||
|
|
this.outputType = 'text/html';
|
||
|
|
|
||
|
|
return 'html-output';
|
||
|
|
} else if (this.output.data['image/svg+xml']) {
|
||
|
|
this.outputType = 'image/svg+xml';
|
||
|
|
|
||
|
|
return 'html-output';
|
||
|
|
}
|
||
|
|
|
||
|
|
this.outputType = 'text/plain';
|
||
|
|
return 'code-cell';
|
||
|
|
},
|
||
|
|
rawCode() {
|
||
|
|
if (this.output.text) {
|
||
|
|
return this.output.text.join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.dataForType(this.outputType);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
dataForType(type) {
|
||
|
|
let data = this.output.data[type];
|
||
|
|
|
||
|
|
if (typeof data === 'object') {
|
||
|
|
data = data.join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
return data;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|