u-view 组件 u-picker 点击遮罩层无法关闭问题
(说实话uview的文档写的真的一般,跟pc端的完全不能比啊)
三个需要注意的点
1. 需要添加 closeOnClickOverlay 属性
<u-picker :show="show" :columns="columns" keyName="label" :closeOnClickOverlay="true"></u-picker>
2. 需要自行处理close回调,并不是添加了 closeOnClickOverlay 属性就可以直接点击遮罩层关闭的
<u-picker :show="show" :columns="columns" keyName="label" :closeOnClickOverlay="true" @close="show = false"></u-picker>
3.也是我自己犯的错误,u-picker 要写在最外层
错误示例:
//这是我之前写的 将 u-picker 写在了 u-form-item 里面,导致我上面两个都写上之后都不能关闭
<u-form-item label-width="140" label="项目选择" @click="show = true"><u-input v-model="form.projectName" readonly placeholder="请选择项目" suffixIcon="arrow-right"suffixIconStyle="color: #909399" /><u-picker :show="show" :columns="projectColumns" cancelText="清空" :closeOnClickOverlay="true" keyName="name"@close="show = false" @cancel="handleCancel" @confirm="selectProject"></u-picker>
</u-form-item>
正确写法:
u-picker 应该放在最外层父元素下的第一级,和别的元素同级,如果像我放在u-form-item中就不行