Clipboard 复制粘贴的使用
首先 npm install clipboard 安装依赖;
clipboard.js
1 import Vue from 'vue' 2 import Clipboard from 'clipboard' 3 4 function clipboardSuccess() { 5 Vue.prototype.$message({ 6 message: '复制成功,ctrl+v进行粘贴', 7 type: 'success' 8 }) 9 } 10 11 function clipboardError() { 12 Vue.prototype.$message({ 13 message: '复制失败', 14 type: 'error' 15 }) 16 } 17 18 export default function handleClipboard(text, event) { 19 const clipboard = new Clipboard(event.target, { 20 text: () => text 21 }) 22 clipboard.on('success', () => { 23 clipboardSuccess() 24 clipboard.destroy() 25 }) 26 clipboard.on('error', () => { 27 clipboardError() 28 clipboard.destroy() 29 }) 30 clipboard.onClick(event) 31 }
demo.vue
复制后直接粘贴即可。
import clipboard from "@/utils/clipboard"; <template> <div @click="e => clipboard('复制的文字', e)">复制</div> </template>

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了