在開發網站或應用程序時，提高用戶體驗是至關重要的。其中一個需要考慮的方面是：如何讓用戶更快速、更容易地完成任務。對於一個數據輸入或選擇界面，例如表單，el-select 是常用的選擇組件之一。在本文中，我們將分享如何讓 el-select 自動選中所需選項，以提高用戶的選擇體驗。
一、清晰明確地展示可選項
在數據容易理解和選項不多的情況下，靜態字元串和固定選項是很適合的。例如，固定的國家列表可以方便地在el-select中展示：
<el-select v-model="country">
<el-option label="中國" value="china"></el-option>
<el-option label="美國" value="usa"></el-option>
<el-option label="英國" value="uk"></el-option>
<el-option label="澳大利亞" value="australia"></el-option>
</el-select>
在這個例子中，我們將列表選項設為靜態的固定值，這是一個最基本的例子。但實際應用中，可選項可能是動態的，需要通過API動態獲取，並且選項較多。對於這種情況，應該及時展示用戶可以選取的選項並且方便用戶快速找到自己所需的選項。
二、自動滾動選中項到可視區域
當有很多選項時，用戶需要用滾動條來找到他們想要的選項。但自動將選項滾動到視野可以讓用戶省去找尋所需選項的步驟。這可以通過 el-select 屬性:popper-append-to-body="false" 和事件@visible-change 結合實現。
<el-select v-model="value" :popper-append-to-body="false" @visible-change="visibleChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
visibleChange(visible) {
if (visible && this.$refs.select.dropdown.$refs.popper != null) {
this.$nextTick(() => {
const popper = this.$refs.select.dropdown.$refs.popper;
const selected = popper.querySelector('.el-select-dropdown__item.selected');
if (selected != null) {
const offsetTop = selected.offsetTop;
const height = popper.clientHeight;
const selectedHeight = selected.clientHeight;
if (offsetTop + selectedHeight > height) {
popper.scrollTop = offsetTop;
}
}
});
}
}
在上面的例子中，我們使用了 @visible-change 事件監測彈出框的出現和隱藏，並在彈出框出現時，查找到當前被選中的項，再將它滾動到視野里。
三、自動選中列表的第一項或上一次選中的項
在Windows應用程序中，當打開下拉框時，通常會自動選擇第一個項。在這個世界日益追求高效的今天，我們希望用戶能夠更快地完成任務。當用戶到達下拉框時，我們可以自動選擇第一個項來讓用戶儘快完成選擇任務。例如：
<el-select v-model="value">
<el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
</el-select>
// ...
data() {
return {
value: null,
options: [{id: '1', name: '選項1'}, {id: '2', name: '選項2'}, {id: '3', name: '選項3'}]
};
},
watch: {
options(newVal, oldVal) {
this.value = newVal[0].id;
}
}
在這個例子中，我們可以自動找到第一個選項並將其設為默認選項。這可以通過使用 watch 然後在 options 改變時更新 value 的值。
另外一種方法是將前一次選擇的值存儲在localStorage中，在前一次選擇的項前自動勾選。
<el-select v-model="value">
<el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
</el-select>
// ...
data() {
return {
value: localStorage.getItem('lastSelect') || null,
options: [{id: '1', name: '選項1'}, {id: '2', name: '選項2'}, {id: '3', name: '選項3'}]
};
},
watch: {
value(newVal) {
localStorage.setItem('lastSelect', newVal);
},
options(newVal, oldVal) {
const lastSelect = localStorage.getItem('lastSelect');
if (lastSelect && newVal.findIndex(item => item.id === lastSelect) !== -1) {
this.value = lastSelect;
} else {
this.value = newVal[0].id;
}
}
}
在這個例子中，我們可以在 watch 中記錄當前選擇的值，然後在 options 改變時，自動找到前一次選擇的項並將其自動選中。
四、動態輸入以搜索選項
當選擇的選項很多時，我們可以提供搜索選項功能讓用戶更容易找到自己所需的選項。在el-select 組件中設置 filterable 屬性為 true 即可啟用搜索功能。例如：
<el-select v-model="value" filterable>
<el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
</el-select>
// ...
data() {
return {
value: null,
options: [{id: '1', name: '選項1'}, {id: '2', name: '選項2'}, {id: '3', name: '選項3'}]
};
},
在這個例子中，我們設置了 filterable 屬性，用戶可以在下拉列表中輸入文字以搜索選項。
五、結合上述方法的實現
在上文的幾個部分中，我們講解了如何展示可選項、自動滾動選中項到視野範圍內、自動選中第一個選項並在選項改變時自動更新、以及搜索選項的實現方法。讓我們結合上述方法的實現來製作一個優秀的 el-select 組件。
<el-select v-model="value" :popper-append-to-body="false" filterable @visible-change="visibleChange">
<el-option :value="item.id" :label="item.name" v-for="item in options" :key="item.id"></el-option>
</el-select>
// ...
data() {
return {
value: null,
options: [{id: '1', name: '選項1'}, {id: '2', name: '選項2'}, {id: '3', name: '選項3'}]
};
},
watch: {
options(newVal, oldVal) {
if (newVal.length > 0) {
if (!this.value) {
this.value = newVal[0].id;
} else {
const option = newVal.find(item => item.id === this.value);
if (!option) {
this.value = newVal[0].id;
}
}
}
}
},
methods: {
visibleChange(visible) {
if (visible && this.$refs.select.dropdown.$refs.popper != null) {
this.$nextTick(() => {
const popper = this.$refs.select.dropdown.$refs.popper;
const selected = popper.querySelector('.el-select-dropdown__item.selected');
if (selected != null) {
const offsetTop = selected.offsetTop;
const height = popper.clientHeight;
const selectedHeight = selected.clientHeight;
if (offsetTop + selectedHeight > height) {
popper.scrollTop = offsetTop;
}
}
});
}
}
}
在這個例子中，我們首先設置了 filterable。「@visible-change=visibleChange」是用於滾動到選中項不可見區域的方法。另外在 watch 屬性中更新 value 當 options 改變時自動更新，並自動選擇第一個項或前一次選擇的項。
六、總結
本文中介紹了如何提高用戶操作體驗，讓 el-select 自動選中所需選項，從而提高用戶的選擇體驗。重要的是，清晰明確地展示可選項、將自動選中的選項自動滾動到可視區域、自動選擇第一個選項或前一次選擇的項以及動態輸入以搜索選項是一些有用的方法。結合上述方法的實現，我們可以創建一個可提高用戶選擇體驗的高性能 el-select 組件。
原創文章，作者：ARJX，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/146894.html
微信掃一掃 
支付寶掃一掃 