Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~

主题样式修改

曾经为了修改组件风格,一个项目用了上百个样式穿透,后来才发现定制一个主题就够了!

第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第1张图片

第二步,下载主题

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第2张图片

第三步,用下载的css文件替换掉默认的css文件

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第3张图片

效果如下:

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第4张图片

el-backtop 回到顶部组件

有时候页面很长,我们需要一个回到顶部的按钮,推荐大家使用 el-backtop,自带过渡效果。

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第5张图片

代码如下:



注意:需要将 body 的 margin 设置为 0,不然会出现两个滚动条。

el-form-item label宽度自适应

通常我们是给 label 设置一个固定宽度,但这完全限制了 UI 的发挥,如何让 label 宽度自适应呢?答案是给控件设置一个固定宽度。

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第6张图片

代码如下:


el-form-item 循环校验

有时候表单项是一个循环的列表,需要对每一项进行校验。

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第7张图片

代码如下:



el-form-item 表单嵌套表格校验

如果在表单里嵌套表格,那么如何对表格里面的控件进行校验呢?

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第8张图片

代码如下:





el-form-item 表单校验 label只保留 *

有时候我们只需要表单校验的 *, 而不需要 lable 文字,像这样:

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第9张图片

代码如下:


el-select 下拉框样式修改

使用样式穿透修改下拉框样式,你会发现打死都不生效,那是因为下拉框是默认挂载在 body 下面。解决办法:设置 :popper-append-to-body="false"

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第10张图片

代码如下:




el-input 打开弹框 自动聚焦

很多时候 form 表单是嵌套在 dialog 下面,为了提高用户体验,需要在打开弹框后 input 框自动聚焦。

Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~_第11张图片

代码如下:



今天的分享就到到这里,希望对你有所帮助!如果觉得有用,不要忘了点个赞呦~

听说喜欢点赞的你,今年年终奖拿到手软

你可能感兴趣的:(Element-UI 奇淫技巧第二弹!提升开发效率,延长摸鱼时间~)