You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<script lang="ts">
|
|
|
|
import inputType from './inputType.vue';
|
|
import inputAreaType from './inputAreaType.vue';
|
|
import switchType from './switchType.vue';
|
|
import functionType from './functionType.vue';
|
|
|
|
export default {
|
|
name: 'option-form',
|
|
components: {
|
|
inputType,
|
|
inputAreaType,
|
|
switchType,
|
|
functionType
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<el-form :model="formData" label-width="auto" style="max-width: 600px">
|
|
<div v-for="i in Object.keys(formData)" :key="i">
|
|
<component :is="getType(i)" :formData="formData" :keyValue="i" :itemName="nameEnum[i]||''" />
|
|
</div>
|
|
</el-form>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
formData: Object
|
|
});
|
|
|
|
const typeEnum = {
|
|
inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName'],
|
|
inputAreaType: [],
|
|
switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled'],
|
|
functionType: ['submitFunction']
|
|
};
|
|
const nameEnum = {
|
|
name: '组件名称',
|
|
key: '组件key值',
|
|
labelWidth: '标签长度',
|
|
submitBottomName: '确定按钮名称',
|
|
resetBottomName: '重置按钮名称',
|
|
isReset: '是否可重置',
|
|
isResetBottom: '是否显示重置按钮',
|
|
isSubmitBottom: '是否显示确定按钮',
|
|
disabled: '是否禁用',
|
|
submitFunction: '提交回调函数'
|
|
};
|
|
const getType = (e) => {
|
|
let res = '';
|
|
Object.keys(typeEnum).forEach((key) => {
|
|
if (typeEnum[key].includes(e)) {
|
|
res = key;
|
|
}
|
|
});
|
|
console.log(res);
|
|
return res;
|
|
};
|
|
|
|
|
|
const { formData } = toRefs(props);
|
|
watch(formData, e => {
|
|
console.log(formData.value);
|
|
});
|
|
|
|
const onSubmit = () => {
|
|
console.log('submit!');
|
|
};
|
|
|
|
</script>
|
|
<style scoped lang="less">
|
|
</style>
|
|
|
|
|
|
|