xiangyuan-gov-app/src/common/components/dynamicf/ComponentRender.vue

<template>
  <!-- 在下方添加自定义组件 -->
  <!-- 业务代码开始 -->
  <template v-if="item.type === 'richtext'">
    <RichTextEditor
      ref="itemRef"
      :modelValue="modelValue"
      @update:modelValue="onValueChanged"
      v-bind="params"
    />
  </template>
  <template v-else-if="item.type === 'recorder'">
    <Recorder
      ref="itemRef"
      :modelValue="modelValue"
      @update:modelValue="onValueChanged"
      v-bind="params"
    />
  </template>
  <!-- 业务代码结束 -->
  <template v-else>
    <text>Fallback: unknow form type '{{ item.type }}' item: {{  JSON.stringify(item) }}</text>
  </template>
</template>

<script setup lang="ts">
import { ref, type PropType } from 'vue';
import type { IDynamicFormItem } from '@/components/dynamic';
import RichTextEditor from '@/common/components/form/RichTextEditor.vue';
import Recorder from '@/common/components/form/Recorder.vue';

const props = defineProps({	
  modelValue: {
    type: null
  },
  item: {
    type: Object as PropType<IDynamicFormItem>,
    default: () => ({})
  },
  isLast: {
    type: Boolean,
    default: false,
  },
  params: {
    type: Object,
    default: () => ({})
  },
});
const emit = defineEmits(['update:modelValue']);

function onValueChanged(v: any) {
  emit('update:modelValue', v);
}

const itemRef = ref();

defineExpose({
  getItemRef: () => itemRef.value,
})

</script>