vant弹出层关闭后图片没消失

最新推荐文章于 2023-09-27 11:18:52 发布

张小俊_

最新推荐文章于 2023-09-27 11:18:52 发布

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签： vue vant 前端

本文链接：https://blog.csdn.net/weixin_42331508/article/details/100941508

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近做vue与vant结合的项目，使用了弹出层组件。结果点击遮罩层的时候发现弹出层的内容没消失
试了各种方法，发现只要在弹出层组件上加一句

:close-on-click-overlay='false'

竟然成功了

这是官方的定义，我也不知道为什么设置为false就好了，希望有高手解答

close-on-click-overlay	点击蒙层是否关闭 Popup	Boolean	true

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

张小俊_

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vant popup+其他组件的组合使用，及避坑指南

Joy 的博客

06-10

4821

做小程序开发，相信大家对于表单收集肯定不陌生。但是我们经常会碰到一些比较稍微复杂的选项，并不是简单的填一些文字，数字，或者选择一下是否就能搞定的。可能需要交互判断，或者结合其他自定义组件才能很好的展示出来，但这种组件往往都很占空间，如果一股脑都叠罗汉似的放到表单里，页面会显得非常拥挤。那么如何解决这个问题呢？常见的方式有，popup弹出层、跳转新页面等等。其中跳转页面的加载卡顿和不连续感会影响用户体验，除非是单独的多项收集页面，信息量很大那另说。所以在实际应用中，popup弹出层是最常见的...

vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空

Maanqi_1214的博客

03-22

2117

1.el-dialog弹出框被遮罩层覆盖解决方法：在el-dialog标签里添加 :modal-append-to-body='false’ <el-dialog id="forget-pwd" title="重置密码" :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body="false"> 官网文档中提到：modal-append-to-body决定了遮罩层是否插入至 body 元素上

1 条评论您还未登录，请先登录后发表或查看评论

vant dialog组件实现弹框关闭销毁

qq_45989814的博客

12-06

2292

vant dialog弹框实现关闭销毁

van-popup封装组件时数据双向绑定问题

我的代码没有bug的博客

06-17

730

van-popup封装组件时数据双向绑定问题

vue+Vant，关闭Popup弹框，遮罩层并没有消失

最新发布

yaya07755的专栏

09-27

2517

点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。

uview组件u-action-sheet中closeOnClickOverlay属性不生效问题

wsdshdhdhd的博客

06-07

1875

如果你在某些组件上设置了closeOnClickOverlay属性(点击遮罩关闭弹窗)，你会发现这东西跟假的一样无论怎么点它都关不掉，这并不是bug，而是。之前官方回复中有提到，参考了好像是react，closeOnClickAction为 true 时，会触发close事件，，2.x组件不会处理任何关闭事件，全部交予用户自己处理。所以你需要自己实现close方法。查看官网示例后，点击遮罩层也没有隐藏，closeOnClickOverlay属性不生效。至于事件中需要如何去做，交给开发者自己使用。

Vue 移动端总结

m0_66430291的博客

03-11

771

展示频道分类的弹出层, 使用 Popup弹出层组件 <van-popup v-model="isShow" position="bottom" :style="{ height: '100%' }" closeable close-icon-position="top-left" > </van-popup>  频道编辑页面使用单元格 <van-cell></van-cell&g

Vant 2 - 解决 Dialog 弹出框组件点击 “确定“ 按钮后，模态框消失隐藏了（beforeClose 关闭前回调的使用，可阻止关闭）

王佳斌

08-31

8953

Vant 2 解决 Dialog 弹出框组件点击 "确定" 按钮后，模态框消失隐藏了（beforeClose 关闭前回调的使用，可阻止关闭）Vant Weapp Dialog 弹出框的before-close用法Dialog弹框案例vant中的dialog弹框怎么阻止弹框隐藏点击确定弹框就消失了Vant-ui组件 Dialog里的before-close阻止关闭“确认”验证失败时阻止对话框的关闭。...

微信小程序弹出层，右上角关闭按钮

07-14

微信小程序的弹出层设计通常包括一个可点击的按钮来触发弹出，以及在弹出层右上角设置一个关闭按钮，允许用户方便地关闭该层。本篇文章将深入探讨如何实现这一功能，并分享相关的知识点。首先，我们需要了解微信小...

解决VantUI popup 弹窗不弹出或无蒙层的问题

01-18

背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=

Vue中关闭弹窗组件时销毁并隐藏操作

11-19

背景：在dialog弹窗组件中执行mounted钩子，将数据初始化，等取消关闭弹窗后，发现mounted钩子不执行原因：在vue的生命周期中，在页面初始化的时候mounted只会执行一次，关闭弹窗页面并没有销毁，所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExperienceGroup"> </select-experience-group> 解决办法：就是隐藏dia

vue--vant组件库Dialog弹出框

ansaofen5650的博客

12-27

3573

安装vant UI框架： cnpm install vant –-save-dev 导入组件-在main.js里： import Vant from 'vant'; import'vant/lib/vant-css/index.css'; Vue.use('Vant') Dialog弹出框我们并不陌生，项目中的活动规则啊，登录注册啊，分享啊等等都会使用到弹出框...

模态弹窗点击掩层时，期望不关闭当前弹窗页面

xzln000000的博客

07-23

971

目的：点击弹窗的背景掩层时，不关闭当前的弹窗，减少误操作。在弹出的模态窗口，填写页面信息时，很容易误点击遮罩层导致弹出窗口会消失，如果我们不希望弹窗自动消失，而是在点击关闭按钮时才消失，需要设置下Dialog组件的“close-on-click-modal ”属性，默认为true,改为false即可。官方文档解释：案例： <el-dialog :visible.sync="dialogFormVisible" width="30%" :close-on-c.

vue3 + vant3.x 项目更新vant typescript---记录总结

weixin_43512977的博客

07-25

4166

vue3 + vant3.x 搭建项目

vant-weapp的＜van-popup＞中close-on-click-overlay失效

weixin_43951592的博客

03-08

678

vant

实现移动端调取摄像头拍照并截取图片上传

Schrodinge的博客

07-07

2105

实现移动端调取摄像头拍照并截取图片上传使用vant配合vue-cropper 实现调取摄像头拍照上传并截取图片做项目需求用到H5调用摄像头上传图片并且需要截取图片上传，使用vant 框架的文件上传组件Uploader 配合vue-cropper实现拍照截图上传功能。 npm install vue-cropper 组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 im

vue--图片预览器（vant）+ 安卓返回键处理

Wangdr的博客

03-04

7806

vant的图片预览运用详解： <div class="img_box" v-for='(item2,index) of item.images' :key='index'> <img :src="item2" alt="" @click="getImg(item.images,index)"> </div> //图片预览，通过传参的方式把

vant的ImagePreview图片预览不关闭

qq_42760581的博客

01-13

4715

当图片预览放大的时候，点击返回键返回路由，发现图片未关闭解决方法在通过函数调用 ImagePreview 时，传入closeOnPopstate为 true 即可 show() { ImagePreview({ closeOnPopstate: true }); }, ...

vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题

我总是词不达意的博客

06-17

7279

vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题。

vant UI popUp 弹出层关闭按钮自定义

07-12

在 Vant UI 中，可以通过自定义弹出层的关闭按钮来实现您的需求。以下是一种常见的方法： 1. 使用 `close-icon` 插槽来自定义关闭按钮的内容。 2. 在弹出层组件（如 Popup）中添加 `<template v-slot:close-icon>` 标签，然后在该标签内部自定义关闭按钮的内容。下面是一个示例代码： ```html <template> <Popup v-model="showPopup"> <template v-slot:close-icon>  <img src="custom-close-icon.png" @click="closePopup" /> </template>  <div>弹出层内容</div> </Popup> </template> <script> import { Popup } from 'vant'; export default { components: { Popup, }, data() { return { showPopup: false, }; }, methods: { closePopup() { this.showPopup = false; }, }, }; </script> ``` 在上面的示例中，我们在 `<template v-slot:close-icon>` 中自定义了一个关闭按钮，当用户点击该按钮时，调用了 `closePopup` 方法来关闭弹出层。您可以根据实际需求自定义关闭按钮的样式和行为。只需将自定义的关闭按钮内容放置在 `<template v-slot:close-icon>` 标签内，即可实现对关闭按钮的自定义。