首页 > 其他分享 >vant组件Popup 弹出层单独设置 van-overlay和van-popup样式

vant组件Popup 弹出层单独设置 van-overlay和van-popup样式

时间:2023-05-30 18:01:05浏览次数:36  
标签:Popup van vant overlay background 弹框 设置 255

<van-popup
   v-model="showInfoBox"
   position="top"
   class="top_"
 >

vant组件Popup 弹出层单独设置 van-overlay和van-popup样式_全局设置

默认情况下会自带灰色蒙版 如果一个页面的布局 需要调用很多个弹框的话 有的弹框不想要这个蒙版背景就需要通过 这样设置 相当于全局设置了
.van-overlay{
    background-color: transparent;
    width: 0;
    height: 0;
}
这样如果有单独的样式需要设置就没法操作 用自带的属性 来设置
:overlay-style="{background:'rgba(255,255,255,0)'}"
直接去除 背景颜色

<van-popup
  v-model="showInfoBox"
  position="top"
  class="top_"
  :overlay-style="{background:'rgba(255,255,255,0)'}"
>

vant组件Popup 弹出层单独设置 van-overlay和van-popup样式_全局设置_02

标签:Popup,van,vant,overlay,background,弹框,设置,255
From: https://blog.51cto.com/u_16104790/6381208

相关文章

  • 中国生物科技公司【Advanced Biomed】申请纳斯达克IPO上市
    猛兽财经获悉,总部位于台湾台南的生物科技公司【AdvancedBiomed】近期已向美国证券交易委员会(SEC)提交招股书,申请在纳斯达克IPO上市,股票代码为(ADVB)。AdvancedBiomed计划通过此次纳斯达克IPO上市募集1.495亿美元的资金。公司业务总部位于台湾台南的AdvancedBiomed旨在开发一种专......
  • 前端自定义弹框组件、自定义弹框内容alertView popup组件
    快速实现前端自定义弹框、自定义弹框内容alertViewpopup组件,请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12491 效果图如下:  代码如下:#自定义弹框使用方法####HTML代码部分```html<template><viewclass="content"><imageclass="logo"sr......
  • vue中使用vant中PullRefresh 下拉刷新踩坑
    问题PullRefresh的内容未填满屏幕时,只有一部分区域可以下拉:<template><divclass="appCon"><van-pull-refreshclass="pageRefresh"v-model="isLoading"success-text="刷新成功"@refresh="onRefre......
  • 直播app开发,基于van-uploader封装的文件上传图片压缩组件
    直播app开发,基于van-uploader封装的文件上传图片压缩组件1、调用<template>  <div>    <compress-uploaderv-model="fileList":compressSwitch="true":quality="0.5":maxCount="3"/>  </div></template> <......
  • Yii2-app-advanced的配置文件优先级
    Yii2高级模板中支持多套环境配置,并且有优先级重写覆盖默认有两种dev和prod,在应用目录environments 下Yii2中的config配置文件(main.php和params.php)具有极大的灵活配置,结合配置文件的加载顺序1、使用约定 -应用目录下有config/main.php和params.php是一个全职全集......
  • delphi TcxGridPopupMenu控件学习笔记
    TcxGridPopupMenu控件用来给cxgrid设置右键菜单的.它长这样属性面板长这样: 默认的系统菜单长这样: 这菜单上面有好几个选项我不想要,怎么办?隐藏它呗!private{Privatedeclarations}procedureStdHeaderMenuPopup(Sender:TObject);//-----------------......
  • vue项目结合vant,实现上拉加载更多,下拉刷新
    上拉加载思路:引入vant组件上拉list后端数据做了分页处理,获取接口数据,渲染到页面上,(此处只会显示一页的数据)设置属性去实现效果,loading,finished为vant组件中提供的每次滚动到底部后把页面数+1,发送一次请求获取新分页数据.获取完数据,将新获取的数据跟上一页获取的数据做......
  • vue3+vant3封装省市区组件
    因为后台返回的数据格式和vant不一致,所以自己遍历循环得到自己想到的格式。省市区的接口并不是一个以children格式,一次性全部获取,而是选择市的时候需要得到省的id,一层一层请求接口才能得到省市区。 父组件:1<selectArea2@addressOnFinish="onChangeArea"3......
  • Vantui---在HTML中引入使用
    最近在开发项目,由于项目是使用模板开发的,而不是用前后端分离开发的。但是就目前来说,很少有一款能够在移动端体验比较好的JS框架,特别是在移动端的下拉选择,以及三级联动的处理。想来想去,想到了有赞的UI框架,看是否支持html引入使用,经过测试是可行的:文档地址:https://vant-contrib.g......
  • vue2+van2 实现带搜索的级联选择组件
    级联选择组件新建组件-子项CasadeSelect/CasadeSelectItem.vue<template><divclass="container-list-item"><divclass="icon"><divclass="checkbox"><svg-iconv-if="curChecked"ic......