vue中实现复制功能
这里使用到一个插件:clipboard.js,官网地址:http://www.clipboardjs.cn/1通过npm安装clipboard.js(如果要将插件添加到配置,则npm命令后面加上--save)npm install clipboard2在需要使用到复制功能的组件中引入:import ClipboardJS from 'clipboard';3...
·
这里使用到一个插件:clipboard.js,官网地址:http://www.clipboardjs.cn/
1 通过npm安装clipboard.js(如果要将插件添加到配置,则npm命令后面加上--save)
npm install clipboard
2 在需要使用到复制功能的组件中引入:
import ClipboardJS from 'clipboard';
3 HTML:需要被复制的目标元素,要加一个id;然后在复制按钮加一个data-clipboard-target指向目标元素;最后添加一个点击事件
<div id="content">
4325435643432536
</div>
<!-- 复制按钮,利用clipboard.js -->
<div class="copyTrackingNumber" data-clipboard-target="#content" @click="copyTrackingNumber">
</div>
4 JS:好像在on里面不能访问到this对象,如果碰到这种情况可以在外面定义一个变量:let that = this;在里边通过that调用即可
//拷贝快递单号
copyTrackingNumber(){
// 括号中的内容:对应复制按钮的class
let clipboard = new ClipboardJS('.copyTrackingNumber');
clipboard.on('success', function(e) {
console.log("复制成功");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.log("复制失败,请重试");
console.log(e)
});
}
更多推荐
已为社区贡献7条内容
所有评论(0)