vue-clipboard2 在b-modal弹窗中复制功能失效?

前端的一些坑

Winter

2019-02-25

vue-clipboard2是vue中比较常用的复制组件，但是在bootstrap的弹窗组件b-modal中却无法正常使用，相同的在其他的动态内容中也是无法使用的。

<b-modal>

  <div>

    <div>

       <b-tooltip content="已复制到剪贴板" target="asa-copy-successed" style="display:inline" :show="copyed" :triggers="'false'">

已复制到剪贴板

      </b-tooltip>

    </div>

    <a href="javascript:void(0);" id="asa-copy-successed"

         v-clipboard:copy="loginDomain"

         v-clipboard:error="handleError"

         v-clipboard:success="copySuccess">复制</a>

  </div>

</b-modal>

第113篇《vue-clipboard2 在b-modal弹窗中复制功能失效?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Winter 2019.02.25

参考clipboard.js：https://clipboardjs.com/#advanced-usage

Winter 2019.02.25

对于该问题vue-clipboard2作者提供了对应的解决方案，引入了container元素，对于动态内容需要传入container。

所以需要在代码中加入如下

JS，增加doCopy方法


    doCopy() {
      this.$copyText('samyoc.com', this.$refs.loginDomainArea);
    },

 

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android