自定义下拉框

最新推荐文章于 2024-09-02 20:34:02 发布

小凳子在线

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量137

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_53024519/article/details/141349819

版权

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)
}

结语：只是实现了基础的下拉框，对细节处的颜色、宽度可能需要自行调节，暂没有动态化