基于clipboard.js对复制组件的封装

前言

在日常开发中，有时可能想实现一键复制，我们可以选择手写复制方法，也可以选择引入 clipboard.js 库帮助快速实现功能

本次封装组件使用  element-ui 的部分组件，有 icon 、message 等

安装clipboard

npm install clipboard --save

子组件

<!--
 * @description: 封装点击复制的组件
 * @since: v1.0
!-->

<template>
    <i :class="`${icon} icon-cursor`"
       title="点击复制"
       @click="handleCopy($event, text)" />
</template>

<script>
// 引入 clipboard.js
import Clipboard from 'clipboard';
export default {
    props: {
        // 接收复制的内容
        text: {
            type: [String, Number],
            default: null,
        },
        // 默认是复制 icon,可自定义 icon
        icon: {
            type: [String],
            default: 'el-icon-copy-document',
        },
        // 自定义成功提示
        message: {
            type: [String, Number],
            default: null,
        },
    },
    methods: {
        handleCopy (e, _text, message) {
            const clipboard = new Clipboard(e.target, { text: () => _text });
            // const messageText = message || `复制成功：${_text}`;
            const messageText = message || '复制成功';
            // 复制成功
            clipboard.on('success', () => {
                this.$message({ 
                    type: 'success', 
                    message: messageText 
                 });
                clipboard.off('error');
                clipboard.off('success');
                clipboard.destroy();
            });
            // 复制失败
            clipboard.on('error', () => {
                this.$message({
                     type: 'warning',
                      message: '复制失败，请手动复制' 
                });
                clipboard.off('error');
                clipboard.off('success');
                clipboard.destroy();
            });
            clipboard.onClick(e);
        },
    },
};
</script>

<style lang="scss" scoped>
.icon-cursor {
    cursor: pointer;
}
</style>

父组件

<template>
<div>
    <span>{
   { value }}</span>
    <CopyIcon :text="value" />
</div>
</template>

<script>
import CopyIcon from '@/components/CopyIcon.vue'
export default {
    components: {
        CopyIcon,
    },
    data () {
      return {
          value: '这里测试一下复制组件',
      };
    },
};
</script>

效果

样式可以根据自己的需求修改，可以更换图标

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长