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 f8a59f2852df6e2c035be9278fcccc2714681fae..87edc1a694b8d03a6e91540add0499e5a5ba0e4c 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 @@ -235,6 +235,13 @@ function handleValidatePass(el: HTMLElement, tipEl: HTMLElement): void { handleErrorStrategyPass(el); } +// 获取ref的name +function getRefName(binding: DirectiveBinding): string { + const _refs = binding.instance.$refs; + const refName = Object.keys(_refs)[0]; + return refName; +} + // 获取表单name function getFormName(binding: DirectiveBinding): string { const _refs = binding.instance.$refs; @@ -274,17 +281,23 @@ export default { mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void { const isFormTag = el.tagName === 'FORM'; const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid; + const refName = getRefName(binding); const hasOptions = isObject(binding.value) && hasKey(binding.value, 'options'); // 获取指令绑定的值 - const { + let { rules: bindingRules, options = {}, messageShowType = MessageShowTypeEnum.popover }: DirectiveBindingValue = binding.value; let { errorStrategy }: DirectiveBindingValue = binding.value; + if(refName) { + // 判断d-form是否传递了messageShowType属性 + messageShowType = binding.instance[refName]["messageShowType"] ?? "popover"; + } + // errorStrategy可配置在options对象中 let { updateOn = UpdateOnEnum.change, diff --git a/packages/devui-vue/devui/form/src/form-types.ts b/packages/devui-vue/devui/form/src/form-types.ts index 662bfab3009698d01c20e0b42a3146a056eb41fc..5c0d6489bec47414d5237ecc8b970f43bef6e89e 100644 --- a/packages/devui-vue/devui/form/src/form-types.ts +++ b/packages/devui-vue/devui/form/src/form-types.ts @@ -30,6 +30,10 @@ export const formProps = { type: String, default: '', }, + messageShowType: { + type: String as PropType<'popover' | 'text' | 'toast' | 'none'>, + default: 'popover', + }, } as const export const formItemProps = { @@ -96,6 +100,7 @@ export interface IForm { formMitt: Emitter rules: any columnsClass: string + messageShowType: string } export interface IFormLabel { diff --git a/packages/devui-vue/devui/form/src/form.tsx b/packages/devui-vue/devui/form/src/form.tsx index e8fbe99dba86e7613b8ee03f4ba2d868a2ec5758..f2d48877f8ceac4d9c8eaab1b202142859d407ae 100644 --- a/packages/devui-vue/devui/form/src/form.tsx +++ b/packages/devui-vue/devui/form/src/form.tsx @@ -40,7 +40,8 @@ export default defineComponent({ labelAlign: props.labelAlign, }, rules: props.rules, - columnsClass: props.columnsClass + columnsClass: props.columnsClass, + messageShowType: "popover" }); const onSubmit = (e) => { diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md index cd5e4890cbec96b279329d3fc321bd827cec0163..9b65e47805d803acd62abeb5970290df752562f3 100644 --- a/packages/devui-vue/docs/components/form/index.md +++ b/packages/devui-vue/docs/components/form/index.md @@ -1098,7 +1098,8 @@ export default defineComponent({ > doing -待实现在dForm层统一设置messageShowType。 +对于自动错误提示的方式,在form中, 建议在dForm层统一设置`messageShowType`,需同时设置ref属性才能生效。 + :::demo @@ -1106,8 +1107,7 @@ export default defineComponent({