方式一:
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='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='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='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='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>