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

Winter · 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>

回答(2)
时间
W
Winter
2 · 2019-02-25 14:32:56

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

W
Winter
1 · 2019-02-25 11:17:07

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

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

JS,增加doCopy方法


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

 

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序