vue实现复制粘贴的两种形式

方式一：

1.安装clipboard:npm install clipboard

2.src/utils/clipboard.js

 1 import Vue from 'vue'
 2 import Clipboard from 'clipboard'
 3 
 4 function clipboardSuccess() {
 5   console.log('success')
 6   Vue.prototype.$message({
 7     message: 'Copy successfully',
 8     type: 'success',
 9     duration: 1500
10   })
11 }
12 
13 function clipboardError() {
14   console.log('error')
15   Vue.prototype.$message({
16     message: 'Copy failed',
17     type: 'error'
18   })
19 }
20 
21 export default function handleClipboard(text, event) {
22   const clipboard = new Clipboard(event.target, {
23     text: () => text
24   })
25   clipboard.on('success', () => {
26     clipboardSuccess()
27     clipboard.off('error')
28     clipboard.off('success')
29     clipboard.destroy()
30   })
31   clipboard.on('error', () => {
32     clipboardError()
33     clipboard.off('error')
34     clipboard.off('success')
35     clipboard.destroy()
36   })
37   clipboard.onClick(event)
38 }

3.vue代码

 1 
13 
30 
31 
34 
35 
36 
37 
38   

39     
40     复制
41   
42 

方式二：src/directive/clipboard/clipboard.js

               src/directive/clipboard/index.js

              npm install clipboard --save

          

 1 //index.js
 2 import Clipboard from './clipbloard'
 3 
 4 const install = function(Vue) {
 5   Vue.directive('Clipboard', Clipboard)
 6 }
 7 
 8 if (window.Vue) {
 9   window.clipboard = Clipboard
10   Vue.use(install); // eslint-disable-line
11 }
12 
13 Clipboard.install = install
14 export default Clipboard

 1 //clipboard.js
 2 // Inspired by https://github.com/Inndy/vue-clipboard2
 3 const Clipboard = require('clipboard')
 4 if (!Clipboard) {
 5   throw new Error('you shold npm install `clipboard` --save at first ')
 6 }
 7 
 8 export default {
 9   bind(el, binding) {
10     if (binding.arg === 'success') {
11       el._v_clipboard_success = binding.value
12     } else if (binding.arg === 'error') {
13       el._v_clipboard_error = binding.value
14     } else {
15       const clipboard = new Clipboard(el, {
16         text() { return binding.value },
17         action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
18       })
19       clipboard.on('success', e => {
20         const callback = el._v_clipboard_success
21         callback && callback(e) // eslint-disable-line
22       })
23       clipboard.on('error', e => {
24         const callback = el._v_clipboard_error
25         callback && callback(e) // eslint-disable-line
26       })
27       el._v_clipboard = clipboard
28     }
29   },
30   update(el, binding) {
31     if (binding.arg === 'success') {
32       el._v_clipboard_success = binding.value
33     } else if (binding.arg === 'error') {
34       el._v_clipboard_error = binding.value
35     } else {
36       el._v_clipboard.text = function() { return binding.value }
37       el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
38     }
39   },
40   unbind(el, binding) {
41     if (binding.arg === 'success') {
42       delete el._v_clipboard_success
43     } else if (binding.arg === 'error') {
44       delete el._v_clipboard_error
45     } else {
46       el._v_clipboard.destroy()
47       delete el._v_clipboard
48     }
49   }
50 }

 1 view/clipboard/index.vue
 2 
20 
44 
45