clipboard复制粘贴封装

使用场景

项目中有点击复制文本的功能

涉及的主要技术

使用

cnpm install clipboard --save or yarn add clipboard --save

组件里单独引入

<!-- Target -->
<input id="foo" v-model="name" />
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo" @click="copy">Copy to clipboard</button>
<script>
import ClipboardJS from 'clipboard';
export default {
    data() {
        return {
            name: '',
        };
    },
    methods: {
        copy() {
            let clipboard = new ClipboardJS('.btn');
            clipboard.on('success', function (e) {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        },
    }
} 
</script>
  • 弊端
    1. 每一个组件使用的时候,都要重复创建 Clipboard实例,绑定id,过程繁琐,多个组件会产生冗余代码,不好管理。
    2. 想要用户体验好些,需要加上响应,代码更多,需统一,项目中我使用的是elementUI

更高级的使用

方式1:封装成独立的工具库

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

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

function clipboardError() {
  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.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

使用:

<!-- Target -->
<input v-model="name" />
<!-- Trigger -->
<button class="btn" @click="handleClipboard(name, $event)">Copy to clipboard</button>
import clip from '@/utils/clipboard';
export default {
    data() {
        return {
            name: ''
        };
    },
    methods: {
        handleClipboard(text, event) {
            clip(text, event);
        }
    }
};
</script>

方式2:全局自定义指令

  • 文件结构
    在这里插入图片描述

    • directive/index.js
      /**
       * 自定义指令集中管理
       */
      import Clipboard from './clipboard' // 复制粘贴
      import Vue from 'vue';
      
      Vue.directive('Clipboard', Clipboard);
      
    • directive/clipboard
// Inspired by https://github.com/Inndy/vue-clipboard2
// import Vue from 'vue';
const Clipboard = require('clipboard')
if (!Clipboard) {
  throw new Error('you should npm install `clipboard` --save at first ')
}
// 默认复制成功提示 UI库为element
// const clipboardSuccess = () => {
//   Vue.prototype.$message({
//     message: 'Copy successfully',
//     type: 'success',
//     duration: 500,
//   })
// }
// 默认复制失败提示  UI库为element
// const clipboardError = () => {
//   Vue.prototype.$message({
//     message: 'Copy failed',
//     type: 'error',
//     duration: 500,
//   })
// }

export default {
  bind: function (el, binding, vnode) {
    if (binding.arg === 'success') {
      el._vClipboard_success = binding.value
    } else if (binding.arg === 'error') {
      el._vClipboard_error = binding.value
    } else {
      let clipboard = new Clipboard(el, {
        text: function () { return binding.value },
        action: function () { return binding.arg === 'cut' ? 'cut' : 'copy' },
      })
      clipboard.on('success', function (e) {
        // let callback = el._vClipboard_success || clipboardSuccess();
        let callback = el._vClipboard_success;

        callback && callback(e)
      })
      clipboard.on('error', function (e) {
        // let callback = el._vClipboard_error || clipboardError();
        let callback = el._vClipboard_error;
        callback && callback(e)
      })
      el._vClipboard = clipboard
    }
  },
  update: function (el, binding) {
    if (binding.arg === 'success') {
      el._vClipboard_success = binding.value
    } else if (binding.arg === 'error') {
      el._vClipboard_error = binding.value
    } else {
      el._vClipboard.text = function () { return binding.value }
      el._vClipboard.action = function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
    }
  },
  unbind: function (el, binding) {
    if (binding.arg === 'success') {
      delete el._vClipboard_success
    } else if (binding.arg === 'error') {
      delete el._vClipboard_error
    } else {
      el._vClipboard.destroy()
      delete el._vClipboard
    }
  },
}
  • 使用
<button type="button" v-clipboard:copy="text" v-clipboard:success="clipboardSuccess">
    Copy!
</button>

// 可选,可设置统一默认值

clipboardSuccess() {
    this.$message({
        message: '复制成功',
        type: 'success',
        duration: 500
    });
}

在这里插入图片描述

完整代码下载:Clipboard

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值