定义组件map集合 根据map集合key值获取 进行组件展示
1。定义组件map集合
import {
Input,
Select,
Radio,
Checkbox,
AutoComplete,
Cascader,
InputNumber,
Switch,
TreeSelect,
Slider,
Rate
} from 'ant-design-vue';
import {ref} from 'vue'
export const componentMap =ref(new Map<string, any>());
componentMap.value.set('Input', Input);
componentMap.value.set('InputGroup', Input.Group);
componentMap.value.set('InputPassword', Input.Password);
componentMap.value.set('InputSearch', Input.Search);
componentMap.value.set('InputTextArea', Input.TextArea);
componentMap.value.set('InputNumber', InputNumber);
componentMap.value.set('AutoComplete', AutoComplete);
componentMap.value.set('Select', Select);
componentMap.value.set('TreeSelect', TreeSelect);
componentMap.value.set('Switch', Switch);
componentMap.value.set('RadioGroup', Radio.Group);
componentMap.value.set('Checkbox', Checkbox);
componentMap.value.set('CheckboxGroup', Checkbox.Group);
componentMap.value.set('Cascader', Cascader);
componentMap.value.set('Slider', Slider);
componentMap.value.set('Rate', Rate);
2创建tsx 文件 封装通用组件
import { defineComponent, defineAsyncComponent, h } from 'vue';
import { componentMap } from './dataClassificationModal.data';
export default defineComponent({
name: 'formItem',
props: {
component: {
type: String,
required: true,
},
componentProps: {
type: Object,
},
},
setup(props) {
return () =>
h(componentMap.value.get(props.component), {
...props.componentProps,
});
},
});
3 组件内使用
<template>
<formItem
v-for="item in formSchema "
:component="item.component"
v-bind="item.componentProps"
v-model:value="formState[item.]"
/>
</template>
<script setup lang="ts">
import formItem from './formItem.tsx';
const formSchema = [
{
field: 'name',
component: 'Input',
componentProps: {
type: 'number',
}
]
const componentProps = ref({
type:'numer'
})
const formState = ref({})
</script>