Vue-ElementUI组件改造

最新推荐文章于 2024-08-08 18:54:14 发布

Caeser110

最新推荐文章于 2024-08-08 18:54:14 发布

阅读量1.4k

点赞数 2

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/caeser110/article/details/106518170

版权

本文介绍了作者在使用Vue和ElementUI时，对el-input、el-table进行样式改造，以及自制移动端弹窗的实践经验。通过仿制组件，实现了自定义功能，如添加点击事件的输入框，并分享了改造的代码和思路。

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

在这里插入图片描述

前言

站在巨人的肩膀上，才能看得更远，我们可以借助别人的轮子让自己跑的更快，但是照搬照抄还是不可取的，先把别人的学会了再创造自己的，也是不错的思路。我在使用ElementUI的时候，发现这个组件很不错，一直在持续维护更新，而且组件很丰富，有着不错的口碑，我于是也开始使用，而且还加上了自己的风格。
我可以先来看看效果，ElementUI版本"element-ui": “^2.13.0”,
（1）对于input框的改造，如果有的时候原来的ElementUI自带的el-input框是很完美，但是却不够灵活，如何仿制一个呢？

图片描述
（2）修改el-input框样式图标

图片描述
（3）修改el-table表表头和行样式

图片描述

（4）自制移动端弹窗
图片描述

仿制el-input

<div style="display:inline-block;width:220px;height:38px;border:#DCDFE6 1px solid;vertical-align:top;border-radius:4px;margin-top:2px;padding:0 10px;overflow:hidden">
                <span style="color:#C0C4CC">封面</span>
                <span class="coverimgp" @click="showViewImageDialog()">{
  {addForm.url}