首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue js点击复制文本到剪贴板

vue中js实现点击复制文本到剪贴板的3种方案

2023-09-05 10:58:51 作者：星月前端

今天遇到一个复制粘贴的需求,研究之后发现太简单了,这篇文章主要给大家介绍了关于vue中js实现点击复制文本到剪贴板的3种方案,文中通过代码介绍的非常详细,需要的朋友可以参考下

vue中js实现点击复制文本到剪贴板

因为在网上找了一些很杂乱不适用所以自己写一篇记录分享一下vue中js实现点击复制文本到剪贴板-三种方案

效果：

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

首先，我们需要安装clipboard库，它是一个轻量级的JavaScript库，用于复制/粘贴文本到剪贴板。

命令行运行npm install clipboard --save进行安装。

 npm install clipboard --save

使用该库实现代码如下：

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

方案二：使用v-copy指令

我们可以使用vue指令，使元素支持复制文本到剪贴板。

<template>
  <div>
    <button v-copy="text">复制文本</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: 'Hello World'
    }
  }
}
</script>
// 注册指令
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库

clipboard.js库是一个现成的插件，可以通过安装运用它来实现复制文本到剪贴板的功能。

命令行运行 npm install clipboard --save 进行安装。

npm install clipboard --save

使用clipboard.js实现代码如下：

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

方案三：使用clipboard.js库（vue3版）

安装 clipboard.js 库

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

npm i clipboard
# 或者
yarn add clipboard

完整代码如下：

<template>
  <button class="copy-btn">复制</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('复制成功')
  })
  clipboard.on('error', () => {
    console.log('复制失败')
  })
}
onMounted(() => {
  copyText()
})
</script>

以上三种方案，都可以实现复制文本到剪贴板的功能，具体应用中，可根据实际情景选择适合自己的方案。

总结

到此这篇关于vue中js实现点击复制文本到剪贴板的3种方案的文章就介绍到这了,更多相关vue js点击复制文本到剪贴板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue中js实现点击复制文本到剪贴板的3种方案