前言
在日常开发中,有时可能想实现一键复制,我们可以选择手写复制方法,也可以选择引入 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>
效果
样式可以根据自己的需求修改,可以更换图标
文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一回复
文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长