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

方式一：

1.安装clipboard:npm install clipboard

2.src/utils/clipboard.js

 import Vue from 'vue'
 import Clipboard from 'clipboard'

 function clipboardSuccess() {
   console.log('success')
   Vue.prototype.$message({
     message: 'Copy successfully',
     type: 'success',
     duration: 1500
   })
 }

 function clipboardError() {
   console.log('error')
   Vue.prototype.$message({
     message: 'Copy failed',
     type: 'error'
   })
 }

 export default function handleClipboard(text, event) {
   const clipboard = new Clipboard(event.target, {
     text: () => text
   })
   clipboard.on('success', () => {
     clipboardSuccess()
     clipboard.off('error')
     clipboard.off('success')
     clipboard.destroy()
   })
   clipboard.on('error', () => {
     clipboardError()
     clipboard.off('error')
     clipboard.off('success')
     clipboard.destroy()
   })
   clipboard.onClick(event)
 }

3.vue代码

 <template>
     <div class="app-container">
       <el-tabs>
        <el-tab-pane label="直接使用剪切板">
          <div class="el-tab-pane" >
            <el-input   v-model="inputData"    style='width:400px;'></el-input>
            <el-button    @click="handleCopy(inputData,$event)">复制</el-button>
          </div>
        </el-tab-pane>
       </el-tabs>
     </div>
 </template>
 <script>
   import clip from '@/utils/clipboard'
   export default {
         name: "index",
         data(){
           return {
             inputData:""
           }
         },
       methods:{
         handleCopy(text, event) {
           clip(text, event)
           console.log('clicp')
         }
       }
     }
 </script>

 <style scoped>

 </style>

 <el-tab-pane label="使用封装的剪切指令v-directive">
   <div class="el-tab-pane" >
     <el-input     style='width:400px;'></el-input>
     <el-button>复制</el-button>
   </div>
 </el-tab-pane>

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

src/directive/clipboard/index.js

npm install clipboard --save

 //index.js
 import Clipboard from './clipbloard'

 const install = function(Vue) {
   Vue.directive('Clipboard', Clipboard)
 }

 if (window.Vue) {
   window.clipboard = Clipboard
   Vue.use(install); // eslint-disable-line
 }

 Clipboard.install = install
 export default Clipboard

 //clipboard.js
 // Inspired by https://github.com/Inndy/vue-clipboard2
 const Clipboard = require('clipboard')
 if (!Clipboard) {
   throw new Error('you shold npm install `clipboard` --save at first ')
 }

 export default {
   bind(el, binding) {
     if (binding.arg === 'success') {
       el._v_clipboard_success = binding.value
     } else if (binding.arg === 'error') {
       el._v_clipboard_error = binding.value
     } else {
       const clipboard = new Clipboard(el, {
         text() { return binding.value },
         action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
       })
       clipboard.on('success', e => {
         const callback = el._v_clipboard_success
         callback && callback(e) // eslint-disable-line
       })
       clipboard.on('error', e => {
         const callback = el._v_clipboard_error
         callback && callback(e) // eslint-disable-line
       })
       el._v_clipboard = clipboard
     }
   },
   update(el, binding) {
     if (binding.arg === 'success') {
       el._v_clipboard_success = binding.value
     } else if (binding.arg === 'error') {
       el._v_clipboard_error = binding.value
     } else {
       el._v_clipboard.text = function() { return binding.value }
       el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
     }
   },
   unbind(el, binding) {
     if (binding.arg === 'success') {
       delete el._v_clipboard_success
     } else if (binding.arg === 'error') {
       delete el._v_clipboard_error
     } else {
       el._v_clipboard.destroy()
       delete el._v_clipboard
     }
   }
 }

 view/clipboard/index.vue
 <template>
     <div class="app-container">
       <el-tabs>
        <el-tab-pane label="直接使用剪切板">
          <div class="el-tab-pane" >
            <el-input   v-model="inputData"    style='width:400px;'></el-input>
            <el-button    @click="handleCopy(inputData,$event)">复制</el-button>
          </div>
        </el-tab-pane>
         <el-tab-pane label="使用封装的剪切指令v-directive">
           <div class="el-tab-pane" >
             <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
             <el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
           </div>
         </el-tab-pane>
       </el-tabs>
     </div>
 </template>
 <script>
   import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive

   export default {
         name: "index",
         data(){
           return {
             inputData:""
           }
         },
     directives: {
       clipboard
     },
       methods:{
         clipboardSuccess() {
           this.$message({
             message: 'Copy successfully',
             type: 'success',
             duration: 1500
           })
         }
       }
     }
 </script>

 <style scoped>

 </style>