uni-app没有系统的下拉框,就想着自己写一个,实现了基础逻辑
实现效果:
组件代码:
<template>
<view>
<view style="display: flex; align-items: center;" @click="clickSelect">
<view>{{itemShow.label}}</view>
<view :class="isBottom ? 'arrows-bottom' : 'arrows-top'"></view>
</view>
<view style="position: absolute; width: 50px; background-color: aliceblue;" v-show="isShow" >
<view v-for="(item,index) in options" :key="index" style="text-align: center; padding: 5px;" @click="selectItem(index)">
{{item.label}}
</view>
</view>
</view>
</template>
<script>
export default {
name:"selectItem",
data() {
return {
isBottom: true,
isShow: false,
itemShow: {}
};
},
props: {
options: Array,
selected: {
type: Number,
default: 0
}
},
methods: {
clickSelect() {
this.isBottom = !this.isBottom
this.isShow = !this.isShow
},
selectItem(index) {
this.itemShow = this.$props.options[index]
this.clickSelect()
// 传给父组件
this.$emit('selectItem', index, this.itemShow)
}
},
created() {
this.itemShow = this.$props.options[this.$props.selected]
}
}
</script>
<style>
/* 向下箭头 */
.arrows-bottom {
height: 7px;
width: 7px;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
border-right: 1px solid rgba(0, 0, 0, 0.4);
transform: rotate(45deg);
margin-left: 6px;
}
</style>
使用:
<selectItem :options="options" @selectItem="selectItem"></selectItem>
options: [
{
label: "每日",
value: 1
},
{
label: "每月",
value: 2
},
{
label: "每年",
value: 3
}
]
selectItem(index, item){
console.log("选择",index, item.label)
}
结语:只是实现了基础的下拉框,对细节处的颜色、宽度可能需要自行调节,暂没有动态化