vue自定义指令

31 阅读1分钟
import { DirectiveBinding } from "vue";

const valid = {
  mounted(el: HTMLElement, binding: DirectiveBinding & { instance: any }) {
    const { arg, instance } = binding;
    const { lowCodeFieldList } = instance || {};
    if (isNil(lowCodeFieldList)) {
      console.warn("v-valid指令所在组件未抛出lowCodeFieldList属性");
      return;
    }
    setTimeout(() => {
      if (条件-1) return;
      // 可见性
      if (条件0) {
        el.parentNode?.removeChild(el);
      }
      // 禁用
      if (条件1) {
        const inputElement: HTMLInputElement | null = el.querySelector(".van-field__control");
        if (inputElement) {
          inputElement.disabled = true;
          const formInputElement = el.querySelector(".van-field");
          formInputElement?.classList.add("van-field--disabled");
        }
      }
      // 必填
      if (条件2) {
        const labelElement = el.querySelector(".label");
        if (labelElement) {
          labelElement.classList.add("required");
        }
      }
    }, 300);
  },
};

export default valid;

参数文档

  1. 第二个参数:指令各个生命周期勾子函数 image.png 2.勾子函数参数说明

image.png