美文网首页
vue 点击复制文本内容

vue 点击复制文本内容

作者: _Struggle_ | 来源:发表于2019-07-19 10:15 被阅读0次
    1.先安装clipboard     npm install clipboard --save 
    2.在main.js中引入并挂载:
        import clipboard from 'clipboard';
        Vue.prototype.clipboard = clipboard
    3.在页面中进行使用
    <div class="express_info_right" id="express_info_right" data-clipboard-action="copy"
     :data-clipboard-text="order.order_no"  @click="copy">
                        <span>复制</span>
    </div>
    
    methods:{
          copy() {
                let clipboard = new this.clipboard("#express_info_right");
                let that = this
                clipboard.on('success', function () {
                   //成功时操作
                   //在这里,我使用的是vux ui框架进行一些弹层;
                    that.$vux.toast.show({
                        type:"success",
                        isShowMask:true,
                        time:1000,
                        text:"已复制",
                        position:"middle"
                    })
                });
                clipboard.on('error', function () {
                    that.$vux.toast.show({
                        type:"cancel",
                        isShowMask:true,
                        time:1000,
                        position:"middle",
                        text:"复制失败"
                    })
                });
              }
        }
    

    相关文章

      网友评论

          本文标题:vue 点击复制文本内容

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