vue中实现复制内容到剪切板

一、需求说明

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

二、代码实现

1、安装 vue-clipboard2 依赖

（ 不行的话可以切换成淘宝镜像源 npm config set registry https://registry.npm.taobao.org ）

npm install --save vue-clipboard2

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

示例代码如下：

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

3、在 vue 文件中使用

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