vue-clipboard2的使用

文章目录

• 1、vue-clipboard2介绍
• 2、vue-clipboard2安装
• 3、使用
• 3.1 第一种方法使用
• 3.2 第二种方法使用

1、vue-clipboard2介绍

vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明，
npm地址https://www.npmjs.com/package/vue-clipboard2
github地址https://github.com/Inndy/vue-clipboard2

2、vue-clipboard2安装

npm install --save vue-clipboard2

3、使用

• 使用前进行注册

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard);

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

• 事件参数e
  

3.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("复制失败!");
        }
      );
}