vant的picker的坑

最新推荐文章于 2025-06-20 09:50:27 发布

玲珑咖啡

最新推荐文章于 2025-06-20 09:50:27 发布

阅读量8k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43338177/article/details/102728053

本文分享了一次解决Vue框架中弹出层无法正常关闭的问题经验。通过对比两种不同的代码写法，阐述了正确放置组件以确保弹窗交互正常的重要性。

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

<view class="picker" bindtap="goSub">
	{{subjectname}}
	<image class="img" src="../../images/bottom-arrow-pic.png"></image>
	<!-- 年级筛选 -->
	<van-popup show="{{ subShow }}" bind:close="subClose" position="bottom" overlay-style="background:rgba(0,0,0,0.3)">
		<van-picker columns="{{ subColumns }}" bind:cancel="subCancel" bind:confirm="subConfirm" show-toolbar value-key="name"
		 toolbar-class="cancon" />
	</van-popup>
</view>

咋一看上面的代码貌似没有什么问题，但是点击picker出来之后会发现，关闭不了了，无论怎么点都不会关闭弹出层，页面也无报错信息，经过测试发现，组件写错地方了，下面是正确的写法

<view class="picker" bindtap="goSub">
	{{subjectname}}
	<image class="img" src="../../images/bottom-arrow-pic.png"></image>
</view>
<!-- 年级筛选 -->
<van-popup show="{{ subShow }}" bind:close="subClose" position="bottom" overlay-style="background:rgba(0,0,0,0.3)">
	<van-picker columns="{{ subColumns }}" bind:cancel="subCancel" bind:confirm="subConfirm" show-toolbar value-key="name"
	 toolbar-class="cancon" />
</van-popup>