vue3使用clipboard.js

在Vue 3中使用clipboard.js可以通过以下步骤实现：

1. 安装clipboard.js：

npm install clipboard --save

2. 在Vue组件中引入并使用clipboard.js：

<template>
  <button ref="copyButton">复制文本</button>
</template>
 
<script>
import Clipboard from 'clipboard';
 
export default {
  mounted() {
    const clipboard = new Clipboard(this.$refs.copyButton, {
      text: () => '要复制的文本内容'
    });
 
    clipboard.on('success', (e) => {
      console.log('复制成功！');
      // 可以在这里做一些复制成功后的操作
    });
 
    clipboard.on('error', (e) => {
      console.log('复制失败！');
      // 可以在这里做一些复制失败后的操作
    });
  },
  unmounted() {
    this.clipboard.destroy();
  }
};
</script>

在上述代码中，我们通过ref属性为按钮创建了一个引用，并在mounted生命周期钩子中初始化了Clipboard实例。在Clipboard构造器中，我们传入了按钮的引用和一个对象，该对象定义了如何获取要复制的文本内容。成功复制文本时，会触发success事件；如果复制失败，会触发error事件。最后，在unmounted生命周期钩子中，我们调用clipboard.destroy()来清理事件监听器和相关的DOM改动。