pc端和移动端(包含微信端)兼容的复制方法 clipboard.js+a标签

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39107093/article/details/78740651

首先安装clipboard.js

npm install clipboard --save-dev

在vue组件中引入

import Clipboard from 'clipboard'

点击复制,所以写了一个点击事件

 <input id="foo" type="text" value="a" v-model='invitorInfo.inviteUrl' style='opacity:0'>
 <button class='btn btn2' v-if='pc' @click='copyWx'  data-clipboard-action="copy" data-clipboard-target="#foo">立即邀请</button>        
<a class='weichat' v-else v-bind:href="invitorInfo.inviteUrl">立即邀请</a>
// 复制
  copyWx () {
    if (this.$store.getters.isLogin) {
      var clipboard = new Clipboard('.btn')
      clipboard.on('success', e => {
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
      // 不支持复制
      alert('浏览器不支持,请长按复制邀请')
      vm.pc = false;
      // 释放内存
      clipboard.destroy()
     })
    }else{
      this.$router.push('/entry')
    }
  },

手机端支持用a标签长按复制,复制的是a标签的href属性里面的东西

展开阅读全文

没有更多推荐了,返回首页