From b009fcd205eef401c6708f35ca33cffebb78d99c Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Fri, 3 Dec 2021 22:20:58 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E5=AE=9E=E7=8E=B0=E8=B7=A8=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E9=AA=8C=E8=AF=81=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/form/index.ts | 8 +++- .../cross-component-validate-demo.scss | 3 ++ .../cross-component-validate-demo.tsx | 42 +++++++++++++++++++ .../form/src/directive/d-validate-rules.ts | 19 ++++++++- .../devui-vue/docs/components/form/index.md | 29 ++++++++++--- 5 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.scss create mode 100644 packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.tsx diff --git a/packages/devui-vue/devui/form/index.ts b/packages/devui-vue/devui/form/index.ts index bdbb61bb..eaab6cdb 100644 --- a/packages/devui-vue/devui/form/index.ts +++ b/packages/devui-vue/devui/form/index.ts @@ -4,6 +4,7 @@ import FormLabel from './src/form-label/form-label'; import FormItem from './src/form-item/form-item'; import FormControl from './src/form-control/form-control'; import FormOperation from './src/form-operation/form-operation'; +import CrossComponentValidateDemo from './src/cross-component-validate-demo/cross-component-validate-demo'; import dValidateRules from './src/directive/d-validate-rules'; Form.install = function(app: App) { @@ -27,7 +28,11 @@ FormOperation.install = function(app: App) { app.component(FormOperation.name, FormOperation) } -export { Form, FormLabel, FormItem, FormControl, FormOperation } +CrossComponentValidateDemo.install = function(app: App) { + app.component(CrossComponentValidateDemo.name, CrossComponentValidateDemo) +} + +export { Form, FormLabel, FormItem, FormControl, FormOperation, CrossComponentValidateDemo } export default { title: 'Form 表单', @@ -39,5 +44,6 @@ export default { app.use(FormItem as any); app.use(FormControl as any); app.use(FormOperation as any); + app.use(CrossComponentValidateDemo as any); } } diff --git a/packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.scss b/packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.scss new file mode 100644 index 00000000..57aa9c1e --- /dev/null +++ b/packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.scss @@ -0,0 +1,3 @@ +.devui-form-cross-component-validate-demo { + +} diff --git a/packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.tsx b/packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.tsx new file mode 100644 index 00000000..0aecb224 --- /dev/null +++ b/packages/devui-vue/devui/form/src/cross-component-validate-demo/cross-component-validate-demo.tsx @@ -0,0 +1,42 @@ +import { defineComponent, ref, watch } from 'vue'; +import './cross-component-validate-demo.scss'; + +export default defineComponent({ + name: 'CrossComponentValidateDemo', + props: { + age: { + type: [Number, String], + default: 0 + } + }, + emits: ['ageChange'], + setup(props, ctx) { + const ageData = ref(props.age); + + const customAsyncValidator = (rule, value) => { + return value >= 0 && value <= 200; + } + + watch(() => props.age, (newVal) => { + ageData.value = newVal; + }) + + return () => { + return
+ { + ctx.emit('ageChange', val); + }} v-d-validate-rules={{ + rules: { + asyncValidators: [ + {message: '年龄范围必须在0~200之间', asyncValidator: customAsyncValidator} + ] + }, + options: { + updateOn: 'input', + asyncDebounceTime: 500 + } + }} /> +
+ } + } +}) \ No newline at end of file diff --git a/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts b/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts index 87edc1a6..67388384 100644 --- a/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts +++ b/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts @@ -246,7 +246,7 @@ function getRefName(binding: DirectiveBinding): string { function getFormName(binding: DirectiveBinding): string { const _refs = binding.instance.$refs; const key = Object.keys(_refs)[0]; - return _refs[key]['name']; + return _refs[key] ? _refs[key]['name'] : ''; } // 校验处理函数 @@ -277,10 +277,22 @@ function checkValidPopsition(positionStr: string): boolean { return isValid } +// 获取FormControl标签上的uid +function getDfcUID(el: HTMLElement) { + if(el.tagName === "BODY") return ""; + if(el.dataset['uid']) return el.dataset['uid']; + let parent = el.parentElement; + if(parent.dataset['uid']?.startsWith('dfc-')) { + return parent.dataset['uid']; + } else { + return getDfcUID(parent.parentElement); + } +} + export default { mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void { const isFormTag = el.tagName === 'FORM'; - const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid; + let dfcUID = getDfcUID(el); const refName = getRefName(binding); const hasOptions = isObject(binding.value) && hasKey(binding.value, 'options'); @@ -392,6 +404,9 @@ export default { const validator = new AsyncValidator(descriptor); const htmlEventValidateHandler = (e) => { + // 监听事件的回调函数中需重新获取dfcUID + // 当d-validate-rules指令用在跨组件验证时，因子组件先mounted，这时父组件还未mounted，拿不到父组件的data-uid，所以这里需重新获取dfcUID + dfcUID = getDfcUID(el); const modelValue = e.target.value; if(messageShowType === MessageShowTypeEnum.popover) { EventBus.emit("showPopoverErrorMessage", {showPopover: false, message: "", uid: dfcUID} as ShowPopoverErrorMessageEventData); diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md index 13591a26..03006fe4 100644 --- a/packages/devui-vue/docs/components/form/index.md +++ b/packages/devui-vue/docs/components/form/index.md @@ -1511,7 +1511,7 @@ export default defineComponent({ ```vue @@ -1532,15 +1536,30 @@ import {defineComponent, reactive, ref} from 'vue'; export default defineComponent({ setup(props, ctx) { - const dFormWithComponent = ref(null); + const dFormCrossComponentValidate = ref(null); let formModel = reactive({ name: 'AlanLee', - age: '24', + age: 24, }); + const resetForm = () => { + dFormCrossComponentValidate.value.resetFormFields(); + } + + const onSubmit = (e) => { + console.log('@submit', formModel); + } + + const onAgeChange = val => { + formModel.age = val; + } + return { - dFormWithComponent, + dFormCrossComponentValidate, formModel, + resetForm, + onSubmit, + onAgeChange } } }) -- Gitee From d36174ce3ce147c9eeffc206b4fd9efccdbc1146 Mon Sep 17 00:00:00 2001 From: "1445654576@qq.com" <1445654576@qq.com> Date: Sat, 4 Dec 2021 15:50:05 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=B7=A8?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=AA=8C=E8=AF=81=E5=8A=9F=E8=83=BD=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/docs/components/form/index.md | 53 +++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md index 03006fe4..7d7e823d 100644 --- a/packages/devui-vue/docs/components/form/index.md +++ b/packages/devui-vue/docs/components/form/index.md @@ -1502,9 +1502,10 @@ export default defineComponent({ ### 跨组件验证 -> todo +> done +可以在子组件的数据录入类组件中使用`v-d-validate-rules`指令进行表单验证。 :::demo @@ -1513,14 +1514,14 @@ export default defineComponent({