uniapp下拉弹出层

最新推荐文章于 2025-03-26 16:26:36 发布

清风明月**

最新推荐文章于 2025-03-26 16:26:36 发布

阅读量906

点赞数

分类专栏： uniapp 文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/DVchengxuyuan/article/details/124711445

版权

uniapp 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在Vue中利用`<picker>`组件进行用户选择操作。通过`v-model`实现数据绑定，显示选择器当前选中的值，`@change`事件监听选择器的变化，更新`recipientIndex`。示例代码展示了如何设置选择器的范围及默认值，以及在选择改变时如何更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<picker @change="onRecipientChangeSelect" :value="recipientIndex" :range="recipient" 
     range-key="name">
	   <view class="uni-input p-0">            
            {{recipient[recipientIndex].name}}<text
		class="iconfont icon-xia font-sm pl-1"></text></view>
							</picker>
</html>
export default {
		data() {
			return {
	         recipient: [{
 					name: "未选择",
					id: 0,
					DictKey: 0
				}, {
					name: "张大乐",
					id: 0,
					DictKey: 0
				}],
				recipientIndex: 0,
}}
	methods: {
	onRecipientChangeSelect(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.recipientIndex = e.detail.value
			},
}