vue使用自定義指令實現(xiàn)一鍵復制功能

更新時間：2024年09月10日 12:02:29 作者：Frilled Lizard

在Vue中,通過自定義指令v-copy和document.execCommand方法,可以實現(xiàn)點擊按鈕復制內容到剪貼板的功能,適用于處理長文本或多行文本的復制需求,而readonly屬性可避免內容被修改和移動設備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧

1.使用document.execCommand（棄用）

import { Message } from 'ant-design-vue';
const vCopy = { //
  /*
    bind 鉤子函數(shù)，第一次綁定時調用，可以在這里做初始化設置
    el: 作用的 dom 對象
    value: 傳給指令的值，也就是我們要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一個全局屬性來存?zhèn)鬟M來的值，因為這個值在別的鉤子函數(shù)里還會用到
    el.handler = () => {
      if (!el.$value) {
      // 值為空的時候，給出提示，我這里的提示是用的 ant-design-vue 的提示，你們隨意
        Message.warning('無復制內容');
        return;
      }
      // 動態(tài)創(chuàng)建 textarea 標簽
      const textarea = document.createElement('textarea');
      // 將該 textarea 設為 readonly 防止 iOS 下自動喚起鍵盤，同時將 textarea 移出可視區(qū)域
      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);
  },
  // 當傳進來的值更新的時候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};
export default vCopy;

<template>
  <div>
    <input v-model="text" placeholder="輸入要復制的內容" />
    <button v-copy="text">點擊復制</button>
  </div>
</template>
<script>
import vCopy from './directives';
export default {
  data () {
    return {
      text: '這是要復制的內容'  // 默認的復制內容
    };
  },
  directives: {
    copy: vCopy
  }
};
</script>

自定義指令 v-copy 綁定到按鈕上，點擊按鈕時會復制綁定的內容。
el.$value 保存了要復制的內容，在每次點擊時通過 document.execCommand(‘copy’) 復制到剪貼板。
當輸入框內容變化時，componentUpdated 鉤子會更新復制的內容。

execCommand 是一種用于執(zhí)行與用戶操作相關的命令的方法，主要用于在文檔上執(zhí)行剪貼板操作（如復制、剪切、粘貼）或格式化操作（如加粗、斜體、下劃線）。還可以使用：“copy”、“cut”、“paste”、“bold”、“italic”

textarea標簽：

支持選中和復制操作：textarea 標簽的內容可以被瀏覽器原生地選中，并且它能夠被復制到剪貼板。復制操作依賴于選中文本，而 textarea 和 input 元素是 HTML 中可以輕松選中文本內容的表單元素。雖然 input 標簽也可以用于復制文本，但相比于 textarea，input 標簽有一些局限性，特別是在處理較長文本或多行文本時。
textarea 標簽支持 readonly 屬性，可以確保它的內容在被復制之前不會被修改。將 textarea 設置為 readonly 能避免在移動設備上點擊時喚起虛擬鍵盤，避免不必要的用戶干擾。

2.Clipboard API

Clipboard API 是一個現(xiàn)代的 Web API，用于在網(wǎng)頁上執(zhí)行剪貼板操作（如復制和粘貼）。與 document.execCommand 不同，Clipboard API 提供了更現(xiàn)代的異步接口，并且支持在 HTTPS 頁面上執(zhí)行這些操作以確保安全性。
Clipboard API 的方法返回一個 Promise，這意味著你可以使用 then 和 catch 方法來處理成功和失敗的情況。

實現(xiàn)一鍵粘貼的功能：

使用 navigator.clipboard.readText() 方法從剪貼板讀取文本：

let vCopy = {
  bind (el, { value }) {
    el.$value = value;
    el.handler = async () => {
      if (!el.$value) {
        console.log('沒有要復制的內容');
        return;
      }
      try {
        // 直接使用 Clipboard API 復制
        await navigator.clipboard.writeText(el.$value);
        console.log('復制成功');
      } catch (err) {
        console.error('復制失敗', err);
      }
    };
    // 監(jiān)聽點擊事件
    el.addEventListener('click', el.handler);
  },
  componentUpdated (el, { value }) {
    el.$value = value;
  },
  unbind (el) {
    el.removeEventListener('click', el.handler);
  }
};
export default vCopy;

<template>
  <div>
    <input v-model="text" placeholder="輸入要復制的內容" />
    <button v-copy="text">點擊復制</button>
  </div>
</template>
<script>
import vCopy from './directives';
export default {
  data () {
    return {
      text: '這是要復制的內容'  // 默認的復制內容
    };
  },
  directives: {
    copy: vCopy
  }
};
</script>

navigator 是 window 對象的一個屬性，提供了有關用戶瀏覽器的信息和一些特定的功能。

主要功能:

提供有關用戶代理（瀏覽器）和操作系統(tǒng)的信息。
提供瀏覽器的語言設置和在線狀態(tài)等信息。提供對剪貼板操作、地理位置、媒體設備等現(xiàn)代瀏覽器功能的訪問。
拓展：使用 navigator.clipboard.writeText() 方法將文本寫入剪貼板：

<template>
  <div>
    <input v-model="text" placeholder="輸入要復制的內容" />
    <button @click="copyToClipboard">點擊復制</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '默認要復制的內容'
    };
  },
  methods: {
    copyToClipboard() {
      navigator.clipboard.writeText(this.text).then(() => {
        console.log('文本已成功復制到剪貼板');
      }).catch(err => {
        console.error('復制失敗', err);
      });
    }
  }
};
</script>

到此這篇關于vue使用自定義指令實現(xiàn)一鍵復制的文章就介紹到這了,更多相關vue一鍵復制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: