vue中复制内容

最新推荐文章于 2025-06-19 18:09:42 发布

原创最新推荐文章于 2025-06-19 18:09:42 发布 · 601 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue2和Vue3环境下，如何使用vue-clipboard2和vue-clipboard3插件实现文本内容的复制功能。在Vue2中，需引入vue-clipboard2并在main.js中安装，然后通过v-clipboard指令处理复制事件。而在Vue3中，使用vue-clipboard3，通过setup函数配合useClipboard方法来实现复制操作。

vue中复制内容

vue2+vue-clipboard2
vue3+vue-clipboard3

更新于：2023-02-15

vue2+vue-clipboard2

依赖项

“vue”: “^2.6.11”
“vue-clipboard2”: “^0.3.1”

在main.js引入

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

使用

<button v-clipboard:copy="copyValue" v-clipboard:success="onCopy" 
		v-clipboard:error="onError">
</button>

// 复制成功
onCopy(e) {
  this.$message.success("复制成功！");
},
// 复制失败
onError(e) {
  this.$message.error("复制失败！");
},

vue3+vue-clipboard3

依赖项

“vue”: “^3.2.45”
“vue-clipboard3”: “^2.0.0”

引入

import useClipboard from 'vue-clipboard3'

使用

<button @click="toCopy()">copy</button>

const toCopy = async () => {
  try {
    await toClipboard("Any text you like");
    console.log("Copied to clipboard");
  } catch (e) {
    console.error(e);
  }
};