记录使用vant组件库的Popup的问题

最新推荐文章于 2024-04-25 15:53:37 发布
最新推荐文章于 2024-04-25 15:53:37 发布
阅读量434 收藏
点赞数 1
文章标签： vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/133795645
版权

使用过程中,需要实现点击遮罩层不关闭,智能点击关闭按钮或提交按钮才能关闭遮罩层,看了官网要使用close-on-click-overlay属性,

一开始的写法是错误的:

close-on-click-overlay='false'

这个写法明显传递的是string,

而官网中明确要求要穿布尔值,

所以需要在前面加冒号

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

重点:

即使这样也没实实现点击遮罩层不关闭的效果,找了半天不知道为什么,或许是改动太小,dist包没有更新,索性我直接将dist包删除,重新npm run build 打包了一次新的,这次就行了

fury_123
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant popup+其他组件的组合使用，及避坑指南
Joy 的博客
06-10 4694
做小程序开发，相信大家对于表单收集肯定不陌生。但是我们经常会碰到一些比较稍微复杂的选项，并不是简单的填一些文字，数字，或者选择一下是否就能搞定的。可能需要交互判断，或者结合其他自定义组件才能很好的展示出来，但这种组件往往都很占空间，如果一股脑都叠罗汉似的放到表单里，页面会显得非常拥挤。那么如何解决这个问题呢？常见的方式有，popup弹出层、跳转新页面等等。其中跳转页面的加载卡顿和不连续感会影响用户体验，除非是单独的多项收集页面，信息量很大那另说。所以在实际应用中，popup弹出层是最常见的...
小程序van-popup组件使用
挚友阳光的博客
02-26 8980
小程序van-popup组件使用，个人使用方式仅供参考！ <van-popup show="{{ popup }}" round position="bottom" custom-style="height: auto;" safe-area-inset-bottom close-on-click-overlay bind:click-overlay="overlayUp" > <view class="content"> 内容 </view&g
【Vue】动态创建Vue组件并挂载在指定文档位置
qq_25757181的博客
07-22 1604
vue 编程式动态创建Vue组件，并挂载在指定文档位置。
【前端疑难杂症bug——vant-popup避坑】
爪爪爪爪哇的博客
01-19 860
当在vant-popup中再嵌套一个popup。子popup的高度会受限于父popup。会导致子的元素出现遮挡，即个别元素无法正常展示。
vant弹出层popup无法挂载到指定节点
最新发布
qq_43222063的博客
04-25 324
在使用vant的popup组件时，希望其只显示在某个div中，否则连标题栏也遮盖住了，使用vant自带的属性，发现并不生效。通过控制台可以看出，popup已经挂载上去了，但popup的样式为position:fixed，这显然不合理，此时，popup内容的位置已经正常，但遮罩层位置还不对，用下组件自带的方法，完整代码如下。解决办法，只能自己修改样式了。页面也没有达到期望的效果。
vue+Vant，关闭Popup弹框，遮罩层并没有消失
yaya07755的专栏
09-27 2032
点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。
BUG解决：微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效
weixin_45752941的博客
02-10 8476
微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效
vant，popover点击外面无法关闭？
qq_42555422的博客
11-16 1203
根据上面这个issue知道。因为vant基本还是用于移动的，所以事件都是touch的，click就触发不了了。最近在使用vant2.0，但是是在pc端使用。发现popover怎么都无法点击外面关闭。也就是close-on-click-outside属性。解决方法安装@vant/touch-emulator。
vue vant Popup 弹出层 与 Picker 选择器 的完美结合 实现多级列表选择
热门推荐
pxhing的博客
05-12 1万+
前言：
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
mpvue-vant 是一个专门为 Mpvue 开发者准备的仓库，记录了如何在Mpvue中使用Vant Weapp组件库的实践经验和注意事项。这个教程由多位开发者共同完成，确保所有Vant Weapp组件在Mpvue中都能正常工作。 ### 二、使用...
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
小程序使用vant组件库；构建npm，附源码
06-29
使用vant组件库的小程序demo
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
微信小程序使用Vant Weapp组件库的方法步骤
10-16
主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
使用van-popup封装的popup弹出层
小迪的博客
03-28 2313
html部分 <van-popup v-model="show" round position="bottom" :style="{ height: `${hight}%` }" > <div class="popup_content"> <div class="title"> <div class="content"> <div class="text">{{title}}&
vant popup弹出层多选功能
weixin_38673922的博客
04-14 2105
一、效果图 二、代码块 <template> <div> <van-button @click="btn" size="mini">显示弹出层</van-button> <van-popup round v-model:show="show" position="bottom" :style="{ height: '50%'}" > <van-picker show-too
vant-tab组件搭配van-popup组件弹出只在第一个tab页面显示的问题
时光有伱，记忆成花~
11-04 2528
今天遇到一问题，在有vant-tab 的第三页调弹出组件van-popup，发现没有反应，原来弹出的内容展现在第一个tab页面了。 解决：其实很简单，只需要给vant-popup 添加一个挂载节点 <van-popup v-model="show" get-container="#app" /> //或 <van-popup v-model="show" get-container="body" /> ...
uniapp中使用vant 组件库
05-10
Uniapp中使用vant组件库可以通过以下步骤实现： 1. 安装vant组件库：在项目根目录下打开命令行工具，执行以下命令安装vant组件库。 ```bash npm i vant -S ``` 2. 在uniapp项目中引入vant组件库：在uniapp项目中的`App.vue`文件中引入vant组件库。 ```vue <template> <div> <van-button>按钮</van-button> <!-- 其他vant组件 --> </div> </template> <script> import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); </script> <style> /* 全局样式 */ </style> ``` 3. 在需要使用vant组件的页面中引入组件：在需要使用vant组件的页面中引入对应的组件。 ```vue <template> <div> <van-button>按钮</van-button> <!-- 其他vant组件 --> </div> </template> <script> import { Button } from 'vant'; export default { components: { [Button.name]: Button, //其他vant组件 }, //其他配置 }; </script> <style> /* 页面样式 */ </style> ``` 这样就可以在uniapp项目中使用vant组件库了。需要注意的是，vant组件库中的样式可能会与uniapp项目中的样式产生冲突，需要做好样式的管理和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值