vue实现点击复制文本功能--Clipboard.js

vue实现点击复制指定区域的文字，推荐使用Clipboard.js，Clipboard.js是一个轻量级的插件，它不依懒于Flash和多余的框架。

• 安装clipboard.js
  npm install clipboard --save

• 引入clipboard.js，封装点击复制的方法
  

• 封装函数代码
  import Vue from 'vue' import Clipboard from 'clipboard' function clipboardSuccess() { Vue.prototype.$message({ message: '复制成功', type: 'success', duration: 1500 }) } function clipboardError() { Vue.prototype.$message({ message: '复制失败', type: 'error' }) } export default function handleClipboard(text, event) { const clipboard = new Clipboard(event.target, { text: () => text }) clipboard.on('success', () => { clipboardSuccess() clipboard.off('error') clipboard.off('success') clipboard.destroy() }) clipboard.on('error', () => { clipboardError() clipboard.off('error') clipboard.off('success') clipboard.destroy() }) clipboard.onClick(event) }

• 使用