vant，popover点击外面无法关闭？

最新推荐文章于 2023-10-12 17:31:33 发布
最新推荐文章于 2023-10-12 17:31:33 发布
阅读量1.2k 收藏 3
点赞数
文章标签： 前端 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42555422/article/details/127895798
版权

最近在使用vant2.0，但是是在pc端使用。发现popover怎么都无法点击外面关闭。

也就是close-on-click-outside属性。

为嘛呢。

https://github.com/youzan/vant/issues/7767

根据上面这个issue知道。因为vant基本还是用于移动的，所以事件都是touch的，click就触发不了了。

解决方法安装@vant/touch-emulator

如下网站

https://github.com/youzan/vant/tree/3.x/packages/vant-touch-emulator

leoonliang
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
vant-popup组件点击黑色遮罩层不关闭弹窗
肖肖肖丽珠的博客
01-13 2402
bind:close
vue+Vant，关闭Popup弹框，遮罩层并没有消失
yaya07755的专栏
09-27 2225
点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。
vant-weapp的Popup 弹出层中close-on-click-overlay属性失效问题
m0_53350325的博客
09-15 3326
close-on-click-overlay，vant
关于Element Popover弹窗关不掉的解决办法
AuraVic的博客
08-18 4519
情景： 在 element-ui 中 el-table 中使用Popover弹框 ，根据网上小伙伴提供的方法大部分都是这种： htm部分： <el-table-column> <template slot-scope="scope"> <el-popover placement="bottom" title="更多" width="100" trigger="click" :ref="`popover-${scope.$index}`"> <el-butt
vant-weapp的＜van-popup＞中close-on-click-overlay失效
weixin_43951592的博客
03-08 604
vant
vant-ui组件调用Dialog弹窗异步关闭操作
01-18
我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，element-ui用的很方便，在这里就懵比了，刚开始做的，弹窗关闭了，才返回...
vant-image本地图片无法显示
01-07
正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../...
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
vant-demo：vant演示集
02-04
Vant官方示例合集，包含了Vant，Vant Weapp和Vant Cli相关的示例，详细内容请打开各目录查看。 目录结构 ├── vant # Vant 相关示例 │ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 ...
vant上传图片跟视频混合上传加预览demo
11-08
vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: ...
阻止 antd Popover弹框 点击事件冒泡
风小猪的博客
04-11 2504
设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。
ant design 组件使用之 Popconfirm 气泡确认框在外部组件绑定点击事件后 onConfirm 不生效
YZRHANYU的博客
03-07 1588
ant design 组件使用之 Popconfirm 气泡确认框在外部组件绑定点击事件后 onConfirm 不生效
antd modal 弹出框点击空白处不关闭
what_ever_so_what的专栏
02-20 1万+
这里的空白处，对应的精准表述为遮罩 mask mask 是否展示遮罩 Boolean true maskClosable 点击蒙层是否允许关闭 boolean true maskStyle 遮罩样式 object {} 使用方法如下： const props = { mask={true} //...
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"> 禁用了点击蒙层关闭弹窗，但是一直不生效，网上也找了很多的文章一直没解决掉。 后来我转念一想，是不是我方式错了，于是我改变了写法 ...
记录使用vant组件库的Popup的问题
最新发布
fury的博客
10-12 494
使用过程中,需要实现点击遮罩层不关闭,智能点击关闭按钮或提交按钮才能关闭遮罩层,看了官网要使用close-on-click-overlay属性,一开始的写法是错误的:这个写法明显传递的是string,而官网中明确要求要穿布尔值,所以需要在前面加冒号。
Mars3D dialog组件关闭回调问题 props
qq_43127193的博客
09-16 594
Mars3D dialog组件关闭回调问题 props
实际开发中遇到的事件冒泡——为什么我的弹框关不掉了
种一棵树最好的时间是十年前，其次是现在。
10-18 1077
实战中遇到的问题：点击关闭弹框的按钮，弹框反复闪烁（关闭-打卡-关闭-打开……），关闭不了。原因是事件冒泡：基于dom树形结构，事件会顺着触发元素向上冒泡。当子元素触发事件，事件会依次往上级传递，每一级都可以感知到事件，直到传递到根元素。
vue项目中使用vant组件Popup点击遮罩缩小过渡（不消失）
词不达意难知的博客
12-10 5450
记录下项目中遇到的问题 先说功能 点击遮罩或者右上X使弹窗缩小(不能消失) 项目中使用的组件库是Vant 组件使用的是popup弹出层 首先是组件配置 <van-popup v-model="testTag" @click-overlay="testClose" overlay-class="black-mask" :transition-appear="true" class="linkThe-greenSpeac-pay" :class="{ 'scale-active': clickt
vant popover 气泡变宽
07-11
要使 Vant Popover 气泡变宽，您可以通过设置其宽度的 CSS 样式来实现。可以使用以下方法之一： 1. 使用 `:style` 属性直接为气泡设置宽度样式，例如： ```html <van-popover :style="{ width: '300px' }"> <!-- 气泡内容 --> </van-popover> ``` 2. 使用 `popper-class` 属性指定一个自定义的 CSS 类名，并在该类名下设置宽度样式，例如： ```html <van-popover popper-class="custom-popover"> <!-- 气泡内容 --> </van-popover> ``` ```css .custom-popover { width: 300px; } ``` 以上方法中的 `300px` 可以根据您的需求进行调整，以达到所需的宽度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值