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

来源:互联网 发布:美国认证协会知乎 编辑:程序博客网 时间:2024/05/17 06:14

首先安装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属性里面的东西

阅读全文
0 0
原创粉丝点击