基于 Vue 实现页面中文本的复制功能

1. 需求说明

在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助 vue-clipboard2 插件。

2. 代码实现

安装依赖：

npm i vue-clipboard2 --save
1

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

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

new Vue({
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8

在组件中有两种方法可以实现复制功能。
方法一：
使用 vue-clipboard2 提供的指令

<template>
  <div>
    <el-button
      type="success"
      size="small"
      style="margin-left: 10px"
      v-clipboard:copy="text"
      v-clipboard:success="onCopySuccess"
      v-clipboard:error="onCopyError"
      >复制</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是一段复制的文本",
    };
  },
  methods: {
    onCopySuccess(e) {
      // 复制成功的回调函数
      console.log('复制成功：', e);
    },
    onCopyError(e) {
      // 复制失败的回调函数
      console.log('复制失败：',e);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

方法二：
使用 vue-clipboard2 全局绑定的 $copyText 事件方法

<template>
  <div>
    <el-button
      type="success"
      size="small"
      style="margin-left: 10px"
      @click="onCopy"
      >复制</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是一段复制的文本",
    };
  },
  methods: {
    onCopy() {
      this.$copyText(this.pathText).then(
	      e=>{
	        console.log('复制成功：', e);
	      },
	      e=>{
	        console.log('复制失败：', e);
	      }
      )
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3. 效果演示