Vue 自定义指令实现一键 Copy的功能

刚学vue的时候，对这个指令（directives）很陌生，然后通过文档和项目的积累，想必大家对指令（directives）也有了一定的了解，今天就带大家学习一下自定义指令。

指令是啥

官网是这么说的

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

自定义指令

顾名思义就是自己定义的指令啦，可以实现我们想要的功能。下面就实现一个 一键 Copy 的功能吧。

指令的生命周期

• bind：指令第一次绑定到元素时调用，此钩子只会调用一次。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

以及钩子函数的参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated钩子中可用。

看见还是挺多的，其实都是纸闹斧。废话不多说，开搞

1. 创建一个自定义指令的对象(我这里名字叫v-copy.js)

import { Message } from "ant-design-vue";

const vCopy = {
/**
 * 名字可以随便取
 * bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
 * el: 作用的 dom 对象
 * value: 传给指令的值，也就是我们要 copy 的值
 */
bind(el, { value }) {
  // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
  el.$value = value;
  el.handel = () => {
    // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意
    if (!el.$value) {
      Message.warning("无复制内容");
      return;
    }
    // 动态创建 textarea 标签
    const textarea = document.createElement("textarea");
    // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
    textarea.readOnly = "readonly";
    textarea.style.position = "absolute";
    textarea.style.left = "-99999x";
    // 将要 copy 的值赋给 textarea 标签的 value 属性
    textarea.value = el.$value;
    // 将 textarea 插入到 body 中
    document.body.appendChild(textarea);
    // 选中值并复制
    textarea.select();
    textarea.setSelectionRange(0, textarea.value.length);
    const result = document.execCommand("Copy");
    if (result) {
      Message.success("复制成功");
    }
    document.body.removeChild(textarea);
  };
  // 绑定点击事件，就是所谓的一键 copy 啦
  el.addEventListener("click", el.handel);
},
componentUpdated(el, { value }) {
  el.$value = value;
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
  el.removeEventListener("click", el.handel);
}
};

export default vCopy;

2.完成上一个实例对象的创建，其实咱们的一键copy已经实现 了，接下来就是见自定义指令注册到全局；接下来咱们载创建一个js文件来注册全局指令

import copy from "./v-copy";

// 自定义指令
const directives = {
  copy
};
// 批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach(key => {
      Vue.directive(key, directives[key]);
    });
  }
};

3.然后就是载main.js里面引入，挂载到vue的实例上

import Vue from 'vue';
import Directives from './directives';

Vue.use(Directives);

4.最后说一下怎么用

<template>
  <div class="hello">

    <a-input v-model="copyText"></a-input>
    <a-button class="copyBtn" type="primary" v-copy="copyText">copy</a-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      copyText: ""
    };
  }
};
</script>

完事儿