根据设计需求，写了一个自定义的下拉框，主要分上下两部分
先对界面进行布局，主要是分上下两部分
子组件代码：
//上半部分
<div class="lay-select"> <img class="lay-img" :src="curimg" /> <label class="lay-title">{{ curtext }}</label> <div class="lay-triangle"></div> </div>
//下半部分 <div class="lay-detailed" v-show="seldetailed"> <div class="detailed-content" v-for="(item, index) in listData" :key="index" > <img class="delete-img" :src="item.img" /> <label class="detailed-number">{{ item.lab }}</label> </div> <div> <p class="detailed-number">其他</p> </div> </div>
然后js部分
return { seldetailed: false, //先将下拉框隐藏 };
methods: {
selectClick() {
this.seldetailed = !this.seldetailed; //点击显示或隐藏下拉框
},
}，
props: {
avatar: {
type: String,
default: "",
},
text: {
type: String,
default: "",
},
item: {
type: Object,
default: function() {
return {};
},
},
listData: {
type: Array,
default: function() {
return [];
},
},
},
css样式部分
style scoped lang="scss"> .lay-img { width: 100px; height: 1px; float: left; margin: 9px 0 0 6px; } .lay-select { width: 240px; height: 20px; display: inline-block; background: #323b4c; border-radius: 1px; margin: 0px 0px -2px 8px; cursor: pointer; .lay-title { font-size: 12px; color: #ffffff; display: block; text-align: left; margin-left: 10px; float: left; } .lay-triangle { border: 8px solid transparent; border-top: 10px white solid; width: 0px; height: 0px; display: inline-block; float: right; margin: 6px 12px 0 0px; } } .lay-detailed { width: 306px; position: absolute; background: #454f61; z-index: 1; .detailed-number { font-size: 14px; text-align: center; } .delete-img { width: 84%; height: 6px; margin: 0 4px 0 10px; } .detailed-content { width: 306px; margin-top: 20px; cursor: pointer; } } </style>