!309 【Form】完成messageShowType的popover提示

Merge pull request !309 from AlanLee/dev

Author: kagol

packages/devui-vue/devui/form/index.ts

@@ -32,7 +32,7 @@ export { Form, FormLabel, FormItem, FormControl, FormOperation }
 export default {
  title: 'Form 表单',
  category: '数据录入',
- status: '70%',
+ status: '75%',
  install(app: App): void {
  app.use(Form as any);
  app.use(FormLabel as any);

packages/devui-vue/devui/form/src/directive/d-validate-rules.ts

@@ -12,6 +12,8 @@ interface ValidateFnParam {
  isFormTag: boolean
  message: string
  messageShowType: MessageShowType
+ dfcUID: string
+ popPosition: PopPosition | Array<BasePopPosition>
 }
 
 interface CustomValidatorRuleObject {
@@ -24,6 +26,7 @@ interface DirectiveValidateRuleOptions {
  updateOn?: UpdateOn
  errorStrategy?: ErrorStrategy
  asyncDebounceTime?: number
+ popPosition?: PopPosition | Array<BasePopPosition>
 }
 
 interface DirectiveBindingValue {
@@ -38,9 +41,18 @@ interface DirectiveCustomRuleItem extends RuleItem {
  asyncValidators: CustomValidatorRuleObject[]
 }
 
+export interface ShowPopoverErrorMessageEventData {
+ showPopover?: boolean 
+ message?: string
+ uid?: string, 
+ popPosition?: PopPosition
+}
+
 type MessageShowType = 'popover' | 'text' | 'none' | 'toast';
 type UpdateOn = 'input' | 'focus' | 'change' | 'blur' | 'submit';
 type ErrorStrategy = 'dirty' | 'pristine';
+type BasePopPosition = 'left' | 'right' | 'top' | 'bottom';
+type PopPosition = BasePopPosition | 'left-top' | 'left-bottom' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right';
 
 enum ErrorStrategyEnum {
  dirty = 'dirty',
@@ -198,14 +210,20 @@ function handleErrorStrategyPass(el: HTMLElement): void {
  el.setAttribute('class', classList.join(' '));
 }
 
-function handleValidateError({el, tipEl, message, isFormTag, messageShowType}: Partial<ValidateFnParam>): void {
+function handleValidateError({el, tipEl, message, isFormTag, messageShowType, dfcUID, popPosition = 'right-bottom'}: Partial<ValidateFnParam>): void {
  // 如果该指令用在form标签上，这里做特殊处理
  if(isFormTag && messageShowType === MessageShowTypeEnum.toast) {
  // todo：待替换为toast
  alert(message);
  return;
  }
 
+ // messageShowType为popover时，设置popover
+ if(MessageShowTypeEnum.popover === messageShowType) {
+ EventBus.emit("showPopoverErrorMessage", {showPopover: true, message, uid: dfcUID, popPosition} as ShowPopoverErrorMessageEventData);
+ return;
+ }
+
  tipEl.innerText = '' + message;
  tipEl.style.display = 'inline-flex';
  tipEl.setAttribute('class', 'd-validate-tip');
@@ -225,7 +243,7 @@ function getFormName(binding: DirectiveBinding): string {
 }
 
 // 校验处理函数
-function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType}: Partial<ValidateFnParam>) {
+function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition}: Partial<ValidateFnParam>) {
  validator.validate({modelName: modelValue}).then(() => {
  handleValidatePass(el, tipEl);
  }).catch((err) => {
@@ -240,13 +258,22 @@ function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowTyp
  msg = errors[0].message;
  }
 
- handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType});
+ handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition});
  })
 }
 
+// 检测popover的position是否是正确值
+function checkValidPopsition(positionStr: string): boolean {
+ const validPosition = ['left', 'right', 'top', 'bottom', 'left-top', 'left-bottom', 'top-left', 'top-right', 'right-top', 'right-bottom', 'bottom-left', 'bottom-right'];
+ const isValid = validPosition.includes(positionStr);
+ !isValid && console.warn(`invalid popPosition value '${positionStr}'.`);
+ return isValid
+}
+
 export default {
  mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void {
  const isFormTag = el.tagName === 'FORM';
+ const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid;
 
  const hasOptions = isObject(binding.value) && hasKey(binding.value, 'options');
 
@@ -259,12 +286,25 @@ export default {
  let { errorStrategy }: DirectiveBindingValue = binding.value;
 
  // errorStrategy可配置在options对象中
- const { 
+ let { 
  updateOn = UpdateOnEnum.change, 
  errorStrategy: ErrorStrategy = ErrorStrategyEnum.dirty, 
- asyncDebounceTime = 300
+ asyncDebounceTime = 300,
+ popPosition = ['right', 'bottom']
  }: DirectiveValidateRuleOptions = options;
 
+ // 设置popover的位置
+ if(messageShowType === MessageShowTypeEnum.popover) {
+ if(Array.isArray(popPosition)) {
+ popPosition = (popPosition.length > 1 ? popPosition.join('-') : popPosition[0]) as PopPosition;
+ if(!checkValidPopsition(popPosition)) {
+ popPosition = 'right-bottom';
+ }
+ }else if(!checkValidPopsition(popPosition)) {
+ popPosition = 'right-bottom';
+ }
+ }
+
  if(!errorStrategy) {
  errorStrategy = ErrorStrategy;
  }
@@ -340,7 +380,10 @@ export default {
 
  const htmlEventValidateHandler = (e) => {
  const modelValue = e.target.value;
- validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType});
+ if(messageShowType === MessageShowTypeEnum.popover) {
+ EventBus.emit("showPopoverErrorMessage", {showPopover: false, message: "", uid: dfcUID} as ShowPopoverErrorMessageEventData);
+ }
+ validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition});
  }
 
  // 监听事件验证

packages/devui-vue/devui/form/src/form-control/form-control.scss

@@ -60,6 +60,29 @@
  }
  }
 
+
+ .devui-control-content-wrapper {
+ position: relative; 
+ & > div {
+ z-index: 10;
+ }
+ .devui-popover-wrapper {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ z-index: 9;
+ 
+ & > div {
+ width: inherit;
+ height: 100%;
+ }
+ }
+ }
+
+
+
  .has-feedback {
  display: flex;
  align-items: center;

packages/devui-vue/devui/form/src/form-control/form-control.tsx

@@ -1,8 +1,14 @@
-import { defineComponent, inject, ref, computed, reactive } from 'vue';
+import { defineComponent, inject, ref, computed, reactive, onMounted } from 'vue';
+import { uniqueId } from 'lodash-es';
 import {IForm, formControlProps, formInjectionKey} from '../form-types';
+import { ShowPopoverErrorMessageEventData } from '../directive/d-validate-rules'
+import { EventBus } from '../util';
 import Icon from '../../../icon/src/icon';
+import Popover from '../../../popover/src/popover';
 import './form-control.scss';
 
+type positionType = 'top' | 'right' | 'bottom' | 'left';
+
 export default defineComponent({
  name: 'DFormControl',
  props: formControlProps,
@@ -11,6 +17,20 @@ export default defineComponent({
  const dForm = reactive(inject(formInjectionKey, {} as IForm));
  const labelData = reactive(dForm.labelData);
  const isHorizontal = labelData.layout === 'horizontal';
+ const uid = uniqueId("dfc-");
+ const showPopover = ref(false);
+ const tipMessage = ref("");
+ const popPosition = ref<positionType>("bottom");
+
+ onMounted(() => {
+ EventBus.on("showPopoverErrorMessage", (data: ShowPopoverErrorMessageEventData) => {
+ if(uid === data.uid) {
+ showPopover.value = data.showPopover;
+ tipMessage.value = data.message;
+ popPosition.value = data.popPosition as any; // todo: 待popover组件positionType完善类型之后再替换类型
+ }
+ });
+ });
 
  const iconData = computed(() => {
  switch(props.feedbackStatus) {
@@ -30,9 +50,14 @@ export default defineComponent({
  feedbackStatus,
  extraInfo,
  } = props;
- return <div class="form-control" ref={formControl}>
+ return <div class="form-control" ref={formControl} data-uid={uid}>
  <div class={`devui-form-control-container${isHorizontal ? ' devui-form-control-container-horizontal' : ''}${feedbackStatus ? ' has-feedback' : ''}${feedbackStatus === 'error' ? ' feedback-error' : ''}`}>
- {ctx.slots.default?.()}
+ <div class="devui-control-content-wrapper">
+ {ctx.slots.default?.()}
+ <div class="devui-popover-wrapper">
+ { showPopover.value && <Popover visible={true} content={tipMessage.value} popType={"error"} position={popPosition.value} /> }
+ </div>
+ </div>
  {
  (feedbackStatus || ctx.slots.suffixTemplate?.()) &&
  <span class="feedback-status">

packages/devui-vue/docs/components/form/index.md

@@ -841,16 +841,14 @@ export default defineComponent({
 
 #### 验证单个元素，自定义管理消息提示
 
-> doing
->
-> 待引入popover组件
+> done
 
 配置`messageShowType`可选择消息自动提示的方式，默认为`popover`。
 
 - 设置为`popover`错误信息将在元素聚焦时以`popover`形式呈现。
 - 设置为`text`错误信息将自动以文本方式显示在元素下方(需要与表单控件容器配合使用)。 
 - 设置为`none`错误信息将不会自动呈现到视图， 可在模板中获取`message`或通过监听`messageChange`事件获取错误`message`， 或在模板中直接通过引用获取。
-- 配置`popPosition`可在消息提示方式为`popover`时，自定义`popover`内容弹出方向。 默认为`['right', 'bottom']`。
+- 在 `options`中配置 `popPosition`可在消息提示方式为`popover`时，自定义`popover`内容弹出方向， 默认为`['right', 'bottom']`。更多取值参考popover组件。
 
 :::demo
 
@@ -875,15 +873,17 @@ export default defineComponent({
  </d-form-item>
  <d-form-item prop="asyncSum">
  <d-form-label>计算：1 + 2 = ？</d-form-label>
- <d-form-control extraInfo="messageShowType为popover，使用popover进行提示（todo，待引入popover组件）">
+ <d-form-control extraInfo="messageShowType为popover，使用popover进行提示">
  <d-input v-model:value="formModel.asyncSum" v-d-validate-rules="{
  rules: {
  asyncValidators: [
  {message: '不对喔！（async）', asyncValidator: customAsyncValidator}
  ]
  },
  options: {
- updateOn: 'input'
+ updateOn: 'input',
+ messageShowType: 'popover',
+ popPosition: 'bottom'
  }
  }" />
  </d-form-control>
@@ -1616,10 +1616,10 @@ export default defineComponent({
 
 #### v-d-validate-rules
 
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| ------- | ------------------ | ------ | --------------------------- | ------ |
-| rules | 必选，表单校验规则 | object | | -- |
-| options | 可选，配置选项 | object | `errorStrategy`、`updateOn` | |
+| 参数 | 说明 | 类型 | 可选值  | 默认值 |
+| ------- | ------------------ | ------ | ------------------------------------------ | ------ |
+| rules | 必选，表单校验规则 | object |  | -- |
+| options | 可选，配置选项 | object | `errorStrategy`、`updateOn`、`popPosition` | |
 
 > 该指令仅在`d-form`标签或`d-input`等表单类组件上使用有效。
 
@@ -1639,12 +1639,8 @@ export default defineComponent({
 
 - options支持以下字段
  - errorStrategy，错误更新策略：`dirty`（默认）、`prestine`
-
  - updateOn，校验时机，可选值有：`change`（默认）、 `blur`、 `input`
+ - popPosition，自定义`popover`内容弹出方向。 默认为`['right', 'bottom']`，更多取值参考popover组件。
+
 
 
-<style>
- ul, ol {
- list-style: unset !important;
- }
-</style>