refactor(baInput):合并 FormItem 的 props 和 props.attr

jinluo123 · Jun 26, 2024 · a85d7b7 · a85d7b7
1 parent a9cdcff
commit a85d7b7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 27 deletions.
diff --git a/web/src/components/baInput/index.ts b/web/src/components/baInput/index.ts
@@ -1,4 +1,3 @@
-import type { ElTooltipProps } from 'element-plus'
 import type { Component, CSSProperties } from 'vue'
 
 /**
@@ -36,8 +35,6 @@ export type modelValueTypes = string | number | boolean | object
 export interface InputData {
     // 内容,比如radio的选项列表数据,格式为对象或者数组：{ a: '选项1', b: '选项2' } or [{value: 1, label: 2, disabled: false}, {...}]
     content?: any
-    // 提示信息
-    tip?: string | Partial<ElTooltipProps>
     // 需要生成子级元素时,子级元素属性(比如radio)
     childrenAttr?: anyObj
     // 城市选择器等级,1=省,2=市,3=区

diff --git a/web/src/components/formItem/index.ts b/web/src/components/formItem/index.ts
@@ -1,9 +1,13 @@
 import type { CSSProperties } from 'vue'
-import type { FormItemProps } from 'element-plus'
+import type { FormItemProps, ElTooltipProps } from 'element-plus'
 
-export interface FormItemAttr extends Partial<FormItemProps> {
+export interface FormItemAttr extends Partial<Writeable<FormItemProps>> {
+    // 通用属性名称的键入提示
     id?: string
     class?: string
     style?: CSSProperties
+    // 块级输入帮助信息
     blockHelp?: string
+    // 输入提示信息（使用 el-tooltip 渲染）
+    tip?: string | Partial<ElTooltipProps>
 }
diff --git a/web/src/components/formItem/index.vue b/web/src/components/formItem/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { formItemProps } from 'element-plus'
 import type { PropType, VNode } from 'vue'
-import { computed, createVNode, defineComponent, resolveComponent } from 'vue'
+import { createVNode, defineComponent, resolveComponent } from 'vue'
 import type { InputAttr, InputData, modelValueTypes } from '/@/components/baInput'
 import { inputTypes } from '/@/components/baInput'
 import BaInput from '/@/components/baInput/index.vue'
@@ -9,10 +10,6 @@ import type { FormItemAttr } from '/@/components/formItem'
 export default defineComponent({
     name: 'formItem',
     props: {
-        // el-form-item的label
-        label: {
-            type: String,
-        },
         // 输入框类型,支持的输入框见 inputTypes
         type: {
             type: String,
@@ -30,36 +27,41 @@ export default defineComponent({
             type: Object as PropType<InputAttr>,
             default: () => {},
         },
-        // el-form-item的附加属性
+        // el-form-item 的附加属性(还可以直接通过当前组件的 props 传递)
         attr: {
             type: Object as PropType<FormItemAttr>,
             default: () => {},
         },
-        // 额外数据,radio、checkbox的选项等数据
+        // 额外数据
         data: {
             type: Object as PropType<InputData>,
             default: () => {},
         },
-        prop: {
+        placeholder: {
             type: String,
             default: '',
         },
-        placeholder: {
+        blockHelp: {
             type: String,
             default: '',
         },
+        ...formItemProps,
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
+        // 通过 props 和 props.attr 两种方式传递的属性在此汇总
+        const attrs = props.attr || {}
+        for (const key in props) {
+            if (!['type', 'modelValue', 'inputAttr', 'attr', 'data', 'placeholder'].includes(key)) {
+                attrs[key as keyof typeof props.attr] = (props[key as keyof typeof props] as any) || attrs[key as keyof typeof props.attr]
+            }
+        }
+
         const onValueUpdate = (value: modelValueTypes) => {
             emit('update:modelValue', value)
         }
 
-        const blockHelp = computed(() => {
-            return props.attr && props.attr['blockHelp'] ? props.attr['blockHelp'] : ''
-        })
-
-        // el-form-item 插槽
+        // el-form-item 的插槽
         const slots: { [key: string]: () => VNode | VNode[] } = {}
 
         // default 插槽
@@ -72,24 +74,24 @@ export default defineComponent({
                 'onUpdate:modelValue': onValueUpdate,
             })
 
-            if (blockHelp.value) {
+            if (attrs.blockHelp) {
                 return [
                     inputNode,
                     createVNode(
                         'div',
                         {
                             class: 'block-help',
                         },
-                        blockHelp.value
+                        attrs.blockHelp
                     ),
                 ]
             }
             return inputNode
         }
 
-        if (props.data && props.data.tip) {
+        if (attrs.tip) {
             const createTipNode = () => {
-                const tipProps = typeof props.data.tip === 'string' ? { content: props.data.tip } : props.data.tip
+                const tipProps = typeof attrs.tip === 'string' ? { content: attrs.tip } : attrs.tip
                 return createVNode(resolveComponent('el-tooltip'), tipProps, {
                     default: () => [
                         createVNode('i', {
@@ -107,7 +109,7 @@ export default defineComponent({
                         class: 'ba-form-item-label',
                     },
                     [
-                        createVNode('span', null, props.label),
+                        createVNode('span', null, attrs.label),
                         createVNode(
                             'span',
                             {
@@ -125,9 +127,7 @@ export default defineComponent({
                 resolveComponent('el-form-item'),
                 {
                     class: 'ba-input-item-' + props.type,
-                    prop: props.prop,
-                    ...props.attr,
-                    label: props.label,
+                    ...attrs,
                 },
                 {
                     ...slots,