uni 下拉框的实现

效果图：

完整代码

<template>
	<view class="checkout">
		<view class="select_box">
			<picker @change="handleChange" :range="exitData">
				<label class="">{{ currExit }}</label>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				exitData:['国槐街出口1','国槐街出口2','国槐街出口3','国槐街出口4'],
				currIndex:0,
				currExit:'国槐街出口1',
			}
		},
		methods: {
			handleChange(e) {
			    this.currIndex = e.target.value;
			    this.currExit = this.exitData[this.currIndex]
			}
		}
	}
</script>

<style lang="scss">
.checkout{
	padding: 30rpx;
	.select_box{
		height: 35px;
		line-height: 35px;
		border: 1px solid #E5AC3C;
		border-radius: 6rpx;
		font-size: 30rpx;
		text-align: center;
	}
}
</style>