element UI使用小技巧(持續更新中)

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”