refactor(baInput):基于 Element plus 新版本优化 FormItem 组件

jinluo123 · Jun 26, 2024 · 75aafb7 · 75aafb7
1 parent 701fc35
commit 75aafb7
Show file tree

Hide file tree

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

diff --git a/web/src/components/formItem/index.vue b/web/src/components/formItem/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import type { PropType } from 'vue'
-import { createVNode, defineComponent, resolveComponent, computed } from 'vue'
+import type { PropType, VNode } from 'vue'
+import { computed, createVNode, defineComponent, resolveComponent } from 'vue'
+import type { InputAttr, InputData, modelValueTypes } from '/@/components/baInput'
 import { inputTypes } from '/@/components/baInput'
-import type { modelValueTypes, InputAttr, InputData } from '/@/components/baInput'
-import type { FormItemAttr } from '/@/components/formItem'
 import BaInput from '/@/components/baInput/index.vue'
+import type { FormItemAttr } from '/@/components/formItem'
 
 export default defineComponent({
     name: 'formItem',
@@ -59,8 +59,11 @@ export default defineComponent({
             return props.attr && props.attr['blockHelp'] ? props.attr['blockHelp'] : ''
         })
 
-        // el-form-item 的默认插槽,生成一个baInput
-        const defaultSlot = () => {
+        // el-form-item 插槽
+        const slots: { [key: string]: () => VNode | VNode[] } = {}
+
+        // default 插槽
+        slots.default = () => {
             let inputNode = createVNode(BaInput, {
                 type: props.type,
                 attr: { placeholder: props.placeholder, ...props.inputAttr },
@@ -84,91 +87,62 @@ export default defineComponent({
             return inputNode
         }
 
-        // 不带独立label输入框
-        const noNeedLabelSlot = [
-            'string',
-            'password',
-            'number',
-            'textarea',
-            'datetime',
-            'year',
-            'date',
-            'time',
-            'select',
-            'selects',
-            'remoteSelect',
-            'remoteSelects',
-            'city',
-            'icon',
-            'color',
-        ]
-
-        // 需要独立label的输入框
-        const needLabelSlot = ['radio', 'checkbox', 'switch', 'array', 'image', 'images', 'file', 'files', 'editor']
-
-        if (noNeedLabelSlot.includes(props.type)) {
-            return () =>
-                createVNode(
-                    resolveComponent('el-form-item'),
-                    {
-                        prop: props.prop,
-                        ...props.attr,
-                        label: props.label,
-                    },
-                    {
-                        default: defaultSlot,
-                    }
-                )
-        } else if (needLabelSlot.includes(props.type)) {
-            // 带独立label的输入框
-            let title = props.data && props.data.title ? props.data.title : props.label
-            const labelSlot = () => {
-                return [
-                    createVNode(
-                        'div',
-                        {
-                            class: 'ba-form-item-label',
-                        },
-                        [
-                            createVNode('div', null, title),
-                            createVNode(
-                                'div',
-                                {
-                                    class: 'ba-form-item-label-tip',
-                                },
-                                props.data && props.data.tip ? props.data.tip : ''
-                            ),
-                        ]
-                    ),
-                ]
+        if (props.data && props.data.tip) {
+            const createTipNode = () => {
+                const tipProps = typeof props.data.tip === 'string' ? { content: props.data.tip } : props.data.tip
+                return createVNode(resolveComponent('el-tooltip'), tipProps, {
+                    default: () => [
+                        createVNode('i', {
+                            class: 'fa fal fa-question-circle',
+                        }),
+                    ],
+                })
             }
 
-            return () =>
-                createVNode(
-                    resolveComponent('el-form-item'),
+            // label 插槽
+            slots.label = () => {
+                return createVNode(
+                    'span',
                     {
-                        class: 'ba-input-item-' + props.type,
-                        prop: props.prop,
-                        ...props.attr,
-                        label: props.label,
+                        class: 'ba-form-item-label',
                     },
-                    {
-                        label: labelSlot,
-                        default: defaultSlot,
-                    }
+                    [
+                        createVNode('span', null, props.label),
+                        createVNode(
+                            'span',
+                            {
+                                class: 'ba-form-item-label-tip',
+                            },
+                            [createTipNode()]
+                        ),
+                    ]
                 )
+            }
         }
+
+        return () =>
+            createVNode(
+                resolveComponent('el-form-item'),
+                {
+                    class: 'ba-input-item-' + props.type,
+                    prop: props.prop,
+                    ...props.attr,
+                    label: props.label,
+                },
+                {
+                    ...slots,
+                }
+            )
     },
 })
 </script>
 
 <style scoped lang="scss">
-.ba-form-item-label {
-    display: inline-block;
-    .ba-form-item-label-tip {
-        padding-left: 6px;
-        font-size: 12px;
-        color: var(--el-text-color-secondary);
+.ba-form-item-label-tip {
+    padding-left: 6px;
+    color: var(--el-text-color-secondary);
+    i {
+        cursor: pointer;
     }
 }
 .ba-form-item-not-support {