这里使用到一个插件: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)
  });
}

 

Logo

前往低代码交流专区

更多推荐