vue2和vue3 复制文本到剪切板

Vue2

首先执行 npm i vue-clipboard2

接着在main.js中配置

 接着在需要的组件中进行使用

<template>
  <div>
    <div>{{text}}</div>
    <button
      v-clipboard:copy="text"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >
      拷贝
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
		text:'我是被拷贝的文本'
	};
  },
  methods: {
	onCopy(e){
		alert(e.text)
	},
	onError(e){
		alert(e)
	}
  },
};
</script>

onCopy是复制成功回调，error是复制失败回调，button中的copy的值是需要复制的文本

效果如下:

 Vue3

执行 npm i vue-clipboard3

语法糖写法 不使用语法糖则return即可

<template>
  <div>
    <div>{{ text }}</div>
    <button @click="copy">拷贝</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import useClipboard from "vue-clipboard3";

const text = ref("我是被拷贝的文本");

const { toClipboard } = useClipboard();

const copy = async () => {
  try {
    await toClipboard(text.value);
    alert(text.value);
  } catch (e) {
    console.error(e);
  }
};
</script>

 效果如下: