mina-popups
,一个方便、轻量的 小程序 弹出组件集合
- 2021.02.22 v1.0.0 init package
- 2021.03.20 v1.0.1 1.popover添加box-shadow 2.popver.open支持传入area
mask: 100
popups: 200
所以 page 下一层的业务样式层叠顺序层级应 < 100
- 组件整合
popup
的通用逻辑:弹出位置,背景 mask,函数式控制显隐 - 并对 fixed 模式升级,不仅支持直接传入 left、top 控制
popup
位置,还支持传入 selector 自动设置popup
位置
left |
top |
right |
bottom |
center |
fixed selector
|
fixed left&top
|
- 在
popup
的基础上,完善气泡菜单的通用逻辑 - 使用者只需要在 slot 里添加提示或者菜单内容即可
-
popover
会根据触发位置自动改变展示方向
气泡菜单 | tooltip |
- 在
popover
的基础上,针对小程序引导添加我的小程序的场景,自动将 popover 定位到小程序胶囊下方 - 组件自动识别页面
navigationStyle: custom
属性,优化展示位,使用者无需关心适配问题胶囊气泡
mina-tools-client 包含 demo 展示的所有功能,觉的有帮助的可以给 demo 仓库也给个 Star 哈
大致可以分为 2 步:
- npm 安装
mina-popups
,开发工具构建 npm - 引入并使用
mina-popups
组件
npm install mina-popups
安装完成后,开发工具构建 npm
{
"usingComponents": {
"popup": "mina-popups/popup",
"popover": "mina-popups/popover",
"menu-popover": "mina-popups/menu-popover"
}
}
在 view 上利用 popups 处理渲染逻辑
<popup
show="{{popup.show}}"
position="{{popup.position}}"
mask="{{popup.mask}}"
catchScroll="{{popup.catchScroll}}"
tapMaskClose="{{popup.tapMaskClose}}"
scrollMaskClose="{{popup.scrollMaskClose}}"
maskColor="{{popup.maskColor}}"
selector="{{popup.selector}}"
left="{{popup.left}}"
top="{{popup.top}}"
unit="{{popup.unit}}"
bind:position="position"
>
<!-- popup-inner-wxml -->
</popup>
<popover
show="{{popover.show}}"
mask="{{popover.mask}}"
catchScroll="{{popover.catchScroll}}"
tapMaskClose="{{popover.tapMaskClose}}"
scrollMaskClose="{{popover.scrollMaskClose}}"
maskColor="{{popover.maskColor}}"
left="{{popover.left}}"
top="{{popover.top}}"
unit="{{popover.unit}}"
translateX="{{popover.translateX}}"
>
<!-- popover-inner-wxml -->
</popover>
<menu-popover show="{{show}}">
<!-- menu-popover-inner-wxml -->
</menu-popover>
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
show | Boolean | false | 是否显示 popup |
position | Enum | fixed | popup 的定位模式:fixed,center,left,right,top,bottom |
mask | Boolean | true | 是否显示 mask |
catchScroll | Boolean | true | 滑动 mask 是联动 page 滑动,先决条件是 mask=true |
tapMaskClose | Boolean | true | 点击 mask 是否关闭 popup,先决条件是 mask=true |
scrollMaskClose | Boolean | false | 滑动 mask 是否关闭 popup,先决条件是 mask=true |
maskColor | String | 'rgba(0, 0, 0, 0.6)' | mask 的颜色 |
selector | String | '' | position=fixed 时,使用 selector 来设置 popup 打开位置,默认为结点中心位置,具体数据会在 position 回调中返回 |
left | Number | 0 | position=fixed 时,直接使用 left+top 来控制 popup 的打开位置,先决条件是 selector='' |
top | Number | 0 | position=fixed 时,直接使用 left+top 来控制 popup 的打开位置,先决条件是 selector='' |
unit | String | 'px' | position=fixed 时,控制 left、top 的单位,默认 px,注意 selector 模式会自动更新 unit 为 px |
- popups 对于层叠顺序的设计为:mask-100,popup-200,所以为了保证 popups 在页面不被遮挡,Page 下一层的业务样式层叠顺序不要超过 100。