快捷導(dǎo)航

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

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

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

1.使用document.execCommand（棄用）

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

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

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

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

textarea標(biāo)簽：

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

2.Clipboard API

Clipboard API 是一個現(xiàn)代的 Web API，用于在網(wǎng)頁上執(zhí)行剪貼板操作（如復(fù)制和粘貼）。與 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('沒有要復(fù)制的內(nèi)容');
        return;
      }
      try {
        // 直接使用 Clipboard API 復(fù)制
        await navigator.clipboard.writeText(el.$value);
        console.log('復(fù)制成功');
      } catch (err) {
        console.error('復(fù)制失敗', 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="輸入要復(fù)制的內(nèi)容" />
    <button v-copy="text">點擊復(fù)制</button>
  </div>
</template>
<script>
import vCopy from './directives';
export default {
  data () {
    return {
      text: '這是要復(fù)制的內(nèi)容'  // 默認(rèn)的復(fù)制內(nèi)容
    };
  },
  directives: {
    copy: vCopy
  }
};
</script>

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

主要功能:

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

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

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

您可能感興趣的文章: