mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[refactor] Popup: 升级为自定义组件 (#166)
* 封装 doc-page, 方便写文档 * add pop manager * popup upgrade * 更新 README * add empty line
This commit is contained in:
Yao
GitHub
parent
86152d45ce
commit
d471681e8f
8
example/components/doc-page/index.js
Normal file
8
example/components/doc-page/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
Component({
|
||||
properties: {
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
});
|
||||
3
example/components/doc-page/index.json
Normal file
3
example/components/doc-page/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
6
example/components/doc-page/index.wxml
Normal file
6
example/components/doc-page/index.wxml
Normal file
@ -0,0 +1,6 @@
|
||||
<view class="doc-container">
|
||||
<view class="doc-title">{{ title }}</view>
|
||||
<view class="doc-content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
23
example/components/doc-page/index.wxss
Normal file
23
example/components/doc-page/index.wxss
Normal file
@ -0,0 +1,23 @@
|
||||
.doc-container {
|
||||
background: #F9F9F9;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
margin: 10px 15px;
|
||||
line-height: 25px;
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Icon 图标",
|
||||
"usingComponents": {
|
||||
"zan-icon": "../../dist/icon/index"
|
||||
"zan-icon": "../../dist/icon/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">ICON</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
|
||||
<view class="example-icon">
|
||||
<zan-icon type="{{ icon }}"></zan-icon>
|
||||
</view>
|
||||
<view class="icon-classname">zan-icon-{{ icon }}</view>
|
||||
<doc-page title="ICON">
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
|
||||
<view class="example-icon">
|
||||
<zan-icon type="{{ icon }}"></zan-icon>
|
||||
</view>
|
||||
<view class="icon-classname">zan-icon-{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Popup 弹出层"
|
||||
"navigationBarTitleText": "Popup 弹出层",
|
||||
"usingComponents": {
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"zan-popup": "../../dist/popup/index"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">POPUP</view>
|
||||
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<doc-page title="POPUP">
|
||||
<view class="zan-btns" style="margin-top: 10vh;">
|
||||
<button class="zan-btn" bindtap="togglePopup">
|
||||
弹出popup
|
||||
</button>
|
||||
@ -20,55 +17,73 @@
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="zan-popup {{ showPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" bindtap="togglePopup"></view>
|
||||
<view class="zan-popup__container popup-example--center">
|
||||
<view class="zan-btns">
|
||||
<!-- 中间弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showPopup }}"
|
||||
bindclose="togglePopup"
|
||||
>
|
||||
<view class="pop-example__container">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" bindtap="togglePopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--left zan-popup zan-popup--left {{ showLeftPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" bindtap="toggleLeftPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
<!-- 左侧弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showLeftPopup }}"
|
||||
type="left"
|
||||
bindclose="toggleLeftPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--left">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" catchtap="toggleLeftPopup">
|
||||
<button class="zan-btn" bindtap="toggleLeftPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--right zan-popup zan-popup--right {{ showRightPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" catchtap="toggleRightPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
<!-- 右侧弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showRightPopup }}"
|
||||
type="right"
|
||||
bindclose="toggleRightPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--right">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" catchtap="toggleRightPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--top zan-popup zan-popup--top {{ showTopPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" catchtap="toggleTopPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
内容
|
||||
</view>
|
||||
</view>
|
||||
<!-- 顶部弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showTopPopup }}"
|
||||
overlay="{{ false }}"
|
||||
type="top"
|
||||
bindclose="toggleTopPopup"
|
||||
>
|
||||
<view class="pop-example--top">内容</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--bottom zan-popup zan-popup--bottom {{ showBottomPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" catchtap="toggleBottomPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
<!-- 底部弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showBottomPopup }}"
|
||||
type="bottom"
|
||||
bindclose="toggleBottomPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--bottom">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" catchtap="toggleBottomPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -1,30 +1,21 @@
|
||||
.popup-example--center {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.popup-example--right .zan-popup__container {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.popup-example--left .zan-popup__container {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.popup-example--top .zan-popup__container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
.pop-example--top {
|
||||
width: 100vw;
|
||||
padding: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.popup-example--top .zan-popup__mask {
|
||||
opacity: 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-example--bottom .zan-popup__container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
.pop-example__container {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pop-example__container--bottom {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.pop-example__container--left, .pop-example__container--right {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
23
packages/common/pop-manager/index.js
Normal file
23
packages/common/pop-manager/index.js
Normal file
@ -0,0 +1,23 @@
|
||||
Component({
|
||||
properties: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
// 内容从哪个方向出，可选 center top bottom left right
|
||||
type: {
|
||||
type: String,
|
||||
value: 'center'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMaskClick() {
|
||||
this.triggerEvent('clickmask', {});
|
||||
}
|
||||
}
|
||||
});
|
||||
3
packages/common/pop-manager/index.json
Normal file
3
packages/common/pop-manager/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
78
packages/common/pop-manager/index.pcss
Normal file
78
packages/common/pop-manager/index.pcss
Normal file
@ -0,0 +1,78 @@
|
||||
.pop {
|
||||
visibility: hidden;
|
||||
}
|
||||
.pop--show {
|
||||
visibility: visible;
|
||||
}
|
||||
.pop__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
}
|
||||
.pop__mask--hide {
|
||||
background: transparent;
|
||||
}
|
||||
.pop__container {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transform-origin: center;
|
||||
transition: all 0.4s ease;
|
||||
z-index: 11;
|
||||
opacity: 0;
|
||||
}
|
||||
.pop--show .pop__container {
|
||||
opacity: 1;
|
||||
}
|
||||
.pop--show .pop__mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 显示方向 */
|
||||
/* 左侧popup */
|
||||
.pop--left .pop__container {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
.pop--show.pop--left .pop__container {
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
/* 右侧popup */
|
||||
.pop--right .pop__container {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
left: auto;
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
.pop--show.pop--right .pop__container {
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
/* 底部popup */
|
||||
.pop--bottom .pop__container {
|
||||
top: auto;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
.pop--show.pop--bottom .pop__container {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
/* 顶部popup */
|
||||
.pop--top .pop__container {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -100%, 0);
|
||||
}
|
||||
.pop--show.pop--top .pop__container {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
11
packages/common/pop-manager/index.wxml
Normal file
11
packages/common/pop-manager/index.wxml
Normal file
@ -0,0 +1,11 @@
|
||||
<view
|
||||
class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}"
|
||||
>
|
||||
<view
|
||||
class="pop__mask {{ overlay ? '' : 'pop__mask--hide' }}"
|
||||
bindtap="handleMaskClick"
|
||||
></view>
|
||||
<view class="pop__container">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
@ -8,6 +8,7 @@
|
||||
"zan-icon": "path/to/zanui-weapp/dist/icon/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
可以在任意位置上使用 zan-icon 标签。通过 type 可以控制 icon 显示的图标
|
||||
|
||||
@ -1,54 +1,49 @@
|
||||
## Popup 轻提示
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
在需要使用的页面里使用特定的 wxml 结构
|
||||
```html
|
||||
<!-- 在需要展示时，增加 zan-popup--show 类即可 -->
|
||||
<view class="zan-popup zan-popup--show">
|
||||
<!-- 遮罩层，有需要可以在遮罩层上增加点击事件 -->
|
||||
<view class="zan-popup__mask"></view>
|
||||
<!-- 弹出层的内容放在此元素内 -->
|
||||
<view class="zan-popup__container"></view>
|
||||
</view>
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-popup": "path/to/zanui-weapp/dist/popup/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
可以在页面任意位置上使用 zan-popup 标签。通过 show 可以控制弹窗是否展示
|
||||
```html
|
||||
<zan-popup show="{{ show }}"></zan-popup>
|
||||
```
|
||||
#### popup 动画
|
||||
popup 额外支持了 上下左右 四种动画方式，通过在顶层加指定的类即可。使用方式如下
|
||||
popup 额外支持了 上下左右 四种动画方式，通过增加 type 属性即可控制。使用方式如下
|
||||
```html
|
||||
<!-- 从底部弹出的弹层 -->
|
||||
<view class="zan-popup zan-popup--bottom">
|
||||
<!-- 填充 popup 内容 -->
|
||||
</view>
|
||||
<zan-popup type="bottom" show="{{ show }}"></zan-popup>
|
||||
|
||||
<!-- 从顶部弹出的弹层 -->
|
||||
<view class="zan-popup zan-popup--top">
|
||||
<!-- 填充 popup 内容 -->
|
||||
</view>
|
||||
<zan-popup type="top" show="{{ show }}"></zan-popup>
|
||||
|
||||
<!-- 从左侧弹出的弹层 -->
|
||||
<view class="zan-popup zan-popup--left">
|
||||
<!-- 填充 popup 内容 -->
|
||||
</view>
|
||||
<zan-popup type="left" show="{{ show }}"></zan-popup>
|
||||
|
||||
<!-- 从右侧弹出的弹层 -->
|
||||
<view class="zan-popup zan-popup--right">
|
||||
<!-- 填充 popup 内容 -->
|
||||
</view>
|
||||
<zan-popup type="right" show="{{ show }}"></zan-popup>
|
||||
```
|
||||
|
||||
#### 样式配置
|
||||
popup 中内容区域的样式，可以通过自定义 zan-popup__container 或者内部元素来实现。
|
||||
```html
|
||||
<view class="zan-popup zan-popup--show">
|
||||
<!-- 遮罩层，有需要可以在遮罩层上增加点击事件 -->
|
||||
<view class="zan-popup__mask"></view>
|
||||
<!-- 弹出层的内容放在此元素内 -->
|
||||
<view class="zan-popup__container demo-contaienr" style="padding: 15px;"></view>
|
||||
</view>
|
||||
```
|
||||
### 具体参数和事件
|
||||
#### 参数说明
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 是否显示弹出层 | Boolean | false | |
|
||||
| overlay | 是否显示遮罩层 | Boolean | false | |
|
||||
| closeOnClickOverlay | 遮罩层点击时，是否触发关闭事件 | Boolean | true | |
|
||||
| type | 弹出层动画方式, 可选`center`, `left`, `right`, `top`, `bottom` | String | center | |
|
||||
|
||||
#### 事件说明
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click-overlay | 遮罩层点击触发 | |
|
||||
| close | 遮罩层关闭时触发 | |
|
||||
|
||||
|
||||
|
||||
35
packages/popup/index.js
Normal file
35
packages/popup/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
Component({
|
||||
properties: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
|
||||
// 弹出方向
|
||||
type: {
|
||||
type: String,
|
||||
value: 'center'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMaskClick() {
|
||||
this.triggerEvent('click-overlay', {});
|
||||
|
||||
if (!this.data.closeOnClickOverlay) {
|
||||
return;
|
||||
}
|
||||
this.triggerEvent('close', {});
|
||||
}
|
||||
}
|
||||
});
|
||||
6
packages/popup/index.json
Normal file
6
packages/popup/index.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"pop-manager": "../common/pop-manager/index"
|
||||
}
|
||||
}
|
||||
@ -1,75 +1 @@
|
||||
.zan-popup {
|
||||
visibility: hidden;
|
||||
}
|
||||
.zan-popup--show {
|
||||
visibility: visible;
|
||||
}
|
||||
.zan-popup__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
}
|
||||
.zan-popup__container {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background: #fff;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transform-origin: center;
|
||||
transition: all 0.4s ease;
|
||||
z-index: 11;
|
||||
opacity: 0;
|
||||
}
|
||||
.zan-popup--show .zan-popup__container {
|
||||
opacity: 1;
|
||||
}
|
||||
.zan-popup--show .zan-popup__mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 左侧popup */
|
||||
.zan-popup--left .zan-popup__container {
|
||||
left: 0;
|
||||
top: auto;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.zan-popup--show.zan-popup--left .zan-popup__container {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* 右侧popup */
|
||||
.zan-popup--right .zan-popup__container {
|
||||
right: 0;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.zan-popup--show.zan-popup--right .zan-popup__container {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* 底部popup */
|
||||
.zan-popup--bottom .zan-popup__container {
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
.zan-popup--show.zan-popup--bottom .zan-popup__container {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* 顶部popup */
|
||||
.zan-popup--top .zan-popup__container {
|
||||
top: 0;
|
||||
left: auto;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.zan-popup--show.zan-popup--top .zan-popup__container {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
8
packages/popup/index.wxml
Normal file
8
packages/popup/index.wxml
Normal file
@ -0,0 +1,8 @@
|
||||
<pop-manager
|
||||
show="{{ show }}"
|
||||
type="{{ type }}"
|
||||
overlay="{{ overlay }}"
|
||||
bindclickmask="handleMaskClick"
|
||||
>
|
||||
<slot></slot>
|
||||
</pop-manager>
|
||||
Loading…
x
Reference in New Issue
Block a user