在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 {
}
},
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>