更新记录

1.0.9(2023-03-16)

修复h5端,定位会超出navabr,tabbar页面问题

1.0.8(2023-03-05)

新增hideside,hideside方法,修复特殊情况下弹窗无法覆盖问题

1.0.7(2023-02-22)

新增fill属性

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.2.15 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

m-wrap布局容器

有些时候我们需要一些特殊的布局,比如tab永远固定在页面顶部,确认按钮永远固定在页面底部,m-wrap可以一个组件解决所有问题,只需要传入slot,就可以自动布局,自动规避安全底部

使用方式

<template>
    <m-wrap ref="wrapRef" bg-color="#F5F5F5" footer-bg-color="#fff">

        <template #header>
            <view>此处内容永远固定在页面头部</view>
        </template>

        <template #mask>
            <view>此处内容为遮罩层展示内容(此内容距离顶部永远是header的高度)</view>
        </template>

        <view>页面内容</view>       

        <template #footer>
            <view>此处内容永远固定在页面底部</view>
        </template>
    </m-wrap>
</template>

Props

属性名 类型 默认值 必填 说明
bgColor String transparent 容器背景颜色
headerBgColor String transparent 头部插槽背景颜色
footerBgColor String transparent 脚部插槽背景颜色
shadeColor String rgba(0,0,0,0.6) 遮罩层背景颜色
fill Boolean false 内容是否填充界面

Events

名称 说明
maskShow mask显示成功
maskHide mask隐藏成功
hideSide 隐藏头部或脚部,接受参数header,footer
showSide 显示头部或脚部,接受参数header,footer

Slots

插槽 说明
default 内容区域
header 头部(永远固定在头部的内容)
footer 脚部(永远固定在脚部的内容)
mask 遮罩层

方法

方法名 参数说明 说明
mask(参数) Boolean, 'show','hide' 调用此方法可以弹出mask层,参数可传入true,false或者show,hide

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问