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方法过程,避免踩更多坑,希望对大家有用,也欢迎指出错误!

Logo

前往低代码交流专区

更多推荐