这次 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
若有有问题，请留言交流。
网友评论