Vue|Vue实现复制粘贴功能 Vue|Vue

目录
一、需求说明
二、代码实现
1、安装 vue-clipboard2 依赖
2、在 main.js 文件中全局引入插件
3、案例
【Vue|Vue实现复制粘贴功能】三、项目所用：
实现选中并且复制成功后带有提示信息的效果：
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，
在 Vue 项目中实现复制功能需要借助 vue-clipboard2 插件。
二、代码实现 1、安装 vue-clipboard2 依赖
（出现错误的话，可以试试切换成淘宝镜像源
npm config set registry https://registry.npm.taobao.org ）

npm install --save vue-clipboard2

"vue-clipboard2": "^0.3.3",

文章图片

2、在 main.js 文件中全局引入插件
示例代码如下：

import Vue from 'vue' import VueClipBoard from 'vue-clipboard2'Vue.use(VueClipBoard)new Vue({ render: h => h(App) }).$mount('#app')

3、案例
在组件中有两种方法可以实现复制功能。
方法一：
使用 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 }

三、项目所用：实现选中并且复制成功后带有提示信息的效果：