vue-cli搭建的项目使用clipboard.js实现点击复制div中内容到剪贴板

html:

<template>
	<div class="content">{{ userCode }}</div>
	<button class="copy_btn"  :data-clipboard-text="userCode " @click="copyCode()">复制</button>
</template>

clipboard.js放在static下并引入，在需要的单个页面中引入

import Clipboard from 'clipboard';

方法：

copyCode() {
      const clipboard = new ClipboardJS('.copy_btn');
      clipboard.on('success', function(e) {
        e.clearSelection();
       alert('复制成功')
      });
      //失败回调
      clipboard.on('error', function(e) {
        alert('复制失败,请手动复制');
      });
 }

失败手动复制需要将内容的div样式设置为可选中：

.content{
	-webkit-user-select: text;
	user-select: text;
}