前端vue项目实现复制剪切板

前端复制

前端vue项目复制到剪切板插件 vue-clipboard2

下载安装插件

npm install --save vue-clipboard2

在main.js中使用注册

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

第一种使用方法

使用指令的方式

<template>
<div>
    <div>
      <textarea name="复制内容" id cols="30" rows="10" v-model="value"></textarea>
      <button
        v-clipboard:copy="value"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >第一种方式复制</button>   
    </div>
    <div>
      <textarea name="粘贴内容" id cols="30" rows="10"></textarea>
    </div>
  </div>
</template>  

添加事件

<script>
export default {
  data() {
    return {
      value: "A simple vuejs 2 binding for clipboard.js!"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>

事件参数e

第二种使用方法

使用全局的方法

// 点击事件
share(val) {
 //调用$copyText方法
  this.$copyText(this.message).then(function (e) {
    alert('Copied')
  }, function (e) {
    alert('Can not copy')
  })
},
 
//数据处理
handleData(val){
  this.message = this.message + ' ' + val
}