Vue实现复制粘贴功能

目录

一、需求说明

二、代码实现

1、安装 vue-clipboard2 依赖

2、在 main.js 文件中全局引入插件

3、案例

三、项目所用 ：

实现选中并且复制成功后带有提示信息的效果 ：

---

一、需求说明

在项目中 点击按钮 复制 某行文本是很常见的 应用场景，

在 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
}

---

三、项目所用 ：

实现选中并且复制成功后带有提示信息的效果 ：