【踩坑记录】uView在u--form中使用u-Picker，设置closeOnClickOverlay为true，添加close事件后，点击遮罩层弹框反复跳动无法关闭

最新推荐文章于 2024-11-27 09:37:31 发布

weixin_46090311

最新推荐文章于 2024-11-27 09:37:31 发布

阅读量403

点赞数 4

文章标签：前端 uniapp javascript html

本文链接：https://blog.youkuaiyun.com/weixin_46090311/article/details/142325330

版权

1.要实现点击遮罩层关闭弹框，必须设置closeOnClickOverlay和close事件

<u-picker :show="showHiddenTrouble" :columns="hiddenTroubleTypeColumns" :closeOnClickOverlay="true" @close="showHiddenTrouble = false" @cancel="showHiddenTrouble = false"></u-picker>

2.在u-form中使用一定要注意u-Picker放置的位置（关闭不了的原因）

错误示范（把u-Picker放在了u-form-item里面）：

<u-form-item label="年份" prop="year" required borderBottom @click="showyear = true">
	<u--input v-model="form.year" disabled disabledColor="#ffffff" placeholder="请选择年份" >
    </u--input>
	<u-icon slot="right" name="arrow-right"></u-icon>
	<u-picker name="year" :show="showyear " :columns="columns" :defaultIndex="defaultIndex" :closeOnClickOverlay="true" @close="showyear = false" @cancel="showyear = false">
    </u-picker>
</u-form-item>

正确示范（u-Picker与u-form-item同级-解决问题）：

<u-form-item label="年份" prop="year" required borderBottom @click="showyear = true">
	<u--input v-model="form.year" disabled disabledColor="#ffffff" placeholder="请选择年份" >
    </u--input>
	<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>


<u-picker name="year" :show="showyear " :columns="columns" :defaultIndex="defaultIndex" :closeOnClickOverlay="true" @close="showyear = false" @cancel="showyear = false">
</u-picker>