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

最新推荐文章于 2024-06-19 20:49:16 发布
最新推荐文章于 2024-06-19 20:49:16 发布
阅读量1.6k 收藏 1
点赞数 1
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_823/article/details/131706654
版权

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

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

<u-modal :show="showChose" :closeOnClickOverlay="true" @close="showChose = false"  title="变更验证" >
媛媛不是缓缓
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
uniapp - uview 组件库下 closeOnClickOverlay 是否允许点击遮罩关闭选择器无效，点击遮罩层时弹框关了又马上弹出来，弹框反复跳动且无法关闭问题（只要组件中有这个属性都通用
王佳斌
05-04 3613
uni-app，uview，closeOnClickOverlay，点击遮罩层无法关闭，u-calendar日历，u-picker选择器，u-popup弹出层，u-modal模态框，u-action-sheet操作菜单，点击遮罩层无法隐藏，无法关掉，关不掉，反复跳动，一直关闭开启循环，点了遮罩层模态框跳一下关不掉，uview closeOnClickOverlay 反复跳动关不掉，允许点击遮罩层关闭，为什么设置了close还是不行，给组件设置了close依旧无法关闭，关闭弹窗，组件关不了，点击关闭就上下跳一
uview组件u-action-sheet中closeOnClickOverlay属性不生效问题
wsdshdhdhd的博客
06-07 1727
如果你在某些组件上设置了closeOnClickOverlay属性(点击遮罩关闭弹窗)，你会发现这东西跟假的一样无论怎么点它都关不掉，这并不是bug，而是。之前官方回复中有提到，参考了好像是react，closeOnClickAction为 true 时，会触发close事件，，2.x组件不会处理任何关闭事件，全部交予用户自己处理。所以你需要自己实现close方法。查看官网示例后，点击遮罩层也没有隐藏，closeOnClickOverlay属性不生效。至于事件中需要如何去做，交给开发者自己使用。
uview组件中直接用closeOnClickOverlay属性不生效问题
小香菜子的博客
03-18 607
注：是close不是cancel方法，属性需要设置为true，默认是false。
vant-weapp的Popup 弹出层中close-on-click-overlay属性失效问题
m0_53350325的博客
09-15 3305
close-on-click-overlay，vant
uview的u-picker选择器允许点击遮罩层关闭
m0_63056435的博客
03-16 2201
uview的u-picker选择器允许点击遮罩层关闭
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"> 禁用了点击蒙层关闭弹窗，但是一直不生效，网上也找了很多的文章一直没解决掉。 后来我转念一想，是不是我方式错了，于是我改变了写法 ...
用代码关闭 overlay弹出层
weixin_33724570的博客
01-30 225
如果 弹出层的内容是另外一个页面要使用 iframe 代码 <script> $(document).ready(function() { $(".overlaytrigger[rel]").overlay({ mask: '#333', closeOnClick: false, onClose: function() { ...
使用iview modal对话框点击遮罩层不关闭
qq_37496470的博客
03-12 3678
加上下面代码即可实现 :mask-closable="false"
uview组件源码，含样式
08-26
uview组件源码，含样式
uniapp使用uview组件实现省市区三级联动
06-29
在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。...
基于uView封装的地址选择弹框组件
03-04
基于uView封装的地址选择弹框组件
change-uview:修改uview-ui组件的组价
03-23
在这个案例中，我们要修改的是uview-ui的选项卡（tabbar）组件，使其能够支持竖向导航。默认情况下，uview-ui的选项卡是横向展示的，适用于水平空间充足的场景。但如果我们希望在垂直空间有限或者设计需要时，将选项...
uview左滑组件 group-swipe-action-item：修复bug，左滑删除当前行，下一项自动打开左滑删除场景
11-26
在这个特定的案例中，我们关注的是uView中的"Group Swipe Action Item"组件，它允许用户通过左滑操作来触发一些特殊功能，如删除、编辑等，从而提升交互性。 "Group Swipe Action Item"组件在设计时考虑了多种交互...
点击遮罩层的背景关闭遮罩层
geek555的博客
03-07 1546
转载：https://blog.csdn.net/weixin_44542088/article/details/86513659 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1） ...
引用子组件 关闭子组件弹窗失效
weixin_43858851的博客
05-12 108
解决弹窗 关闭失效
2022年10月前端学习笔记
weixin_48894212的博客
10-10 4534
【代码】10月前端学习笔记。
uview.2的SwipeAction 滑动单元格 点击删除或收藏，不关闭，点击删除后。
m0_74132533的博客
04-24 2556
uview.2的SwipeAction 滑动单元格 点击删除或收藏，不关闭，点击删除后。
uniapp u-popup封装弹框背景滚动/滚动穿模
最新发布
weixin_45811884的博客
06-19 231
【代码】uniapp u-popup封装弹框背景滚动/滚动穿模。
uniapp使用uview组件不生效
05-28
如果在使用 uniapp 的时候，引入了 uView 组件，但是发现组件并没有生效，可以尝试以下几个步骤： 1. 确认 uView 是否已经正确引入到项目中，可以在 `pages.json` 中的 `easycom` 配置中添加 `"@dcloudio/vue-cli-plugin-uni/packages/uview-ui"`，或者在 `main.js` 中全局引入：`import uView from 'uview-ui'`，并在 `Vue.use(uView)` 中注册。 2. 确认是否正确使用了 uView 组件，例如使用了 `u-button` 组件，应该这样引入：`<u-button>按钮</u-button>`。 3. 确认是否正确配置了 uniapp 的 easycom 配置，在 `pages.json` 中添加了 `"easycom": {"autoscan": true,"custom": {"@/components/":{}}}`。 4. 确认是否正确配置了 webpack，可以在 `vue.config.js` 中添加以下代码： ``` configureWebpack: { resolve: { alias: { 'uview-ui': 'uview-ui/src' } } } ``` 以上是常见问题的解决方法，如果以上方法都不行，可以尝试在官方文档中查找其他解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值