uview组件中closeOnClickOverlay属性不生效问题

最新推荐文章于 2024-11-27 09:37:31 发布
原创 最新推荐文章于 2024-11-27 09:37:31 发布 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

在uview的组件使用中遇到closeOnClickOverlay属性无法使弹出框在点击遮罩层时关闭。根据文档，2.x版本的组件不处理关闭事件，需自行编写close方法。解决方案是在u-modal组件上添加@close事件，设置showChose为false以关闭弹出框。

解决uview组件中closeOnClickOverlay属性不生效问题

写了个弹出框需要点击遮罩层关闭，粘贴官网实例代码后反复实现发现不起效，仔细看了下文档说明，发现2.x组件不会主动处理任何关闭事件，全部交予用户自己处理。所以你需要自己写一个close方法。
官网文档实例在这里插入图片描述
代码加上close函数就好啦~

<u-modal :show="showChose" :closeOnClickOverlay="true" @close="showChose = false"  title="变更验证" >
uniapp - uview 组件库下 closeOnClickOverlay 是否允许点击遮罩关闭选择器无效，点击遮罩层时弹框关了又马上弹出来，弹框反复跳动且无法关闭问题（只要组件中有这个属性都通用
🏆 前端领域优质创作者
05-04 5124
uni-app，uview，closeOnClickOverlay，点击遮罩层无法关闭，u-calendar日历，u-picker选择器，u-popup弹出层，u-modal模态框，u-action-sheet操作菜单，点击遮罩层无法隐藏，无法关掉，关不掉，反复跳动，一直关闭开启循环，点了遮罩层模态框跳一下关不掉，uviewcloseOnClickOverlay反复跳动关不掉，允许点击遮罩层关闭，为什么设置了close还是不行，给组件设置了close依旧无法关闭，关闭弹窗，组件关不了，点击关闭就上下跳一
uniapp - 解决编译成钉钉小程序后，发现uView组件库的组件样式失效（就连自定义组件样式失效），完美 100% 解决uniapp编译打包钉钉小程序端后uview组件失效问题
高级前端工程师
11-18 4883
uniapp，钉钉小程序，uniapp编译钉钉小程序后样式都没了，uniapp打包编译为钉钉小程序uview组件库失效了，钉钉小程序不支持styleIsolation，uniapp钉钉小程序组件的样式都出问题了，钉钉小程序编译后样式都乱套了，uniapp搭建的钉钉小程序样式全丢问题，uni钉钉小程序编译后自定义组件和UI框架都没有样式，uniapp钉钉小程序uview框架组件库失效了怎么办，uniapp编译成钉钉小程序，uViewUI组件样式失效，uniapp中钉钉小程序平台编译后css样式异常失效，钉钉小
2022年10月前端学习笔记
weixin_48894212的博客
10-10 4784
【代码】10月前端学习笔记。
【样式】两个弹出框 u-popup uniapp uview2
AAAXiaoApple的博客
03-23 1611
【代码】【样式】两个弹出框 u-popup uniapp uview2。
uview组件中直接用closeOnClickOverlay属性不生效问题
小香菜子的博客
03-18 1398
注：是close不是cancel方法，属性需要设置为true，默认是false。
uview组件u-action-sheet中closeOnClickOverlay属性不生效问题
wsdshdhdhd的博客
06-07 2418
如果你在某些组件上设置了closeOnClickOverlay属性(点击遮罩关闭弹窗)，你会发现这东西跟假的一样无论怎么点它都关不掉，这并不是bug，而是。之前官方回复中有提到，参考了好像是react，closeOnClickAction为 true 时，会触发close事件，，2.x组件不会处理任何关闭事件，全部交予用户自己处理。所以你需要自己实现close方法。查看官网示例后，点击遮罩层也没有隐藏，closeOnClickOverlay属性不生效。至于事件中需要如何去做，交给开发者自己使用。
vant-weapp的＜van-popup＞中close-on-click-overlay失效
weixin_43951592的博客
03-08 1015
vant
uview组件源码，含样式
08-26
uview组件源码，含样式
解决uView组件在HBuilder X中不生效的方法
然而，在实际开发中，许多开发者常常遇到“uView组件不生效”的问题——即尽管已经按照官方文档进行了安装与引入，但在页面中使用uView组件（如`<u-button>`、`<u-input>`等）时，组件并未正常渲染或样式丢失，导致...
uniapp使用uview组件实现省市区三级联动
06-29
在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。...
vant-weapp的Popup 弹出层中close-on-click-overlay属性失效问题
m0_53350325的博客
09-15 4094
close-on-click-overlay，vant
van-popup() 点击空白处关闭弹窗
qq_43532275的博客
04-08 6297
van-popup() 点击空白处关闭弹窗
uview设置closeOnClickOverlay无法关闭
最新发布
weixin_48329823的博客
11-27 863
因为 :show是v-bind的语法糖 但是v-bind只是绑定数据的 所以组件无法触发修改show。是从组件抛出close方法 所以要实现close。
van-popup 组件中的 close-on-click-overlay 失效
热门推荐
qq_27990953的博客
10-23 1万+
van-popup 组件中的 close-on-click-overlay 失效 我在写van-popup 组件中的的时候 <van-popup v-model="taskShow" round position="bottom" close-on-click-overlay="false"> 禁用了点击蒙层关闭弹窗，但是一直不生效，网上也找了很多的文章一直没解决掉。 后来我转念一想，是不是我方式错了，于是我改变了写法 ...
【踩坑记录】uView在u--form中使用u-Picker，设置closeOnClickOverlay为true，添加close事件后，点击遮罩层弹框反复跳动无法关闭
weixin_46090311的博客
09-18 542
1.要实现点击遮罩层关闭弹框，必须设置closeOnClickOverlay和close事件。2.在u-form中使用一定要注意u-Picker放置的位置（关闭不了的原因）
u-picker 点击遮罩层 无法关闭的原因，尤其要注意最后一点
c327127960的博客
08-15 936
u-picker 点击遮罩层 无法关闭的原因，尤其要注意最后一点
uview的u-picker选择器允许点击遮罩层关闭
m0_63056435的博客
03-16 2962
uview的u-picker选择器允许点击遮罩层关闭
记录使用vant组件库的Popup的问题
fury的博客
10-12 1020
使用过程中,需要实现点击遮罩层不关闭,智能点击关闭按钮或提交按钮才能关闭遮罩层,看了官网要使用close-on-click-overlay属性,一开始的写法是错误的:这个写法明显传递的是string,而官网中明确要求要穿布尔值,所以需要在前面加冒号。
openlayers [九] 地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本
爱玩亚索的程序员
01-19 1893
常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值