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> 

 
 

 

 

 
posted @   蛙仔  阅读(622)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示