需求描述：點擊復制可以把店鋪鏈接復制到剪貼板上
解決方法：
使用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>