vue3 v-clipboard:copy

vue3v-clipboard:copy

在Vue 3中，你可以使用v-clipboard:copy来创建一个按钮，当用户点击时复制特定的文本到剪贴板。首先，你需要安装并引入vue3-clipboard库。

1. 安装vue3-clipboard：

   npm install vue3-clipboard --save

2. 在你的Vue应用中设置插件：

   import { createApp } from 'vue'
   import App from './App.vue'
   import Clipboard from 'vue3-clipboard'
    
   const app = createApp(App)
   app.use(Clipboard)
   app.mount('#app')

3. 在你的组件中使用v-clipboard:copy指令：

   <template>
     <button v-clipboard:copy="message" v-clipboard:success="onCopy">
       复制到剪贴板
     </button>
   </template>
    
   <script>
   export default {
     data() {
       return {
         message: '要复制的文本内容'
       }
     },
     methods: {
       onCopy(e) {
         alert('复制成功：' + e.text);
       }
     }
   }
   </script>

   在上面的例子中，当按钮被点击时，message中的文本将被复制到剪贴板，并且调用onCopy方法。这个方法可以用来提示用户复制成功，或者执行其他任何你需要的操作。