Skip to content

Commit 6556bcf

Browse files
author
cole
committed
feat: inline error
1 parent 2050fb7 commit 6556bcf

File tree

3 files changed

+66
-1
lines changed

3 files changed

+66
-1
lines changed
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { defineComponent, ref, unref } from 'vue'
2+
import { Popover } from 'ant-design-vue'
3+
import { pick } from 'lodash-es'
4+
import classNames from '@/utils/classNames/bind'
5+
import styles from './style/index.module.scss'
6+
7+
const cx = classNames.bind(styles)
8+
9+
export default defineComponent({
10+
inheritAttrs: false,
11+
props: {
12+
...Popover.props,
13+
trigger: {
14+
type: String,
15+
default: 'click'
16+
},
17+
placement: {
18+
type: String,
19+
default: 'topLeft'
20+
},
21+
errors: {
22+
type: Array,
23+
default: () => ([])
24+
}
25+
},
26+
setup (props, { slots }) {
27+
const sOpen = ref(false)
28+
29+
function onOpenChange (value) {
30+
if (value !== unref(sOpen)) {
31+
sOpen.value = value
32+
}
33+
}
34+
35+
return () => {
36+
const { errors } = props
37+
38+
const popoverProps = {
39+
...pick(props, Object.keys(Popover.props)),
40+
open: errors.length !== 0 ? unref(sOpen) : false,
41+
onOpenChange: onOpenChange
42+
}
43+
44+
const popoverSlots = {
45+
content: () => (
46+
<div class={cx('with-help')}>
47+
{errors}
48+
</div>
49+
)
50+
}
51+
return (
52+
<Popover {...popoverProps} v-slots={popoverSlots}>
53+
<div onClick={() => false}>
54+
{slots.default && slots.default()}
55+
</div>
56+
</Popover>
57+
)
58+
}
59+
}
60+
})

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

Whitespace-only changes.

src/packages/table/editable-table/index.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineComponent, reactive, watch } from 'vue'
22
import { Field, Form } from '@/packages/form'
33
import Table from '../table'
4+
import InlineError from './components/inline-error'
45
import { omit, pick } from 'lodash-es'
56

67
const editable = {
@@ -56,7 +57,11 @@ export default defineComponent({
5657
fieldProps: { ...fieldProps, style: { width: '100%' } },
5758
formItemProps: needFormItemProps
5859
}
59-
return <Field {...needFieldProps}/>
60+
return (
61+
<InlineError errors={['此项为必填项']}>
62+
<Field {...needFieldProps}/>
63+
</InlineError>
64+
)
6065
}
6166

6267
return () => {

0 commit comments

Comments
 (0)