directives-自定义指定详解

生命周期

inserted

被插入父节点

bind

第一次被绑定

    created() {
      console.log('created')
    },
    mounted() {
      console.log('mounted')
    },
    directives:{
      focus:{
        inserted(el){
          console.log('inserted-el',el)
        },
        bind(el) {
          console.log('bind-el',el)
        },
        update(el) {
          console.log('directives-update',el)
        }
      }
    },
    updated() {
      console.log('updated')
    }

钩子函数的执行顺序如下：
bind ==> inserted ==> updated ==> componentUpdated ==> bind

官网描述：
https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks

安装使用

初始化

import { createApp } from "vue";
// directives
import copy from "@/directives/copy";
import numberOnly from "@/directives/numberOnly";
.....
var app = createApp(App);
app
  .use(copy)
  .use(numberOnly)
  .use(globalComponents)
  .mount("#app");

复制粘贴

export default {
  install: app => {
    app.directive("copy", {
      mounted(el, { value }) {
        if (typeof value === "object") {
          el.$value = value.text;
        } else {
          el.$value = value;
        }
        el.handler = () => {
          if (!el.$value) {
            // 值为空的时候，给出提示。可根据项目UI仔细设计
            if (typeof value === "object" && typeof value.err === "function") {
              value.err();
            }
            return;
          }
          // 动态创建 textarea 标签
          const textarea = document.createElement("textarea");
          // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
          textarea.readOnly = "readonly";
          textarea.style.position = "absolute";
          textarea.style.left = "-9999px";
          // 将要 copy 的值赋给 textarea 标签的 value 属性
          textarea.value = el.$value;
          // 将 textarea 插入到 body 中
          document.body.appendChild(textarea);
          // 选中值并复制
          textarea.select();
          const result = document.execCommand("Copy");
          if (
            result &&
            typeof value === "object" &&
            typeof value.success === "function"
          ) {
            value.success();
          }
          document.body.removeChild(textarea);
        };
        // 绑定点击事件，就是所谓的一键 copy 啦
        el.addEventListener("click", el.handler);
      },
      // 当传进来的值更新的时候触发
      updated(el, { value }) {
        if (typeof value === "object") {
          el.$value = value.text;
        } else {
          el.$value = value;
        }
      },
      // 指令与元素解绑的时候，移除事件绑定
      unmounted(el) {
        el.removeEventListener("click", el.handler);
      }
    });
  }
};

指定number类型输入

export default {
  install: app => {
    app.directive("numberOnly", {
      updated(el) {
        el.value = el.value.replace(/[^\d.]/g, ""); //清除非数字.
        el.value = el.value
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", "."); //只保留首个.
        if (el.value.length > 1 && el.value[0] === "0" && el.value[1] !== ".") {
          el.value = el.value.replaceAll("0", "");
        }
      }
    });
  }
};