--- theme: cyanosis highlight: atom-one-light --- ### 主题样式修改曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！ #### 第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色 ![01.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5389bfb8437f4671a1abcde50e5deccf~tplv-k3u1fbpfcp-watermark.image?) #### 第二步，下载主题 ![1639302082(1).jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f83bcb6472c644499dca3c17baa8d57a~tplv-k3u1fbpfcp-watermark.image?) #### 第三步，用下载的css文件替换掉默认的css文件 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7342d4f166f5486cabaed5ce16a45502~tplv-k3u1fbpfcp-watermark.image?) #### 效果如下： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f37ae06ca1f461088fff172422103f2~tplv-k3u1fbpfcp-watermark.image?) ### el-backtop 回到顶部组件有时候页面很长，我们需要一个回到顶部的按钮，推荐大家使用 `el-backtop`，自带过渡效果。 ![20211213_211233 00_00_00-00_00_30.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12e604091c60439c8034fa6cb2dde77f~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` `注意：需要将 body 的 margin 设置为 0，不然会出现两个滚动条。` ### el-form-item label宽度自适应通常我们是给 `label` 设置一个固定宽度，但这完全限制了 UI 的发挥，如何让 `label` 宽度自适应呢？答案是给控件设置一个固定宽度。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa1f4571719548e9b730f548ec1af57a~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` ### el-form-item 循环校验有时候表单项是一个循环的列表，需要对每一项进行校验。 ![1639314939(1).jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09f36b9bde724160bf849cc7747c893e~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` ### el-form-item 表单嵌套表格校验如果在表单里嵌套表格，那么如何对表格里面的控件进行校验呢？ ![1639315824(1).jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f61fb571bba4da18f14bec455d10162~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` ### el-form-item 表单校验 label只保留 * 有时候我们只需要表单校验的 `*`，而不需要 lable 文字，像这样： ![1639312147(1).jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae92a837ac804673a130dd41358653cf~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` ### el-select 下拉框样式修改使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 `:popper-append-to-body="false"` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74f10805b5824ca2819709e561451281~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` ### el-input 打开弹框自动聚焦很多时候 form 表单是嵌套在 dialog 下面，为了提高用户体验，需要在打开弹框后 input 框自动聚焦。 ![20211213_205355 00_00_00-00_00_30.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a32cde61fe7a4e61bae715783be56c13~tplv-k3u1fbpfcp-watermark.image?) #### 代码如下： ```js ``` 今天的分享就到到这里，希望对你有所帮助！如果觉得有用，不要忘了点个赞呦~ 听说喜欢点赞的你，今年年终奖拿到手软😍