用组件库的时候样式修改起来又很麻烦,原声下拉列表options又无法添加样式,也没法做复杂处理,所以使用以下方式实现下拉列表
下拉,收起的icon自行更换
<template>
<div >
<div class='team-list'>
<div class='team-name' @click='nameClick()'>
<div>{{message}} </div>
< img src="@/assets/xiala.png" class='team-xiala' v-show='showNum==0'>
< img src="@/assets/shouqi.png" class='team-shouqi' v-show='showNum==1'>
</div>
<ul class='team-form' v-show="showNum==1" @click='ulClick()'>
<li v-for="(item,index) in items" :key="index" @click="changeClick(item)">{{item.name}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
items:[
{
num:1,
name:'a',
},{
num:2,
name:'b',
},{
num:3,
name:'c',
},{
num:4,
name:'d',
},{
num:5,
name:'e',
}
],
message:'选择组员',
showNum:'0'
}
},
mounted(){
},
methods:{
nameClick(){
this.showNum=1
},
ulClick(){
this.showNum=0
},
changeClick(item){
console.log(item)
this.message=item.name
}
}
}
</script>
<style scoped lang='less'>
.team-list{
width:120px;
height:32px;
color:rgb(58, 57, 57);
border:1px solid rgb(173, 171, 171);
font-size:22px;
line-height: 32px;
padding:5px;
border-radius: 5px;
margin-right:20px;
.team-name{
display: flex;
justify-content: space-between;
padding-left:5px;
.team-xiala , .team-shouqi{
width:18px;
height:18px;
margin-right:5px;
margin-top:8px;
}
}
.team-form{
border:1px solid rgb(168, 167, 167);
font-size:24px;
width:100px;
border-radius:5px;
margin-left:-6px;
margin-top:6px;
max-height:240px;
padding-top:10px;
padding-bottom: 10px;;
overflow: auto;
li{
height:50px;
line-height:50px;
list-style: none;
text-align: left;
}
}
}
</style>