怎么在Vue中通過自定義指令實現一個一鍵 Copy功能

怎么在Vue中通過自定義指令實現一個一鍵 Copy功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和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 鉤子中可用。
  

看起來還挺多的，不過別方，其實常用的就幾個。好了下面要開始表演了：

首先建一個 js 文件（v-copy.js）。定義一個對象。（ 指令實際就是一個對象 ）

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

const vCopy = { // 名字愛取啥取啥
 /*
  bind 鉤子函數，第一次綁定時調用，可以在這里做初始化設置
  el: 作用的 dom 對象
  value: 傳給指令的值，也就是我們要 copy 的值
 */
 bind(el, { value }) {
  el.$value = value; // 用一個全局屬性來存傳進來的值，因為這個值在別的鉤子函數里還會用到
  el.handler = () => {
   if (!el.$value) {
   // 值為空的時候，給出提示，我這里的提示是用的 ant-design-vue 的提示，你們隨意
    Message.warning('無復制內容');
    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();
   textarea.setSelectionRange(0, textarea.value.length);
   const result = document.execCommand('Copy');
   if (result) {
    Message.success('復制成功');
   }
   document.body.removeChild(textarea);
  };
  // 綁定點擊事件，就是所謂的一鍵 copy 啦
  el.addEventListener('click', el.handler);
 },
 // 當傳進來的值更新的時候觸發
 componentUpdated(el, { value }) {
  el.$value = value;
 },
 // 指令與元素解綁的時候，移除事件綁定
 unbind(el) {
  el.removeEventListener('click', el.handler);
 },
};
export default vCopy;

到這里，一鍵 Copy 的功能就實現了，最后再說一嘴怎么將自定義指令注冊到全局：再新建一個 js （ directives.js ）文件來注冊所有的全局指令。

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

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