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) }
-
使用