uni-app 点击蒙版层时关闭自定义弹窗

这篇具有很好参考价值的文章主要介绍了uni-app 点击蒙版层时关闭自定义弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

@click.stop:用于阻止冒泡

@click.stop 标签范围内,点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗

@click.stop 标签内的 @click 等事件:如果事件内有关闭弹窗的代码可关闭弹窗

在 template 中

<view class="pop-box" v-if="showPop" @touchmove.stop.prevent="toMoveHandle" @click="showPop = false">
  <view @click.stop>
    弹窗内容
  </view>
</view>
<view @click="showPop = true">打开弹窗</view>

在 script 中

data() {
  return {
    showPop: false,
  }
}

toMoveHandle 方法请查看:uniapp 禁止遮罩层下的页面滚动文章来源地址https://www.toymoban.com/news/detail-732742.html

在 style 中

.pop-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

到了这里,关于uni-app 点击蒙版层时关闭自定义弹窗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app中uni-table的uni-tr无点击事件

    本文记录用于记录使用 uni-app 开发过程遇到的bug。 在使用 uni-table 时,想给 uni-table 的行添加行点击事件;但发现官方并未给 uni-tr 增加点击行点击事件(很多事件都没有),这个问题很久就有人在其官方论坛提出,但官方一直没有解决。在csdn中找了一个类似的帖子,但本人

    2024年02月15日
    浏览(45)
  • uni-app开发小程序,radio单选按钮,点击可以选中,再次点击可以取消

    不适用官方的change方法,自己定义点击方法。 动态判断定义的值是否等于遍历的值进行回显,如果和上一次点击的值一样,就把定义的值改为null

    2024年02月11日
    浏览(64)
  • uni-app实现点击显示隐藏列表,兼容微信小程序

    效果:    小程序打印的结果:值一直为true   如果你试过v-if不生效,又试了v-show,还是不行!!千万不要着急! 不是自己写的不对,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承认是自己的问题。 其实解决的办法也很简单,就是要兼容两端,写出符合

    2024年02月09日
    浏览(69)
  • uni-app的tabBar用法(自动、点击刷新页面,loading加载框)

    一.先在package.json中配置tabBar(前置条件) tabBar所跳转的页面应事先在page中创建好!如下配置后app下方会有可点击的tabBar按钮,在list中设置按钮的个数。  图1         tabBar的 list 属性         text :tabBar按钮的名称         pagePath :tabBar按钮的page页面路径         iconPa

    2024年02月08日
    浏览(50)
  • uniapp、微信小程序:点击空白/蒙版关闭弹窗

    重点:(点击空白区域关闭弹窗,同理) @click.stop:用于阻止冒泡。 添加@click.stop的标签范围内,点击任何区域(包括@click的点击事件)不会关闭弹窗。标签范围外,会关闭弹窗。 @click.stop标签内的@click等事件:如果事件内有关闭弹窗的代码,(不影响)可关闭弹窗。 (下面

    2024年02月11日
    浏览(91)
  • uni-app 折叠自定义

    uni-app的uni-collapse折叠组件样式修改 下面是修改后的样式 修改一下uni-collapse的uni-collapse-item 设计图样式 修改后的样式 就这样吧…

    2024年02月09日
    浏览(59)
  • 【uni-app】自定义导航栏

    新手刚玩 uniapp 进行微信小程序,甚至多端的开发。 原生uniapp 的导航栏,并不能满足 ui 的需求,所以各种查阅资料,导航栏自定义内容 整理如下: 需要修改的文件如下: 1、pages.json 修改pages.json,启动导航栏自适应,设置\\\" navigationStyle\\\": \\\"custom\\\" 2、system_info.js 新建 system_info

    2024年02月16日
    浏览(57)
  • uni-app 自定义下拉框

    如图:     html: view class=\\\"row-item\\\" view class=\\\"lable-tit\\\"性别:/view view class=\\\"selected-all\\\" view class=\\\"drop-down-box\\\" @click=\\\"btnShowHideClick\\\" text class=\\\"dropdown-content\\\"{{choiceContent}}/text image class=\\\"dropdown-icon\\\" src=\\\"/static/down.png\\\" mode=\\\"widthFix\\\"/image /view  view class=\\\"dialog-view\\\" v-if=\\\"isShowChoice\\\" text :class=\\\"choiceI

    2023年04月19日
    浏览(44)
  • uni-app中配置自定义条件编译

    前提:官网提供的自定义编译不满足条件 package.json | uni-app官网 下文:不详细写,主要写关键思路 package.json文件 主要看scripts的执行命令,其他依赖就是用vue-cli方式创建uni-app项目生成的 ct.js 条件编译起作用的地方在这个地方node_modules/@dcloudio/uni-cli-shared/lib/plugin.js文件的这里

    2024年04月27日
    浏览(96)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包