• 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='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>
  • 相关阅读:
    每天读一遍,坚持30天,和老外交流没问题!
    网络数据原来是这么传输的(结合动画解析)
    技术创新驱动发展 思岚科技入选“科技独角兽百人团”
    获取当前数据库所有表的外键创建脚本、获取指定表的创建脚本,包括表和字段的属性、外键
    009深入理解CPU位数和操作系统位数,总线等等关系
    008_32位系统和64位系统有什么区别?
    007_计算机总线
    006_查看window实际支持的最大内存
    005_为何64位下一个指针大小为8个字节和32/64位系统的关系
    Kotlin 委托(2)变量委托是什么、自定义变量委托
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9405556.html
Copyright © 2020-2023  润新知