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

```

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

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