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 <template>
 2     <div class="app-container">
 3       <el-tabs>
 4        <el-tab-pane label="直接使用剪切板">
 5          <div class="el-tab-pane" >
 6            <el-input   v-model="inputData"    style='width:400px;'></el-input>
 7            <el-button    @click="handleCopy(inputData,$event)">复制</el-button>
 8          </div>
 9        </el-tab-pane>
10       </el-tabs>
11     </div>
12 </template>
13 <script>
14   import clip from '@/utils/clipboard'
15   export default {
16         name: "index",
17         data(){
18           return {
19             inputData:""
20           }
21         },
22       methods:{
23         handleCopy(text, event) {
24           clip(text, event)
25           console.log('clicp')
26         }
27       }
28     }
29 </script>
30 
31 <style scoped>
32 
33 </style>
34 
35 
36 
37 <el-tab-pane label="使用封装的剪切指令v-directive">
38   <div class="el-tab-pane" >
39     <el-input     style='width:400px;'></el-input>
40     <el-button>复制</el-button>
41   </div>
42 </el-tab-pane>

方式二：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 <template>
 3     <div class="app-container">
 4       <el-tabs>
 5        <el-tab-pane label="直接使用剪切板">
 6          <div class="el-tab-pane" >
 7            <el-input   v-model="inputData"    style='width:400px;'></el-input>
 8            <el-button    @click="handleCopy(inputData,$event)">复制</el-button>
 9          </div>
10        </el-tab-pane>
11         <el-tab-pane label="使用封装的剪切指令v-directive">
12           <div class="el-tab-pane" >
13             <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
14             <el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
15           </div>
16         </el-tab-pane>
17       </el-tabs>
18     </div>
19 </template>
20 <script>
21   import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
22 
23   export default {
24         name: "index",
25         data(){
26           return {
27             inputData:""
28           }
29         },
30     directives: {
31       clipboard
32     },
33       methods:{
34         clipboardSuccess() {
35           this.$message({
36             message: 'Copy successfully',
37             type: 'success',
38             duration: 1500
39           })
40         }
41       }
42     }
43 </script>
44 
45 <style scoped>
46 
47 </style>

 

posted @ 2018-08-02 10:20  前端极客  阅读(22115)  评论(1)  编辑  收藏  举报