vue3使用clipboard进行复制

1. 之前搜索很多关于button复制input框内容的方法，首次使用document.execCommand('Copy') // 执行浏览器复制命令并不成功，后来发现，官网将这个方法已经废弃，改用clipboard方法。

 1.安装依赖

npm install clipboard --save

 2.使用

<el-input  id='copyTarget' v-model="currURL"  placeholder="生成URL" style="width: 350px"></el-input>
<el-button  class="copy" id="copyBtn" :data-clipboard-text="currURL" data-clipboard-action="copy" data-clipboard-target="#copyTarget" type="primary" plain  @click="copy">复制URL</el-button>
                

import Clipboard from 'clipboard'
     
copy (){
       let clipboard = new Clipboard('.copy')
       clipboard.on('success', (e) => {
            console.log('复制成功', e)
             // 释放内存
            clipboard.destroy()
            alert("复制成功！");
       })
       clipboard.on('error', (e) => {
             // 不支持复制
            console.log('该浏览器不支持自动复制', e)
            // 释放内存
            clipboard.destroy()
            alert("该浏览器不支持自动复制,请手动复制！");
       })

},

3.注意：
        1、data-clipboard-text中的currURL为复制内容，data-clipboard-action="copy"为copy动作也可为剪切cut，class名必须与new Clipboard()中的class名相同。

        2、亲测 input中不能使用disabled，否则clipboard使用不了，

        3、安装依赖时，我安装了两种

npm install clipboard --save
npm install --save vue-clipboard3

        4、copy()方法写在methods: {}中，

4.附上参考链接：vue3使用clipboard进行复制_weixin_44440116的博客-CSDN博客

本次文章只是为了记录使用clipboard方法过程，避免踩更多坑，希望对大家有用，也欢迎指出错误！