van-popup 全屏的解决方法

最新推荐文章于 2024-07-26 10:14:44 发布

AlexKain

最新推荐文章于 2024-07-26 10:14:44 发布

阅读量1.3w

点赞数 3

分类专栏： vue 文章标签： van-popup全屏

本文链接：https://blog.csdn.net/webfullstack/article/details/87090640

版权

vue 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

WeChat

7 篇文章 0 订阅

订阅专栏

vant

3 篇文章 0 订阅

订阅专栏

在vant官网文档上看了好久也没有找到全屏的弹窗组件,没有解决,只能自己搞了,其实也很简单

代码部分

<van-popup v-model="isShow" position="top" class="overlay80vh" :overlay="true">
      内容
</van-popup>

CSS样式

.overlay80vh{
  height:80vh;
}

效果图
在这里插入图片描述

写在后面

到了这里其实也看到了可以自定义样式,可以将height:80vh的值改为100vh就是全屏了 ?

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AlexKain

关注关注

3
点赞
踩
4

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Dialog 去除边框以及全设置全屏时隐藏状态栏

迷途可达C的博客

11-15

1万+

Dialog与PopupWindow都是可以弹窗的控件，有一些区别，本人喜欢用Dialog 可是用的时候发现有一些问题需要解决和总结一下，所以写了这个总结，方便下次自己使用。 Dialog 去除边框 Dialog有时候用的时候会四周出现边框，很难看，所以上网查了一下，总结出来：先新建一个Style @null true

小程序van-popup组件使用

挚友阳光的博客

02-26

9100

小程序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

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

H5 van-popup全屏弹窗，模拟页面回退效果，支持左上角返回按钮，适用物理返回，侧滑与底部返回键

zthtt的博客

06-09

4103

H5 van-popup全屏弹窗，模拟页面回退效果，支持左上角返回按钮，适用物理返回，侧滑与底部返回键

使用van-popup修改样式为自定义弹框

qq_43235503的博客

07-26

301

使用van-popup修改样式为自定义弹框

设置Dialog全屏显示

骑猪追大象

01-27

2663

Android Dialog全屏显示

vant tabs切换属性，导致popup弹出框位置没有全屏展示

qq_40269801的博客

03-27

384

问题：点击一个按钮后，想要的是一个全屏展示的弹出框去展示iframe的附件；但现在并没有全屏展示；transform:translate3d(0%, 0px, 0px) 是这个属性影响的，但这个属性是tabs切换用的属性；最后解决办法：只要挂载到body上，就可以了。因为我项目中vant版本是v2的，但我看的文档是v4的，所以一直没生效，以为这个部分不受版本影响，也是刚开始用vant，所以很生疏。

vant4的组件气泡弹出框van-popover，在列表中遍历后点击一个全部/显示隐藏，解决办法

feiyu的博客

06-27

710

vue开发，vant4组件库中的 van-popover组件，遍历后显示隐藏问题

nuxt+vant用来van-popup移动端滚动失效

weixin_45148145的博客

03-09

625

问题描述：移动端官网跳转路由后的页面，页面无法滚动

domv-popup:显示相对于“拥有”元素具有固定位置（弹出窗口）的 DOM 元素。这是一个巧妙的解决方法，用于堆叠 CSS 中的上下文限制（z-index、overflow

06-18

这是一个巧妙的解决方法，用于在 CSS 中堆叠上下文限制（z-index、overflow:hidden 等）这是一个 CommonJS 模块，你需要使用。用法每个Popup实例都是一个简单的元素，具有固定的定位（ position:fixed ）。此...

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

01-18

背景 ####组件PopupTime.vue ... <van v-model=popup1show position=bottom overlay=true click-overlay=clickOverlay> <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=

vue2+vant+van-popup+van-index-bar实现国家选择

m0_71750740的博客

08-30

1025

使用vant中van-index-bar实现国家按照首字母排序选择

Vant 2：van-popover组件气泡弹窗溢出屏幕的问题

weixin_48226213的博客

11-16

1954

本文提供一种补丁方案处理vant 2：van-popover组件气泡弹窗溢出屏幕的问题

van-popup弹出层在ios被遮挡问题

cczz66的博客

12-03

6547

适配 ios 遇坑，van-popup 弹出层中组件内容被覆盖，而且键盘弹起时 header 被顶出屏幕，通过调整样式层级可以解决部分覆盖问题，但是 header 被顶出屏幕一直没解决；后来仔细翻看文档，发现官方预留了 get-container 属性，可以把弹出层挂载到指定元素上，设置get-container="body"，把组件挂载到最外层boby上问题解决。 ...

全屏显示Dialog的设置

zhenglingkun的专栏

12-07

1万+

下面是Dialog的style: @null true true true false #FFFFFF 下面是创建Dialog的代码： Dialog dialog = new Dialog(Activity.this, R.style.mydialog)

Dialog全屏总结

weixin_30306905的博客

03-20

Dialog 全屏的探究dialog很多问题依然想不通，无解。 1.WindowManager WindowManager windowManager = getWindow().getWindowManager(); 　　 2.Window Window window = getWindow(); window.setLayout(WindowManager.L...

dialog弹框全屏功能

lu_qingshan的博客

08-23

1417

Element弹框全屏功能给dialog弹框加上全屏功能 html <el-dialog :visible.sync="imgVisible" class="publish-dialog" width="820px" ref="imgDialog"> <template #title> <span>修改图片-{{imgtion.sellerSku}}</span> <span class="zoom-btn"

全屏Dialog的几种实现