需求描述：点击复制可以把店铺链接复制到剪贴板上
解决方法：
使用clipboard 插件
安装
npm install clipboard --save
设置
在main.js 中引入， 当然我们也可以在用到的.vue中映入，因为不止在一个地方中用到了拷贝文字
import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard;
在需要拷贝文字的文件里面
<template>
<div class="qrCodeContainer">
<div class="linkContent">
<a>店铺链接：<span id="qrcode_url">{{qrcode_url}}</span></a>
<button id='copy' data-clipboard-target='#qrcode_url' @click="copyLink">复制</button>
</div>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
data() {
return {
qrcode_url: 'https://www.baidu.com/'
}
},
methods: {
copyLink() {
const _this = this;
const clipboard = new this.Clipboard('#copy');
clipboard.on('success', () => {
Toast({
message: '复制成功',
duration: 1000
});
})
clipboard.on('error', () => {
Toast({
message: '复制失败',
duration: 1000
});
})
console.log(clipboard)
}
}
}
</script>