vue-clipboard2（剪切板)的使用

1、vue-clipboard2 介绍

vue-clipboard2 是前端能够调用 剪切板 的一个插件。

2、vue-clipboard2安装

npm install --save vue-clipboard2

3、使用

使用前，在main进行注册

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

1. 使用方法一

使用指令的方式进行绑定

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

2. 第二种使用方法

第二种方法使用this.$copyText()方法进行复制。

对应的源代码块

操作

<button @click="seccendCopy">第二种方式复制</button>

对应的事件方法

seccendCopy() {
      this.$copyText(this.value).then(
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制成功!");
        },
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制失败!");
        }
      );
}