vue自定义指令封装（加深印象）

Posted 2021-05-19 瀚海云涛

自定义指令是什么？

内置指令例如：v-model、v-show、v-bind、v-on等等
开发者自己也可以定义指令
vue自定义指令包含两种创建方式：
全局注册和组件注册

全局注册

1. 在src下新建 directives/index.js文件

import wht from "./wht";
import debounce from "./debounce";
import copy from "./copy";
const directives = {
  debounce,
  wht,
  copy,
};

export default {
  install(Vue) {
    Object.keys(directives).forEach((item) => {
      Vue.directive(item, directives[item]);
    });
  },
};

2. main.js引用

import Vue from "vue";
import App from "./App";
import router from "./router";
//此处是directives引用 begin
import Directives from "./directives";

Vue.use(Directives);
//此处是directives引用 end

Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>",
});

3. 创建指令

  const copy = {
  /**
   *初始化绑定，只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作
   * @param {*} el 当前的元素
   * @param {*} 例如：v-copy="测试文字" { value }是binding.value的缩写，可以直接获取value，也就是“测试文字”
   */
  bind: function(el, { value }) {
    el.newvalue = value;
    el.handler = function() {
      console.log(value);
      if (!el.newvalue) {
        console.log("复制的值为空");
        return;
      }
      let textarea = document.createElement("textarea");
      textarea.style.position = "absolute";
      textarea.style.left = "-1000px";
      textarea.style.readOnly = "readonly";
      textarea.value = el.newvalue;
      document.body.appendChild(textarea);
      textarea.select();

      let result = document.execCommand("copy");
      if (result) {
        console.log("复制成功");
      }
      document.body.removeChild(textarea);
    };
    el.addEventListener("click", el.handler);
  },
  //被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  inserted: function() {
    //插入节点
  },
  /**
   * 被绑定元素所在模板完成一次更新周期时调用。
   * @param {*} el 当前元素
   * @param {*} 获取当前绑定的值
   */
  componentUpdated: function(el, { value }) {
    el.newvalue = value;
  },
  //只调用一次， 指令与元素解绑时调用。
  unbind: function(el, { value }) {
    el.removeEventListener("click", el.handler);
  },
};

export default copy;

4. 用法

<template>
   <div class="">
      <input type="text" v-model="copyText" placeholder="请输入要复制的文字" />
      <button v-copy="copyText">点击复制自定义文字</button>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        copyText: \'要复制的指令内容\',
      }
    },
  }
</script>

引用贴1：https://juejin.cn/post/6906028995133833230#heading-2

引用贴2：https://juejin.cn/post/6844903942321602568