element UI使用小技巧(持續更新中)
1. 回到頂部組件的使用
在頁面較長的時候,爲了優化用戶體驗,我們往往需要添加回到頂部功能方便用戶操作。具體的使用方法如下:
<el-backtop target=".el-main" :visibility-height='150' :right="50" :bottom="50"></el-backtop>
- 將組件放置到 App.vue 組件下,對應的觸發滾動的對象 target 是 .el-main
- 我們本質上需要滾動的就是內容區域,對於頂部與側邊導航欄都是固定的。
2. 組件中帶有回調參數的事件綁定函數傳入自定義參數
- 使用場景:在頁面使用多個相同的組件
- 使用目的:多個組件綁定同一個回調函數,避免多個函數功能雷同。
html代碼
<div class="discount-list">
<div class="title">開始日期</div>
<el-date-picker size="small" value-format="yyyy-MM-dd" @change="date=>chooseDate(date,'start')"
v-model="discontInfo.startTime" type="date" placeholder="開始日期"></el-date-picker>
</div>
<div class="discount-list">
<div class="title">結束日期</div>
<el-date-picker size="small" value-format="yyyy-MM-dd" @change="date=>chooseDate(date,'end')"
v-model="discontInfo.endTime" type="date" placeholder="結束日期"></el-date-picker>
</div>
js代碼
chooseDate(date, str) {
console.log(date, str);
switch (str) {
case "start":
this.discontInfo.startTime = date;
break;
case "end":
this.discontInfo.endTime = date;
break;
}
console.log(this.discontInfo)
}
注意:在 datepicker 組件的 change 事件,回調參數是選擇的日期,我們使用自定義的第二個參數來區分是哪一個組件,並對返回的參數,按照我們的需求進行賦值處理。
@change="date=>chooseDate(date,'end')"
需要特別注意的是,我們需要採用箭頭函數來綁定,並且自定的參數作爲第一個參數,第一個參數是默認的毀掉參數。
3. input自動聚焦問題
-
使用場景:在使用elementUI的時候,彈出的Dialog 對話框組件中放入form表單,我們通常需要自動聚焦到第一個輸入框,提示用戶輸入相關信息。
-
思路分析: 在elementUI中這個組件,對form表單中第一個輸入框,設置autofocus屬性,會出現只有在第一顯示對話框的時候纔會自動聚焦,以後不會自動聚焦,不符合需求。怎麼解決這個問題呢?
-
具體的方案如下:
- 在對應的第一個input標籤中,設置ref屬性;
<el-input ref="settingFocus" class="list-input" v-model="relationForm.description"/>
- 在對應的改變對話框顯隱狀態的函數中,添加以下代碼即可;
// 輸入框自動聚焦問題 this.$nextTick(() => { this.$refs["settingFocus"].focus(); });
4. input輸入框enter鍵搜索功能
<el-input clearable size="small" class="search-input" placeholder="請輸入關鍵字" v-model="input4" @keyup.enter.native="searchData">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
分析:element UI中input組件是二次封裝的組件,使用鍵盤修飾符的時候,需要使用 .native 後綴,例如 enter 事件,@keyup.enter.native=“searchData”