发布时间:2023-07-18 11:00
目录
一、需求说明
二、代码实现
1、安装 vue-clipboard2 依赖
2、在 main.js 文件中全局引入插件
3、案例
三、项目所用 :
实现选中并且复制成功后带有提示信息的效果 :
在项目中 点击按钮 复制 某行文本是很常见的 应用场景,
在 Vue 项目中实现 复制功能 需要借助 vue-clipboard2
插件。
( 出现错误的话,可以试试切换成淘宝镜像源
npm config set registry https://registry.npm.taobao.org )
npm install --save vue-clipboard2
\"vue-clipboard2\": \"^0.3.3\",
main.js
文件中全局引入插件示例代码如下:
import Vue from \'vue\'
import VueClipBoard from \'vue-clipboard2\'
Vue.use(VueClipBoard)
new Vue({
render: h => h(App)
}).$mount(\'#app\')
在组件中有两种方法可以实现复制功能。
方法一 :
使用 vue-clipboard2
提供的 指令
直接将变量内容复制至剪切板,暂时没有找到处理数据后再复制的方式
复制时,通过 v-clipboard: copy 复制输入的内容 :
// 复制成功 or 失败(提示信息!!!)
onCopy: function (e) {
console.log(\'复制成功!\', e)
},
onError: function (e) {
console.log(\'复制失败!\', e)
}
方法二:
使用 vue-clipboard2
全局绑定的 $copyText
事件方法
复制动作使用的是 Vue 响应函数方式,这就为复制前控制数据提供了可能!
// 点击事件
share(val) {
this.handleData(val)
this.$copyText(this.message).then(function (e) {
alert(\'Copied\')
}, function (e) {
alert(\'Can not copy\')
})
},
// 数据处理
handleData(val){
this.message = this.message + \' \' + val
}
复制
反馈地址
复制链接
【云原生之Docker实战】使用Docker部署反向代理 Nginx Proxy Manager
【论文阅读】Deep Neural Networks for Learning Graph Representations | day14,15
Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin
tensorflow利用for循环进行训练遇到的内存爆炸问题(OOM)
java数据结构红黑树上旋下旋_存储系统的基本数据结构之一: 跳表 (SkipList)
【半监督分类】基于K-means和Label+Propagation的半监督网页分类
vscode import别名(如@)文件无法ctrl+左键跳转
ArrayList源码深度剖析,从最基本的扩容原理,到魔幻的迭代器和fast-fail机制,你想要的这都有!!!