Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~

語言: CN / TW / HK

theme: cyanosis highlight: atom-one-light


主題樣式修改

曾經為了修改組件風格,一個項目用了上百個樣式穿透,後來才發現定製一個主題就夠了!

第一步,在官網的主題頁面,修改背景色、字體顏色及邊框顏色

01.jpg

第二步,下載主題

1639302082(1).jpg

第三步,用下載的css文件替換掉默認的css文件

image.png

效果如下:

image.png

el-backtop 回到頂部組件

有時候頁面很長,我們需要一個回到頂部的按鈕,推薦大家使用 el-backtop,自帶過渡效果。

20211213_211233 00_00_00-00_00_30.gif

代碼如下:

```js

``注意:需要將 body 的 margin 設置為 0,不然會出現兩個滾動條。`

el-form-item label寬度自適應

通常我們是給 label 設置一個固定寬度,但這完全限制了 UI 的發揮,如何讓 label 寬度自適應呢?答案是給控件設置一個固定寬度。

image.png

代碼如下:

```js

```

el-form-item 循環校驗

有時候表單項是一個循環的列表,需要對每一項進行校驗。

1639314939(1).jpg

代碼如下:

```js

```

el-form-item 表單嵌套表格校驗

如果在表單裏嵌套表格,那麼如何對錶格里面的控件進行校驗呢?

1639315824(1).jpg

代碼如下:

```js

```

el-form-item 表單校驗 label只保留 *

有時候我們只需要表單校驗的 *, 而不需要 lable 文字,像這樣:

1639312147(1).jpg

代碼如下:

```js

```

el-select 下拉框樣式修改

使用樣式穿透修改下拉框樣式,你會發現打死都不生效,那是因為下拉框是默認掛載在 body 下面。解決辦法:設置 :popper-append-to-body="false"

image.png

代碼如下:

```js

```

el-input 打開彈框 自動聚焦

很多時候 form 表單是嵌套在 dialog 下面,為了提高用户體驗,需要在打開彈框後 input 框自動聚焦。

20211213_205355 00_00_00-00_00_30.gif

代碼如下:

```js

```

今天的分享就到到這裏,希望對你有所幫助!如果覺得有用,不要忘了點個贊呦~

聽説喜歡點讚的你,今年年終獎拿到手軟😍