1. 功能
在页面中实现点击复制内容到粘贴板的功能
2. 安装clipboard
npm install clipboard
3. 封装工具类
新建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.destroy() }) clipboard.on('error', () => { clipboardError() clipboard.destroy() }) clipboard.onClick(event) }
4. 页面使用
<div @click="handleCopy(todayToken,$event)"> {{todayToken}} </div> <script> import clip from '@/utils/clipboard' handleCopy(text, event) { clip(text, event) }, </script>