快捷導(dǎo)航

vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案

更新時(shí)間：2023年09月05日 11:01:04 作者：星月前端

今天遇到一個(gè)復(fù)制粘貼的需求,研究之后發(fā)現(xiàn)太簡(jiǎn)單了,這篇文章主要給大家介紹了關(guān)于vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板

因?yàn)樵诰W(wǎng)上找了一些很雜亂不適用所以自己寫(xiě)一篇記錄分享一下vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板-三種方案

效果：

方案一：使用原生API（clipboard）

首先，我們需要安裝clipboard庫(kù)，它是一個(gè)輕量級(jí)的JavaScript庫(kù)，用于復(fù)制/粘貼文本到剪貼板。

命令行運(yùn)行npm install clipboard --save進(jìn)行安裝。

 npm install clipboard --save

使用該庫(kù)實(shí)現(xiàn)代碼如下：

<template>
  <div>
    <button @click="copyText">復(fù)制文本</button>
  </div>
</template>
<script>
import clipboard from 'clipboard';
export default {
  methods: {
    copyText() {
      let text = 'Hello World';
      clipboard.writeText(text);
      alert('已復(fù)制到剪貼板！');
    }
  }
}
</script>

方案二：使用v-copy指令

我們可以使用vue指令，使元素支持復(fù)制文本到剪貼板。

<template>
  <div>
    <button v-copy="text">復(fù)制文本</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: 'Hello World'
    }
  }
}
</script>
// 注冊(cè)指令
Vue.directive('copy', {
  bind: function(el, binding) {
    el.$copy = function() {
      const textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('Copy');
      document.body.removeChild(textarea);
    }
    el.addEventListener('click', el.$copy);
  },
  unbind: function(el) {
    el.removeEventListener('click', el.$copy);
  }
});

方案三：使用clipboard.js庫(kù)

clipboard.js庫(kù)是一個(gè)現(xiàn)成的插件，可以通過(guò)安裝運(yùn)用它來(lái)實(shí)現(xiàn)復(fù)制文本到剪貼板的功能。

命令行運(yùn)行 npm install clipboard --save 進(jìn)行安裝。

npm install clipboard --save

使用clipboard.js實(shí)現(xiàn)代碼如下：

<template>
  <div>
    <button class="copy-btn" data-clipboard-text="Hello World">復(fù)制文本</button>
  </div>
</template>
<script>
import ClipboardJS from 'clipboard';
export default {
  mounted() {
    new ClipboardJS('.copy-btn');
  }
}
</script>

方案三：使用clipboard.js庫(kù)（vue3版）

安裝 clipboard.js 庫(kù)

可以使用 npm 或 yarn 安裝 clipboard.js，命令如下：

npm i clipboard
# 或者
yarn add clipboard

完整代碼如下：

<template>
  <button class="copy-btn">復(fù)制</button>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import ClipboardJS from 'clipboard'
const clipboardText = ref('hello world')
const copyText = () => {
  const clipboard = new ClipboardJS('.copy-btn', {
    text() {
      return clipboardText.value
    }
  })
  clipboard.on('success', () => {
    console.log('復(fù)制成功')
  })
  clipboard.on('error', () => {
    console.log('復(fù)制失敗')
  })
}
onMounted(() => {
  copyText()
})
</script>

以上三種方案，都可以實(shí)現(xiàn)復(fù)制文本到剪貼板的功能，具體應(yīng)用中，可根據(jù)實(shí)際情景選擇適合自己的方案。

總結(jié)

到此這篇關(guān)于vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案的文章就介紹到這了,更多相關(guān)vue js點(diǎn)擊復(fù)制文本到剪貼板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: