40 lines
821 B
Vue
40 lines
821 B
Vue
<template>
|
|
<component :is="computedComponent.is" v-bind="computedComponent.props" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RichText } from './Types'
|
|
|
|
type Props = {
|
|
element : RichText
|
|
}
|
|
|
|
const { element } = defineProps<Props>()
|
|
|
|
const computedComponent = computed(() => {
|
|
let is : ReturnType<typeof resolveComponent> = {}
|
|
|
|
switch (element.type) {
|
|
case 'plain':
|
|
is = resolveComponent('RichTextPlain')
|
|
break
|
|
case 'p':
|
|
is = resolveComponent('RichTextParagraph')
|
|
break
|
|
case 'span':
|
|
is = resolveComponent('RichTextString')
|
|
break
|
|
case 'a':
|
|
is = resolveComponent('RichTextLink')
|
|
break
|
|
case 'br':
|
|
is = resolveComponent('RichTextNewLine')
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
|
|
return { is, props: { ...element } }
|
|
})
|
|
|
|
</script>
|