解决clipboard.js在vue的弹窗组件中无效或者首次点击无效

最新推荐文章于 2024-03-26 14:51:47 发布

原创最新推荐文章于 2024-03-26 14:51:47 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用ref和Clipboard.js库实现按钮点击复制文本的功能，包括解决初次复制不触发及弹窗组件中复制无效的问题。通过在mounted钩子初始化Clipboard实例，并在copyCode方法中监听复制的成功与失败事件，确保了复制操作的顺利进行。

解决办法：

通过ref获取div元素

代码：

 <el-button ref="copy" :data-clipboard-text="复制该文字" type="primary" @click="copyCode" size="small">复制</el-button>

mounted(){
            //mounted中初始化实例，解决第一次复制不触发问题
            let copyDomTxt=this.$refs['copy'].$el
            this.clipboard=new Clipboard(copyDomTxt)
        },

copyCode() {
                //解决在vue的弹窗组件中无效,要使用ref获取元素
                // let copyDomTxt=this.$refs['copy'].$el
                // let clipboard = new Clipboard(copyDomTxt)
                //复制成功
                this.clipboard.on('success', ()=> {
                    this.$message.success('复制成功！')
                    this.clipboard.destroy()
                })
                //复制失败
                this.clipboard.on('error', ()=> {
                    this.$message.error('复制失败！')
                    this.clipboard.destroy()
                })
            },