vue 二次封装elementUI el-button

最新推荐文章于 2024-09-06 13:13:56 发布

supporint

最新推荐文章于 2024-09-06 13:13:56 发布

阅读量2.2k

点赞数

分类专栏：开发前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Supporint/article/details/122477382

版权

本文介绍如何在Vue项目中二次封装ElementUI的el-button组件，以实现点击按钮即可复制内容的功能。通过创建新的组件模板，避免了重复代码，提升了代码复用性。在新组件中利用v-clipboard属性和自定义方法处理复制操作，同时保留了el-button原有的属性兼容性。

摘要由CSDN通过智能技术生成

比如原来的el-button是这么写的：

//t是一个字符串
<el-button style="width: 150px;" size="small" >{
  {t.length <= 14 ? t : t.slice(0,14)+ '...'}}</copy-button>

那我门要实现点击即复制这个t，当然可以直接通过在el-button中加入属性v-clipboard组合来实现，但是在项目中有很多地方都需要做此修改，因为我们不可能在每个使用到此功能的vue文件中来做这种操作，无疑增加了重复代码量，因此我们来二次封装。

首先我们要新建一个vue文件，来新做一个template，方便以后直接复用。

关注

专栏目录