vue中复制内容

更新于：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);
  }
};