uniapp下拉弹层选择框效果demo(整理)

效果图:
在这里插入图片描述

<template>
	<picker @change="onRecipientChangeSelect" :value="recipientIndex" :range="recipient" range-key="name">
	<view class="uni-input p-0 txtFont">
		<!-- {
    
    {
    
    recipient[recipientIndex].name}}<text class="iconfont icon-xia font-sm pl-1"></text> -->
		{
    
    {
    
    shopName}}<text class="iconfont icon-xia font-sm pl-1"></text>
	</view>
</picker>
</template>

<script>
	export default{
    
    
		data() {
    
    
			return {
    
    
				shopName: '全部',
				recipient: [
					{
    
    
						id: 18,
						name: "门店01"
					},
					{
    
    
						id: 19,
						name: "门店字数超长门店字数超长门店字数超长门店字数"
					},
					
				],
				recipientIndex: 0,
				dataObject: {
    
    },
			}
		},
		methods: {
    
    
			onRecipientChangeSelect(e) {
    
    
				console.log('携带值为', e.detail.value)
				// this.recipientIndex = e.detail.value		//选择数组的第几个
				this.dataObject.shopId = this.recipient[e.detail.value].id;	//选择商店id
				this.dataObject.shopName = this.recipient[e.detail.value].name;	//选择商店name
			},
		}
	}
</script>

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/125422637