点击复制到剪贴板的方法( clipboard )
Posted guanpingping
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击复制到剪贴板的方法( clipboard )相关的知识，希望对你有一定的参考价值。
需求描述：点击复制可以把店铺链接复制到剪贴板上
解决方法：
使用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>
以上是关于点击复制到剪贴板的方法( clipboard )的主要内容，如果未能解决你的问题，请参考以下文章
JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法