feat: inline error

Author: cole

src/packages/table/editable-table/components/inline-error/index.jsx

@@ -0,0 +1,60 @@
+import { defineComponent, ref, unref } from 'vue'
+import { Popover } from 'ant-design-vue'
+import { pick } from 'lodash-es'
+import classNames from '@/utils/classNames/bind'
+import styles from './style/index.module.scss'
+
+const cx = classNames.bind(styles)
+
+export default defineComponent({
+    inheritAttrs: false,
+    props: {
+        ...Popover.props,
+        trigger: {
+            type: String,
+            default: 'click'
+        },
+        placement: {
+            type: String,
+            default: 'topLeft'
+        },
+        errors: {
+            type: Array,
+            default: () => ([])
+        }
+    },
+    setup (props, { slots }) {
+        const sOpen = ref(false)
+
+        function onOpenChange (value) {
+            if (value !== unref(sOpen)) {
+                sOpen.value = value
+            }
+        }
+
+        return () => {
+            const { errors } = props
+
+            const popoverProps = {
+                ...pick(props, Object.keys(Popover.props)),
+                open: errors.length !== 0 ? unref(sOpen) : false,
+                onOpenChange: onOpenChange
+            }
+
+            const popoverSlots = {
+                content: () => (
+                    <div class={cx('with-help')}>
+                        {errors}
+                    </div>
+                )
+            }
+            return (
+                <Popover {...popoverProps} v-slots={popoverSlots}>
+                    <div onClick={() => false}>
+                        {slots.default && slots.default()}
+                    </div>
+                </Popover>
+            )
+        }
+    }
+})

src/packages/table/editable-table/components/inline-error/style/index.module.scss

@@ -1,6 +1,7 @@
 import { defineComponent, reactive, watch } from 'vue'
 import { Field, Form } from '@/packages/form'
 import Table from '../table'
+import InlineError from './components/inline-error'
 import { omit, pick } from 'lodash-es'
 
 const editable = {
@@ -56,7 +57,11 @@ export default defineComponent({
                 fieldProps: { ...fieldProps, style: { width: '100%' } },
                 formItemProps: needFormItemProps
             }
-            return <Field {...needFieldProps}/>
+            return (
+                <InlineError errors={['此项为必填项']}>
+                    <Field {...needFieldProps}/>
+                </InlineError>
+            )
         }
 
         return () => {