先看下效果圖：

指令是啥？

按照慣例，先請(qǐng)出官方的解釋：

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況，稍后我們?cè)儆懻?。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

再按照慣例，大家 ( 假裝 ) 看不懂，然后我來(lái)舉個(gè)栗子解釋一番。。。好，還是不知所云，本文結(jié)束 ( Ctrl + F4 ) ，下一篇。

為了避免上述情況出現(xiàn)，就不解釋了。實(shí)際上官方提供了很多內(nèi)置指令，如： v-if 、 v-for 、 v-bind and so on。每一個(gè)指令都有自己特定的功能。

自定義指令

顧名思義就是自己定義的指令啦，可以實(shí)現(xiàn)我們想要的功能。下面就實(shí)現(xiàn)一個(gè) 一鍵 Copy 的功能吧。

生命周期

首先簡(jiǎn)單瞟一下指令的語(yǔ)法，每個(gè)指令都有自己的生命周期，看到生命周期，肯定會(huì)想到鉤子函數(shù)，沒錯(cuò)，指令也提供了鉤子函數(shù)：

• bind：指令第一次綁定到元素時(shí)調(diào)用，此鉤子只會(huì)調(diào)用一次。在這里可以進(jìn)行一次性的初始化設(shè)置。
• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
  

下面再簡(jiǎn)單瞟一眼上述鉤子函數(shù)的參數(shù)哈：

• el ：指令所綁定的元素，可以用來(lái)直接操作 DOM 。
• binding ：一個(gè)對(duì)象，包含以下屬性：
• name ：指令名，不包括 v- 前綴。
• value ：指令的綁定值，例如： v-my-directive="1 + 1" 中，綁定值為 2 。
• oldValue ：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。
• expression ：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 " 1 + 1 "。
• arg ：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 " foo "。
• modifiers ：一個(gè)包含修飾符的對(duì)象。例如： v-my-directive.foo.bar 中，修飾符對(duì)象為 { foo: true, bar: true } 。
• vnode ： Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來(lái)了解更多詳情。
• oldVnode ：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
  

看起來(lái)還挺多的，不過別方，其實(shí)常用的就幾個(gè)。好了下面要開始表演了：

首先建一個(gè) js 文件（v-copy.js）。定義一個(gè)對(duì)象。（ 指令實(shí)際就是一個(gè)對(duì)象 ）

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

const vCopy = { // 名字愛取啥取啥
 /*
  bind 鉤子函數(shù)，第一次綁定時(shí)調(diào)用，可以在這里做初始化設(shè)置
  el: 作用的 dom 對(duì)象
  value: 傳給指令的值，也就是我們要 copy 的值
 */
 bind(el, { value }) {
  el.$value = value; // 用一個(gè)全局屬性來(lái)存?zhèn)鬟M(jìn)來(lái)的值，因?yàn)檫@個(gè)值在別的鉤子函數(shù)里還會(huì)用到
  el.handler = () => {
   if (!el.$value) {
   // 值為空的時(shí)候，給出提示，我這里的提示是用的 ant-design-vue 的提示，你們隨意
    Message.warning('無(wú)復(fù)制內(nèi)容');
    return;
   }
   // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
   const textarea = document.createElement('textarea');
   // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤，同時(shí)將 textarea 移出可視區(qū)域
   textarea.readOnly = 'readonly';
   textarea.style.position = 'absolute';
   textarea.style.left = '-9999px';
   // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
   textarea.value = el.$value;
   // 將 textarea 插入到 body 中
   document.body.appendChild(textarea);
   // 選中值并復(fù)制
   textarea.select();
   textarea.setSelectionRange(0, textarea.value.length);
   const result = document.execCommand('Copy');
   if (result) {
    Message.success('復(fù)制成功');
   }
   document.body.removeChild(textarea);
  };
  // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
  el.addEventListener('click', el.handler);
 },
 // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā)
 componentUpdated(el, { value }) {
  el.$value = value;
 },
 // 指令與元素解綁的時(shí)候，移除事件綁定
 unbind(el) {
  el.removeEventListener('click', el.handler);
 },
};
export default vCopy;

到這里，一鍵 Copy 的功能就實(shí)現(xiàn)了，最后再說一嘴怎么將自定義指令注冊(cè)到全局：再新建一個(gè) js （ directives.js ）文件來(lái)注冊(cè)所有的全局指令。

import copy from './v-copy';
// 自定義指令
const directives = {
 copy,
};
// 這種寫法可以批量注冊(cè)指令
export default {
 install(Vue) {
  Object.keys(directives).forEach((key) => {
   Vue.directive(key, directives[key]);
  });
 },
};

最后，在 main.js 中這樣引入：

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

Vue.use(Directives);

最后的最后，說一下怎么用吧。。

<template>
 <button v-copy="copyText">copy</button>
</template>

<script>
export default {
 data() {
  return {
   copyText: '要 Copy 的內(nèi)容',
  };
 },
};
</script>

總結(jié)

以上所述是小編給大家介紹的Vue 自定義指令實(shí)現(xiàn)一鍵 Copy功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論