怎么在Vue中通過(guò)自定義指令實(shí)現(xiàn)一個(gè)一鍵 Copy功能

怎么在Vue中通過(guò)自定義指令實(shí)現(xiàn)一個(gè)一鍵 Copy功能？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

自定義指令

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

生命周期

首先簡(jiǎn)單瞟一下指令的語(yǔ)法，每個(gè)指令都有自己的生命周期，看到生命周期，肯定會(huì)想到鉤子函數(shù)，沒(méi)錯(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ā)生了改變，也可能沒(méi)有。

• 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)還挺多的，不過(guò)別方，其實(shí)常用的就幾個(gè)。好了下面要開(kāi)始表演了：

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

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

const vCopy = { // 名字愛(ài)取啥取啥
 /*
  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)喚起鍵盤(pán)，同時(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)了，最后再說(shuō)一嘴怎么將自定義指令注冊(cè)到全局：再新建一個(gè) js （ directives.js ）文件來(lái)注冊(cè)所有的全局指令。

import copy from './v-copy';
// 自定義指令
const directives = {
 copy,
};
// 這種寫(xiě)法可以批量注冊(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);

最后的最后，說(shuō)一下怎么用吧。。

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

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

看完上述內(nèi)容，你們掌握怎么在Vue中通過(guò)自定義指令實(shí)現(xiàn)一個(gè)一鍵 Copy功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！