diff --git a/src/components/data-form/DataFormConstant.ts b/src/components/data-form/DataFormConstant.ts index d5d1768..816963e 100644 --- a/src/components/data-form/DataFormConstant.ts +++ b/src/components/data-form/DataFormConstant.ts @@ -3,7 +3,6 @@ import { ElAutocomplete, ElCascader, ElCheckbox, - ElCheckboxGroup, ElColorPicker, ElDatePicker, ElInput, @@ -11,9 +10,7 @@ import { ElInputTag, ElMention, ElRadio, - ElRadioGroup, ElRate, - ElSelect, ElSelectV2, ElSlider, ElSwitch, @@ -23,6 +20,9 @@ import { ElTreeSelect, ElUpload, } from "element-plus"; +import CheckboxGroup from "./inputs/CheckboxGroup.vue"; +import RadioGroup from "./inputs/RadioGroup.vue"; +import Select from "./inputs/Select.vue"; import type { DisplayMode } from "./DataFormTypes.ts"; /** 内建的表单输入组件 */ @@ -30,11 +30,11 @@ const builtInInputComponents = { Input: markRaw(ElInput), InputNumber: markRaw(ElInputNumber), Checkbox: markRaw(ElCheckbox), - CheckboxGroup: markRaw(ElCheckboxGroup), + CheckboxGroup: markRaw(CheckboxGroup), Radio: markRaw(ElRadio), - RadioGroup: markRaw(ElRadioGroup), + RadioGroup: markRaw(RadioGroup), Switch: markRaw(ElSwitch), - Select: markRaw(ElSelect), + Select: markRaw(Select), SelectV2: markRaw(ElSelectV2), DatePicker: markRaw(ElDatePicker), TimePicker: markRaw(ElTimePicker), diff --git a/src/components/data-form/DataFormUtils.tsx b/src/components/data-form/DataFormUtils.tsx index 184c658..6356f07 100644 --- a/src/components/data-form/DataFormUtils.tsx +++ b/src/components/data-form/DataFormUtils.tsx @@ -1,4 +1,5 @@ import lodash from "lodash"; +import { toRaw } from "vue"; import { Typeof } from "@ease-forge/shared"; /** @@ -28,10 +29,54 @@ function dataPathToNamePath(dataPath: string): string | number | Array, sources: any, onlyFun: boolean = false) { + if (!expose) return; + sources = toRaw(sources); + if (!sources || Typeof.isDate(sources) || Typeof.isArray(sources) || !Typeof.isObj(sources)) return; + // sources 是 dom 对象 + if (sources instanceof HTMLElement || (sources.constructor?.name?.includes("HTML") && sources.constructor?.name?.includes("Element"))) { + expose.$el = sources; + return; + } + // 压制警告[Vue warn] Object.keys(sources) + const rawConsoleWarn = console.warn; + console.warn = _emptyFun; + let keys = Object.keys(sources); + console.warn = rawConsoleWarn; + // 处理 expose + for (let key of keys) { + const newValue = sources[key]; + if (Typeof.noValue(newValue)) continue; + if (onlyFun && !Typeof.isFun(newValue)) continue; + expose[key] = newValue; + } + if (!onlyFun) { + // 处理 vue 组件内置属性 + keys = ["$data", "$props", "$attrs", "$slots", "$refs", "$emit", "$on", "$off", "$once", "$forceUpdate", "$nextTick", "$watch", "$el", "$options", "$parent", "$root"]; + for (let key of keys) { + const newValue = sources[key]; + if (Typeof.noValue(newValue)) continue; + expose[key] = newValue; + } + } +} + export default { dataPathToNamePath, + mergeExpose, } export { dataPathToNamePath, + mergeExpose, } diff --git a/src/components/data-form/inputs/CheckboxGroup.vue b/src/components/data-form/inputs/CheckboxGroup.vue new file mode 100644 index 0000000..a4b852c --- /dev/null +++ b/src/components/data-form/inputs/CheckboxGroup.vue @@ -0,0 +1,96 @@ + + + + + diff --git a/src/components/data-form/inputs/RadioGroup.vue b/src/components/data-form/inputs/RadioGroup.vue new file mode 100644 index 0000000..3788d5a --- /dev/null +++ b/src/components/data-form/inputs/RadioGroup.vue @@ -0,0 +1,96 @@ + + + + + diff --git a/src/components/data-form/inputs/Select.vue b/src/components/data-form/inputs/Select.vue new file mode 100644 index 0000000..48b8ab7 --- /dev/null +++ b/src/components/data-form/inputs/Select.vue @@ -0,0 +1,96 @@ + + + + + diff --git a/src/editor/propEditors/IMetaProp.ts b/src/editor/propEditors/IMetaProp.ts index 9f66fc3..d34233c 100644 --- a/src/editor/propEditors/IMetaProp.ts +++ b/src/editor/propEditors/IMetaProp.ts @@ -28,6 +28,9 @@ export default defineComponent({ computed: { object3D(): THREE.Object3D { return this.viewport.state.selectedObject + }, + item(): ItemJson { + return this.viewport.state.selectedItem } } -}) \ No newline at end of file +}) diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue index 3469f80..bb7023b 100644 --- a/src/pages/DataForm01.vue +++ b/src/pages/DataForm01.vue @@ -93,7 +93,10 @@ const dataForm1 = reactive({ dataPath: 'checkbox_group_1', label: '复选组', input: 'CheckboxGroup', inputProps: { max: 2, - // TODO options + options: [ + { value: "001", label: "选项1" }, + { value: "v2", label: "选项2" }, + ], }, }, { @@ -105,7 +108,10 @@ const dataForm1 = reactive({ { dataPath: 'radio_group_1', label: '单选组', input: 'RadioGroup', inputProps: { - // TODO options + options: [ + { value: "001", label: "选项1" }, + { value: "002", label: "选项2" }, + ], }, }, { @@ -123,7 +129,14 @@ const dataForm1 = reactive({ inputProps: { placeholder: "请选择", clearable: true, - // TODO options + options: [ + { value: "001", label: "选项1" }, + { value: "002", label: "选项2" }, + { value: "003", label: "选项3" }, + { value: "004", label: "选项4" }, + { value: "005", label: "选项5" }, + { value: "006", label: "选项6" }, + ], }, }, {