Vue.js 多選列表(Multi-Select)組件
- 2021 年 3 月 2 日
- 筆記
- HTML, javascript, notebook, VUE
搬運公眾號早前文章
多選列表 (Multi-Select) 是一種將所有選項列出,並允許用戶利用 Ctrl/Shift 鍵進行多選的 UI 元素。這是一種常見的設計元素。有時候為了節省空間,我們會將選項摺疊於 Combo Box 中。為了方便用戶操作,這個組件還將添加 Select All 和 Clear All 兩個按鈕,允許用戶快速選擇或清除選擇。這個 UI 元素曾被運用於 Correlation Plot App 中。
註冊組件
註冊 Multi-Select 組件,簡單來說就是複製粘貼已封裝好的代碼部分。此處建議註冊全局組件。
設計該元素的時候考慮了兩種模式:第一種是每次點擊新選項將保留舊選項並添加新選項,如上述示例圖形。這種是較為常見的一種方式。第二種是每次點擊新選項則清除舊選項僅保留新選項。若使用這種方式進行多選,則需要利用Ctrl/Shift鍵。這種設計能便於用戶在每一次的點擊中消除舊選項。若使用第二方式,需要替換事件 @click.exact="AddToOrDeleteFromSelectedColumns"
為 @click.exact="ClickOnColumnListItem"
<script type="text/x-template" id="multi-select-template">
…
<tr v-for = "(item,index) in columns"
@click.exact="AddToOrDeleteFromSelectedColumns"
@click.shift.exact="AddMultipleToSelectedColumns"
@click.ctrl.exact="AddToOrDeleteFromSelectedColumns"
:title="function(item){if(item.longname){return 'Short Name: ' + item.name + '\n----------------\n' + item.longname}else{return item.name}}(item)"
class="column-list-entry">
...
</tr>
</script>
<script>
Vue.component("multi-select", {
template: "#multi-select-template",
…
</script>
調用組件
直接添加自定義標籤
<multi-select :legend_name="legend_name"
:columns="columns"
:selected_columns="selected_columns"
@update_selected_columns="onSelectedColumnsChange">
</multi-select>
傳遞數據
最後還需要對組件傳遞數據。我們可以利用 v-bind 動態綁定數據到父級組件的數據中。
props 中 legend_name 綁定 Multi-Select 的所需顯示的名稱,columns 綁定 Multi-Select 的選項, selected_columns 綁定當前的已選項。另外我們還需要在父級實例中定義事件 「onSelectedColumnsChange」,用於刷新 Multi-Select 組件的顯示。
data: function(){
return {
legend_name: "Input Columns",
columns:
[
{"name":"A","longname":"Copper"},
{"name":"B","longname":"Aluminum Aluminum"},
{"name":"C","longname":"Calcium"},
{"name":"D","longname":"Calcium"},
],
selected_columns: [],
}
},
...
methods:{
onSelectedColumnsChange:function(new_columns) {
this.selected_columns = new_columns;
},
},
...