diff --git a/example/components/doc-page/index.js b/example/components/doc-page/index.js
new file mode 100644
index 00000000..187df4be
--- /dev/null
+++ b/example/components/doc-page/index.js
@@ -0,0 +1,8 @@
+Component({
+ properties: {
+ title: {
+ type: String,
+ value: ''
+ }
+ }
+});
diff --git a/example/components/doc-page/index.json b/example/components/doc-page/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/example/components/doc-page/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/example/components/doc-page/index.wxml b/example/components/doc-page/index.wxml
new file mode 100644
index 00000000..5a21e4ae
--- /dev/null
+++ b/example/components/doc-page/index.wxml
@@ -0,0 +1,6 @@
+
+ {{ title }}
+
+
+
+
diff --git a/example/components/doc-page/index.wxss b/example/components/doc-page/index.wxss
new file mode 100644
index 00000000..9b186794
--- /dev/null
+++ b/example/components/doc-page/index.wxss
@@ -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;
+}
diff --git a/example/pages/icon/index.json b/example/pages/icon/index.json
index 6a80c719..b2a90ffd 100644
--- a/example/pages/icon/index.json
+++ b/example/pages/icon/index.json
@@ -1,5 +1,7 @@
{
+ "navigationBarTitleText": "Icon 图标",
"usingComponents": {
- "zan-icon": "../../dist/icon/index"
+ "zan-icon": "../../dist/icon/index",
+ "doc-page": "../../components/doc-page/index"
}
}
diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml
index 4b71a57d..34ca4220 100644
--- a/example/pages/icon/index.wxml
+++ b/example/pages/icon/index.wxml
@@ -1,13 +1,8 @@
-
-
- ICON
-
-
-
-
-
-
- zan-icon-{{ icon }}
+
+
+
+
+ zan-icon-{{ icon }}
-
+
diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json
index ca281fb4..f61f05c8 100644
--- a/example/pages/popup/index.json
+++ b/example/pages/popup/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Popup 弹出层"
+ "navigationBarTitleText": "Popup 弹出层",
+ "usingComponents": {
+ "doc-page": "../../components/doc-page/index",
+ "zan-popup": "../../dist/popup/index"
+ }
}
+
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index db3bc03c..28ec446e 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,8 +1,5 @@
-
-
- POPUP
-
-
+
+
@@ -20,55 +17,73 @@
-
diff --git a/example/pages/popup/index.wxss b/example/pages/popup/index.wxss
index 26e9f409..06ec830f 100644
--- a/example/pages/popup/index.wxss
+++ b/example/pages/popup/index.wxss
@@ -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;
}
diff --git a/packages/common/pop-manager/index.js b/packages/common/pop-manager/index.js
new file mode 100644
index 00000000..26e392a8
--- /dev/null
+++ b/packages/common/pop-manager/index.js
@@ -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', {});
+ }
+ }
+});
diff --git a/packages/common/pop-manager/index.json b/packages/common/pop-manager/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/common/pop-manager/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/common/pop-manager/index.pcss b/packages/common/pop-manager/index.pcss
new file mode 100644
index 00000000..29694f01
--- /dev/null
+++ b/packages/common/pop-manager/index.pcss
@@ -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);
+}
diff --git a/packages/common/pop-manager/index.wxml b/packages/common/pop-manager/index.wxml
new file mode 100644
index 00000000..55602556
--- /dev/null
+++ b/packages/common/pop-manager/index.wxml
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/packages/icon/README.md b/packages/icon/README.md
index 3d746567..5edddb91 100644
--- a/packages/icon/README.md
+++ b/packages/icon/README.md
@@ -8,6 +8,7 @@
"zan-icon": "path/to/zanui-weapp/dist/icon/index"
}
}
+```
### 代码演示
可以在任意位置上使用 zan-icon 标签。通过 type 可以控制 icon 显示的图标
diff --git a/packages/popup/README.md b/packages/popup/README.md
index deda39f8..78091a24 100644
--- a/packages/popup/README.md
+++ b/packages/popup/README.md
@@ -1,54 +1,49 @@
## Popup 轻提示
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里使用特定的 wxml 结构
-```html
-
-
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-popup": "path/to/zanui-weapp/dist/popup/index"
+ }
+}
```
### 代码演示
+可以在页面任意位置上使用 zan-popup 标签。通过 show 可以控制弹窗是否展示
+```html
+
+```
#### popup 动画
-popup 额外支持了 上下左右 四种动画方式，通过在顶层加指定的类即可。使用方式如下
+popup 额外支持了 上下左右 四种动画方式，通过增加 type 属性即可控制。使用方式如下
```html
-
+
-
+
-
+
-
+
```
-#### 样式配置
-popup 中内容区域的样式，可以通过自定义 zan-popup__container 或者内部元素来实现。
-```html
-
-```
+### 具体参数和事件
+#### 参数说明
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| show | 是否显示弹出层 | Boolean | false | |
+| overlay | 是否显示遮罩层 | Boolean | false | |
+| closeOnClickOverlay | 遮罩层点击时，是否触发关闭事件 | Boolean | true | |
+| type | 弹出层动画方式, 可选`center`, `left`, `right`, `top`, `bottom` | String | center | |
+
+#### 事件说明
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| click-overlay | 遮罩层点击触发 | |
+| close | 遮罩层关闭时触发 | |
+
+
diff --git a/packages/popup/index.js b/packages/popup/index.js
new file mode 100644
index 00000000..71bb69f4
--- /dev/null
+++ b/packages/popup/index.js
@@ -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', {});
+ }
+ }
+});
diff --git a/packages/popup/index.json b/packages/popup/index.json
new file mode 100644
index 00000000..58663aee
--- /dev/null
+++ b/packages/popup/index.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "pop-manager": "../common/pop-manager/index"
+ }
+}
diff --git a/packages/popup/index.pcss b/packages/popup/index.pcss
index e15be8e5..8b137891 100644
--- a/packages/popup/index.pcss
+++ b/packages/popup/index.pcss
@@ -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);
-}
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
new file mode 100644
index 00000000..fa9fe642
--- /dev/null
+++ b/packages/popup/index.wxml
@@ -0,0 +1,8 @@
+
+
+