vue中使用 vue-clipboard2实现复制粘贴功能

首先安装第三方库vue-clipboard2

npm install --save vue-clipboard2

在main.js进行全局引入注册

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

在单个页面使用

// 此时复制的内容是拼接的变量 'row.domain+' / '+row.hash'
  <el-button size="mini" v-clipboard:copy="row.domain+' / '+row.hash" 
  v-clipboard:success="onCopy"
  v-clipboard:error="onError">复制</el-button>
 

// 在methods里面书写复制成功和失败的方法
    onCopy(e) {
      this.$message.success("复制成功");
    },
    onError() {
      this.$message.error("复制失败");
    }
 

此时在vue中就可以复制文本了

特殊情况下使用

1.当不方便在标签绑定自定义属性时，可以直接调用 this.$copyText方法，传入复制内容即可！

 	<button type="button" @click="doCopy">Copy!</button>


 	doCopy() {
        this.$copyText("123456").then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }