美文网首页
Vue 实现复制到剪贴板功能

Vue 实现复制到剪贴板功能

作者: AR7_ | 来源:发表于2020-12-24 10:25 被阅读0次

    项目中需要实现复制到剪贴板的功能,看了一下vue相关的插件,发现了vue-clipboard2但是因为现在项目都是基于Vue 3.0开发,所以不适用,又发现了vue3-clipboard,但是没弄清楚怎么用,所以就想到使用js原生自带的功能,然后就发现了,一种写法:

     <el-input id="demoInput" ></el-input>
    
    let input = document.querySelector('#demoInput');
    input.select();
    document.execCommand('copy')
    

    然后在使用过程中,发现了这样写也是可以的:

     <el-input ref="demoInput" ></el-input>
    
     this.$refs.demoInput.select()
     document.execCommand('copy')
    

    但是在实现的时候遇到难题,那就是<el-input>如果是disabled,那么复制是不生效的,也试过在document.execCommand('copy')前后,动态设置disabled的值,但是效果并不理想,后来就想着要不写两个<el-input>吧,然后就看到下面这篇博文:

    JS document.execCommand实现复制功能(带你出坑)

    具体实现方式如下:

    
    <el-input ref="demoInput" type="textarea" style='opacity: 0;position: absolute;' :rows="20" v-model="flowJSON" placeholder="请输入内容" resize="none"></el-input>
    <el-input type="textarea" :rows="20" v-model="flowJSON" resize="none" disabled></el-input>
    <el-button size="mini" type="primary" @click="copyClicked">导出到剪贴板</el-button>
    
    methods: {
            copyClicked() {
                this.$refs.demoInput.select()
                document.execCommand('copy')
            }
    }
    

    相关文章

      网友评论

          本文标题:Vue 实现复制到剪贴板功能

          本文链接:https://www.haomeiwen.com/subject/nuapnktx.html