vue-clipboard2实现点击复制

文档：
https://www.npmjs.com/package/vue-clipboard2

安装

npm install --save vue-clipboard2

  

 

  
1
 

使用

main.js

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

  

 

  
1
  
2
  
3
  
4
 

示例1

demo1.vue

<template>
  <div> <input type="text" v-model="message" /> <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError" >Copy!</button>
  </div>
</template>
 
<script>
export default {
  data() { return { message: "" };
  }, methods: { onCopy: function(e) { alert("You just copied: " + e.text); }, onError: function(e) { alert("Failed to copy texts"); }
  }
};
</script> 

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
 

示例2

demo2.vue

<template>
  <div> <input type="text" v-model="message" /> <button type="button" @click="doCopy">Copy!</button>
  </div>
</template>
 
<script>
export default {
  data: function() { return { message: "Copy These Text" };
  }, methods: { doCopy() { this.$copyText(this.message).then( res => { alert("Copied" + res.text); }, err => { alert("Can not copy"); } ); }
  }
};
</script> 

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

在线Demo: https://mouday.github.io/vue-element-admin-demo/

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/104620468