Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
theme: cyanosis highlight: atom-one-light
主題樣式修改
曾經為了修改組件風格,一個項目用了上百個樣式穿透,後來才發現定製一個主題就夠了!
第一步,在官網的主題頁面,修改背景色、字體顏色及邊框顏色
第二步,下載主題
第三步,用下載的css文件替換掉默認的css文件
效果如下:
el-backtop 回到頂部組件
有時候頁面很長,我們需要一個回到頂部的按鈕,推薦大家使用 el-backtop
,自帶過渡效果。
代碼如下:
```js
``
注意:需要將 body 的 margin 設置為 0,不然會出現兩個滾動條。`
el-form-item label寬度自適應
通常我們是給 label
設置一個固定寬度,但這完全限制了 UI 的發揮,如何讓 label
寬度自適應呢?答案是給控件設置一個固定寬度。
代碼如下:
```js
```
el-form-item 循環校驗
有時候表單項是一個循環的列表,需要對每一項進行校驗。
代碼如下:
```js
```
el-form-item 表單嵌套表格校驗
如果在表單裏嵌套表格,那麼如何對錶格里面的控件進行校驗呢?
代碼如下:
```js
```
el-form-item 表單校驗 label只保留 *
有時候我們只需要表單校驗的 *
, 而不需要 lable 文字,像這樣:
代碼如下:
```js
```
el-select 下拉框樣式修改
使用樣式穿透修改下拉框樣式,你會發現打死都不生效,那是因為下拉框是默認掛載在 body 下面。解決辦法:設置 :popper-append-to-body="false"
代碼如下:
```js
```
el-input 打開彈框 自動聚焦
很多時候 form 表單是嵌套在 dialog 下面,為了提高用户體驗,需要在打開彈框後 input 框自動聚焦。
代碼如下:
```js
```
今天的分享就到到這裏,希望對你有所幫助!如果覺得有用,不要忘了點個贊呦~
聽説喜歡點讚的你,今年年終獎拿到手軟😍
「其他文章」
- Vite 性能篇:掌握這些優化策略,一起縱享絲滑!
- Vite 配置篇:日常開發掌握這些配置就夠了!
- Vite 入門篇:學會它,一起提升開發幸福感!
- 還有人沒嘗過 Pinia 嗎,請收下這份食用指南!
- 10個常見的使用場景,助你從 Vue2 絲滑過渡到 Vue3 !
- 前端手寫功能第二彈,提升內力,等待下一次爆發!
- 效率提升之 —— 如何優雅的帶走上份工作的VSCode配置
- Vue組件遞歸——組件化開發的必備技能!
- 10個常用的JS工具庫,80%的項目都在用!
- 如何嚴格判斷文件上傳類型?再不會你就out啦!
- Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
- 原來虛擬列表如此簡單!萬萬沒想到
- 10個常見的前端手寫功能,你全都會嗎?
- 一款強大到沒朋友的圖片編輯插件,愛了愛了!
- 如何實現拖拽上傳、上傳進度條,以及取消上傳?
- Vue 1分鐘實現右鍵菜單,懶人的福音!
- Vue 如何快速實現頭像裁剪?方法比你想象的簡單
- 前端持久化之瀏覽器存儲技術(localStorage、sessionStorage 、session、cookies)