這次 Github 上傳錯了，標題中的序號不對，我想這樣：《VUE 實現 Studio 管理後臺（十一）：下拉選擇列表（Select）控件，輸入框 input 系列》實際傳成了這樣《VUE 實現 Studio 管理後臺（九）：下拉選擇列表（Select）控件，輸入框 input 系列》，很無奈的錯誤，我也不知道怎麼修正，下載代碼的時候注意分別吧。
這次分享下拉列表輸入組件（Select），效果如下：
一如既往，取個好聽的名字 RxSelect，正常的調用代碼應該是這樣的：
```
<RxSelect
:defaultValue = "defaultValue"
:list= "list"
v-model = "inputValue"
>
</RxSelect>
list 代碼：
list:{
white:'白色',
black:'黑色',
red:'紅色',
green:'綠色',
dntknow:'不知道什麼色',
},
```
上一篇作文，已經介紹過，我們的項目是要通過 Json 數據，動態構建輸入界面，所以只需要在測試代碼中加入以下代碼：
{
label:'顏色',
value:'white',
defaultValue:'black',
inputName:'RxSelect',
props:{
list:{
white:'白色',
black:'黑色',
red:'紅色',
green:'綠色',
dntknow:'不知道什麼色',
},
},
},
RxInputRow 控件，會把這段數據轉化成上面的代碼，兩者在 RxSelect 部分是等效的。
RxSelect 代碼：
<template>
<div class="rx-select">
<div class="value-view">
<div class="clear-button"
@click="clear"
>×</div>
<div class="value"
@click="click"
>
{{value ? list[value] : $t('widgets.select')}} <span class="right-icon">▾</span>
<ul v-if="showList" class="list">
<li
v-for="(name, value) in list"
@click="itemClick(value)"
>
{{name}}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'RxSelect',
props:{
value:{ default:'' },
defaultValue:{ default:'' },
list:{ default:{} },
},
computed:{
inputValue: {
get:function() {
return this.value;
},
set:function(val) {
this.$emit('input', val);
},
},
},
data () {
return {
showList : false,
}
},
mounted () {
document.addEventListener('click', this.documentClick)
},
beforeDestroyed() {
document.removeEventListener('click', this.documentClick)
},
methods: {
clear(){
this.inputValue = ''
},
click(event){
event.stopPropagation()
this.showList = !this.showList
},
documentClick(event){
this.showList = false
},
itemClick(value){
this.inputValue = value
},
},
}
</script>
<style>
.rx-select{
display: flex;
flex-flow: column;
align-items: center;
}
.rx-select .clear-button{
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
margin-right:2px;
font-size: 16px;
}
.rx-select .value-view{
display: flex;
flex-flow: row;
align-items: center;
cursor: pointer;
}
.rx-select .value-view .value{
position: relative;
display: flex;
flex-flow: row;
padding: 0 10px;
height: 24px;
align-items: center;
justify-content: space-between;
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.rx-select .value-view .value span{
margin-left:5px;
font-size: 16px;
}
.rx-select .list{
position: absolute;
display: block;
padding: 0;
margin: 0;
list-style: none;
left: 0;
top: 100%;
z-index: 1;
}
.rx-select .list li{
min-width: 100%;
height: 26px;
display: flex;
align-items: center;
padding-left:10px;
background: #424242;
cursor: pointer;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
white-space:nowrap;
}
.rx-select .list li:hover{
background: #75b325;
}
</style>
這段代碼，沒有什麼難懂的邏輯，有問題請留言。需要注意的是，css 中我把.list 設爲 position:absolute 後，子元素 li 無法撐開它，百度了半天，也沒找到合適解決辦法，就把背景跟陰影的設置放在子元素 li 裏了，好在效果還不錯，先這樣吧。
感謝耐心閱讀，詳細代碼，請參考 Github：https://github.com/vularsoft/studio-ui
若有有問題，請留言交流。