diff --git a/README.md b/README.md
index 00adfecc..377e3248 100644
--- a/README.md
+++ b/README.md
@@ -44,114 +44,58 @@ npm run dev
详细使用文档，请参考 [快速上手](https://www.youzanyun.com/zanui/weapp)
### 组件分类介绍
-根据功能的不同，可以将组件大致的分为4类：
+根据功能的不同，可以将组件大致的分为2类：
-#### 1. 简单组件
+#### 1. 正常引用
-如按钮组件，只要按照wxml结构写就好了
-
-~~~html
+如按钮组件，只需要在页面中引入按钮自定义组件即可
+```json
+{
+ "usingComponents": {
+ "zan-button": "/path/to/zanui-weapp/dist/btn/index"
+ }
+}
+```
+```html
-按钮
-~~~
+按钮
+```
-#### 2. 复杂组件
-如加载更多组件，需要先引入定义好的模版，然后给模版传递数据
+#### 2. API类组件
-~~~html
-
+如 Toast 组件，需要先在页面上引入自定义组件。之后在逻辑运行时，直接调用方法即可展示
+```json
+{
+ "usingComponents": {
+ "zan-toast": "/path/to/zanui-weapp/dist/toast/index"
+ }
+}
+```
+```html
+
+```
-
-
+将对应的 Toast 的函数引入页面，就可以直接调用来展示 Toast 了
-
-
+```js
+// example/toast/index.js
-
-
+const Toast = require('/path/to/zanui-weapp/dist/toast/toast');
-
-
-~~~
-
-
-
-#### 3. 带事件回调的组件
-
-如数量选择组件，需要先引入模版，然后给模版传递数据
-
-~~~html
-
-
-
-
-
-~~~
-
-然后通过`Zan.Stepper`把相关回调注入到页面中
-
-~~~js
-// example/stepper/index.js
-
-var Zan = require('path/to/zanui-weapp/dist/index');
-
-Page(Object.assign({}, Zan.Stepper, {
- data: {
- stepper: {
- stepper: 10,
- min: 1,
- max: 20
- },
- },
-
- handleZanStepperChange(e) {
- // 如果页面有多个Stepper组件，则通过唯一componentId进行索引
- var compoenntId = e.componentId;
- var stepper = e.stepper;
-
- this.setData({
- 'stepper.stepper': stepper
+Page({
+ showToast() {
+ Toast({
+ selector: '#zan-toast-test',
+ message: 'toast内容'
});
}
-}));
-~~~
+});
-
-
-#### 4. API类组件
-
-如Toast组件，需要先引入模版，并在页面上使用。
-
-> 注意`zanToast`这个数据也是通过`Zan.Toast`注入到页面的
-
-~~~html
-
-
-
-
-显示toast
-
-
-~~~
-
-将API注入到页面后，就可以通过`this`来直接调用相应的API了
-
-~~~js
-
-
-var Zan = require('path/to/zanui-weapp/dist/index');
-
-Page(Object.assign({}, Zan.Toast, {
- showToast() {
- this.showZanToast('toast的内容');
- }
-}));
-
-~~~
+```
diff --git a/doc.config.js b/doc.config.js
index 06ee7b45..4ed5a344 100644
--- a/doc.config.js
+++ b/doc.config.js
@@ -84,6 +84,6 @@ module.exports = {
}
}
],
- include: {}
+ include: { loading: require('./packages/loading/README.md') }
}
}
\ No newline at end of file
diff --git a/example/app.json b/example/app.json
index 5705f003..89f50d91 100644
--- a/example/app.json
+++ b/example/app.json
@@ -12,7 +12,7 @@
"pages/helper/index",
"pages/icon/index",
"pages/layout/index",
- "pages/loadmore/index",
+ "pages/loading/index",
"pages/noticebar/index",
"pages/panel/index",
"pages/popup/index",
diff --git a/example/components/doc-page/index.js b/example/components/doc-page/index.js
new file mode 100644
index 00000000..ea94b4e7
--- /dev/null
+++ b/example/components/doc-page/index.js
@@ -0,0 +1,12 @@
+Component({
+ properties: {
+ title: {
+ type: String,
+ value: ''
+ },
+
+ withoutPadding: {
+ type: Boolean
+ }
+ }
+});
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..47677f72
--- /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..4c5c6404
--- /dev/null
+++ b/example/components/doc-page/index.wxss
@@ -0,0 +1,27 @@
+.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;
+}
+
+.doc-content--without-pd {
+ padding: 15px 0;
+}
diff --git a/example/pages/actionsheet/index.js b/example/pages/actionsheet/index.js
index 1366ea32..b4af6c71 100644
--- a/example/pages/actionsheet/index.js
+++ b/example/pages/actionsheet/index.js
@@ -1,27 +1,22 @@
-const { Actionsheet, extend } = require('../../dist/index');
-
-Page(extend({}, Actionsheet, {
+Page({
data: {
- baseActionsheet: {
- show: false,
- cancelText: '关闭 Action',
- closeOnClickOverlay: true,
- componentId: 'baseActionsheet',
- actions: [{
- name: '选项1',
- subname: '选项描述语1',
- className: 'action-class',
- loading: false
- }, {
- name: '选项2',
- subname: '选项描述语2',
- className: 'action-class',
- loading: false
- }, {
- name: '去分享',
- openType: 'share'
- }]
- }
+ show: false,
+ cancelWithMask: true,
+ actions: [{
+ name: '选项1',
+ subname: '选项描述语1',
+ className: 'action-class',
+ loading: false
+ }, {
+ name: '选项2',
+ subname: '选项描述语2',
+ className: 'action-class',
+ loading: false
+ }, {
+ name: '去分享',
+ openType: 'share'
+ }],
+ cancelText: '关闭 Action'
},
onShareAppMessage() {
@@ -31,36 +26,32 @@ Page(extend({}, Actionsheet, {
};
},
- toggleActionsheet() {
+ openActionsheet() {
this.setData({
- 'baseActionsheet.show': true
+ 'show': true
});
},
- handleZanActionsheetCancel({ componentId }) {
+ closeActionSheet() {
this.setData({
- [`${componentId}.show`]: false
+ 'show': false
});
},
- handleZanActionsheetClick({ componentId, index }) {
- console.log(`item index ${index} clicked`);
-
+ clickAction({ detail }) {
// 如果是分享按钮被点击, 不处理关闭
+ const { index } = detail;
if (index === 2) {
return;
}
-
this.setData({
- [`${componentId}.actions[${index}].loading`]: true
+ [`actions[${index}].loading`]: true
});
-
setTimeout(() => {
this.setData({
- [`${componentId}.show`]: false,
- [`${componentId}.actions[${index}].loading`]: false
+ [`show`]: false,
+ [`actions[${index}].loading`]: false
});
}, 1500);
}
-
-}));
+});
diff --git a/example/pages/actionsheet/index.json b/example/pages/actionsheet/index.json
index 175d8120..46d35da7 100644
--- a/example/pages/actionsheet/index.json
+++ b/example/pages/actionsheet/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Actionsheet 行动按钮"
+ "navigationBarTitleText": "Actionsheet 行动按钮",
+ "usingComponents": {
+ "zan-actionsheet": "../../dist/actionsheet/index",
+ "zan-button": "../../dist/btn/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/actionsheet/index.wxml b/example/pages/actionsheet/index.wxml
index 52c5659d..965dc4ce 100644
--- a/example/pages/actionsheet/index.wxml
+++ b/example/pages/actionsheet/index.wxml
@@ -1,15 +1,18 @@
-
-
-
-
- ACTIONSHEET
+
-
+
-
-
-
+
+
diff --git a/example/pages/actionsheet/index.wxss b/example/pages/actionsheet/index.wxss
new file mode 100644
index 00000000..91f2fc3c
--- /dev/null
+++ b/example/pages/actionsheet/index.wxss
@@ -0,0 +1,3 @@
+.tiny {
+ background: rgba(30, 30, 40, 0.7) !important;
+}
diff --git a/example/pages/badge/index.json b/example/pages/badge/index.json
index 9aa95ebd..701c0b96 100644
--- a/example/pages/badge/index.json
+++ b/example/pages/badge/index.json
@@ -1,3 +1,6 @@
{
- "navigationBarTitleText": "Badge 徽章"
+ "navigationBarTitleText": "Badge 徽章",
+ "usingComponents": {
+ "zan-badge": "../../dist/badge/index"
+ }
}
diff --git a/example/pages/badge/index.wxml b/example/pages/badge/index.wxml
index cae30010..2257aa74 100644
--- a/example/pages/badge/index.wxml
+++ b/example/pages/badge/index.wxml
@@ -4,22 +4,22 @@
-
+
+ 9
-
- 9
+
+ 19
-
- 19
-
-
-
-
- 99+
+
+ 99+
diff --git a/example/pages/badge/index.wxss b/example/pages/badge/index.wxss
index afbb2e63..9e5458b5 100644
--- a/example/pages/badge/index.wxss
+++ b/example/pages/badge/index.wxss
@@ -1,6 +1,7 @@
.demo {
- padding: 40px 0;
+ padding: 40px 10px;
display: flex;
+ flex-wrap: wrap;
}
.demo__item {
flex: 1;
diff --git a/example/pages/btn/index.json b/example/pages/btn/index.json
index b92ec995..30791fdc 100644
--- a/example/pages/btn/index.json
+++ b/example/pages/btn/index.json
@@ -1,3 +1,6 @@
{
- "navigationBarTitleText": "Button 按钮"
+ "navigationBarTitleText": "Button 按钮",
+ "usingComponents": {
+ "zan-button": "/dist/btn/index"
+ }
}
diff --git a/example/pages/btn/index.wxml b/example/pages/btn/index.wxml
index 7eb0aa96..b4e65e14 100644
--- a/example/pages/btn/index.wxml
+++ b/example/pages/btn/index.wxml
@@ -5,51 +5,51 @@
普通按钮
-
-
-
-
+ 取消订单
+ 确认付款
+ 确认付款
+ 确认付款
大号按钮，没有边框线及圆角
-
-
-
+ 确认付款
+ 立即购买
+ 立即购买
小号按钮
-
-
+ 取消订单
+ 确认付款
迷你按钮
-
-
-
-
+ 取消订单
+ 确认付款
+ 确认付款
+ 确认付款
Loading
-
-
-
-
+ 取消订单
+ 确认付款
+ 确认付款
+ 确认付款
Disabled
-
-
-
-
+ 取消订单
+ 确认付款
+ 确认付款
+ 确认付款
diff --git a/example/pages/capsule/index.json b/example/pages/capsule/index.json
index a0bcb97a..707b2637 100644
--- a/example/pages/capsule/index.json
+++ b/example/pages/capsule/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Capsule 胶囊"
+ "navigationBarTitleText": "Capsule 胶囊",
+ "usingComponents": {
+ "zan-panel": "../../dist/panel/index",
+ "zan-capsule": "../../dist/capsule/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/capsule/index.wxml b/example/pages/capsule/index.wxml
index c32e76c3..4b4f9cc2 100644
--- a/example/pages/capsule/index.wxml
+++ b/example/pages/capsule/index.wxml
@@ -1,22 +1,15 @@
-
+
-
-
- CAPSULE
-
- 基本用法
-
-
-
-
+
+
+
+
-
+
- 自定义颜色
-
-
-
+
+
+
-
-
-
\ No newline at end of file
+
+
diff --git a/example/pages/capsule/index.wxss b/example/pages/capsule/index.wxss
index 1141c678..2d6b3fd2 100644
--- a/example/pages/capsule/index.wxss
+++ b/example/pages/capsule/index.wxss
@@ -1,3 +1,7 @@
+.capsule-demo {
+ padding: 15px 0;
+}
+
.zan-capsule + .zan-capsule {
margin-left: 10px;
}
diff --git a/example/pages/card/index.json b/example/pages/card/index.json
index 79a0a3c6..f90b0bd1 100644
--- a/example/pages/card/index.json
+++ b/example/pages/card/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Card 卡片"
+ "navigationBarTitleText": "Card 卡片",
+ "usingComponents": {
+ "zan-card": "../../dist/card/index",
+ "zan-panel": "../../dist/panel/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/card/index.wxml b/example/pages/card/index.wxml
index 938cb936..3f6d71d9 100644
--- a/example/pages/card/index.wxml
+++ b/example/pages/card/index.wxml
@@ -1,35 +1,30 @@
-
+
- CARD
+
+
+
-
-
-
-
+
+
+
+
+
+
+ 我是自定义内容区域
-
-
- ¥ 999.99
-
- 红烧牛肉【虚拟商品】【有库存】【有sku】
-
-
-
-
- x2
-
- 3000克 50%
-
-
-
-
- 已发货
-
-
-
-
-
-
+
+
+
diff --git a/example/pages/card/index.wxss b/example/pages/card/index.wxss
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/example/pages/card/index.wxss
@@ -0,0 +1 @@
+
diff --git a/example/pages/cell/index.json b/example/pages/cell/index.json
index 0f202a39..522c020c 100644
--- a/example/pages/cell/index.json
+++ b/example/pages/cell/index.json
@@ -1,3 +1,10 @@
{
- "navigationBarTitleText": "Cell 单元格"
+ "navigationBarTitleText": "Cell 单元格",
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ "zan-icon": "../../dist/icon/index",
+ "zan-panel": "../../dist/panel/index",
+ "zan-cell-group": "../../dist/cell-group/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml
index 3cfb2e84..681d9829 100644
--- a/example/pages/cell/index.wxml
+++ b/example/pages/cell/index.wxml
@@ -1,118 +1,43 @@
-
+
-
+
+
+
- CELL
+
+
+
-
-
- 单行列表
-
-
+
+
+
-
-
- 单行列表
- 详细信息
-
-
+
+
+
+
+
-
-
-
- 单行列表
- 详细信息
-
-
+
+
+
-
-
-
- 单行列表
- 附加描述
-
- 详细信息
-
-
+
+
+
-
-
- 单行列表
-
-
-
-
-
-
- 开关
-
-
-
-
-
-
-
-
- 单行列表
- 详细信息
-
-
-
-
-
- 多行列表
-
-
- 多行列表
-
-
- 多行列表
-
-
-
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
-
-
-
- 多行列表
-
-
-
- 多行列表
-
-
-
- 多行列表
-
-
-
-
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/cell/index.wxss b/example/pages/cell/index.wxss
new file mode 100644
index 00000000..8f5622b7
--- /dev/null
+++ b/example/pages/cell/index.wxss
@@ -0,0 +1,4 @@
+.cell-panel-demo {
+ display: block;
+ margin-top: 15px;
+}
\ No newline at end of file
diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js
index 10377da9..cb7a68cb 100644
--- a/example/pages/dashboard/config.js
+++ b/example/pages/dashboard/config.js
@@ -27,8 +27,8 @@ export default {
name: 'Layout 布局',
path: '/pages/layout/index'
}, {
- name: 'Loadmore 加载',
- path: '/pages/loadmore/index'
+ name: 'loading 加载',
+ path: '/pages/loading/index'
}, {
name: 'Noticebar 通告栏',
path: '/pages/noticebar/index'
diff --git a/example/pages/dashboard/index.json b/example/pages/dashboard/index.json
new file mode 100644
index 00000000..f9b0ac60
--- /dev/null
+++ b/example/pages/dashboard/index.json
@@ -0,0 +1,8 @@
+{
+ "navigationBarTitleText": "ZanUI-WeApp",
+ "usingComponents": {
+ "zan-panel": "../../dist/panel/index",
+ "zan-cell": "../../dist/cell/index",
+ "zan-cell-group": "../../dist/cell-group/index"
+ }
+}
diff --git a/example/pages/dashboard/index.wxml b/example/pages/dashboard/index.wxml
index 369dba4e..d9b1e79d 100644
--- a/example/pages/dashboard/index.wxml
+++ b/example/pages/dashboard/index.wxml
@@ -3,13 +3,17 @@
- {{ group.title }}
-
-
- {{ item.name }}
-
-
-
+
+
+
+
+
diff --git a/example/pages/dialog/index.js b/example/pages/dialog/index.js
index f768fa14..55b75e87 100644
--- a/example/pages/dialog/index.js
+++ b/example/pages/dialog/index.js
@@ -1,30 +1,33 @@
-const Zan = require('../../dist/index');
+const Dialog = require('../../dist/dialog/dialog');
-Page(Object.assign({}, Zan.Dialog, {
+Page({
toggleBaseDialog() {
- this.showZanDialog({
+ Dialog({
title: '弹窗',
- content: '这是一个模态弹窗\n换行',
- showCancel: true
+ message: '这是一个模态弹窗\n换行',
+ selector: '#zan-base-dialog',
+ showCancelButton: true
}).then(() => {
- console.log('=== dialog ===', 'type: confirm');
+ console.log('=== dialog resolve ===', 'type: confirm');
}).catch(() => {
- console.log('=== dialog ===', 'type: cancel');
+ console.log('=== dialog reject ===', 'type: cancel');
});
},
toggleWithoutTitleDialog() {
- this.showZanDialog({
- content: '这是一个模态弹窗'
+ Dialog({
+ message: '这是一个模态弹窗',
+ selector: '#zan-no-title-dialog'
}).then(() => {
- console.log('=== dialog without title ===', 'type: confirm');
+ console.log('=== dialog ===', 'type: confirm');
});
},
toggleButtonDialog() {
- this.showZanDialog({
+ Dialog({
title: '弹窗',
- content: '这是一个模态弹窗',
+ message: '这是一个模态弹窗',
+ selector: '#zan-button-dialog',
buttons: [{
text: '现金支付',
color: 'red',
@@ -43,9 +46,10 @@ Page(Object.assign({}, Zan.Dialog, {
},
toggleVerticalDialog() {
- this.showZanDialog({
+ Dialog({
title: '弹窗',
- content: '这是一个模态弹窗',
+ message: '这是一个模态弹窗',
+ selector: '#zan-vertical-dialog',
buttonsShowVertical: true,
buttons: [{
text: '现金支付',
@@ -63,4 +67,4 @@ Page(Object.assign({}, Zan.Dialog, {
console.log('=== dialog with vertical buttons ===', `type: ${type}`);
});
}
-}));
+});
diff --git a/example/pages/dialog/index.json b/example/pages/dialog/index.json
index b5bc7f6b..6df5df6c 100644
--- a/example/pages/dialog/index.json
+++ b/example/pages/dialog/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Dialog 弹出框"
+ "navigationBarTitleText": "Dialog 弹出框",
+ "usingComponents": {
+ "doc-page": "../../components/doc-page/index",
+ "zan-dialog": "../../dist/dialog/index",
+ "zan-button": "../../dist/btn/index"
+ }
}
diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml
index ac1c1431..41a48074 100644
--- a/example/pages/dialog/index.wxml
+++ b/example/pages/dialog/index.wxml
@@ -1,4 +1,18 @@
-
+
+
+ 基础 Dialog
+ Dialog - 无标题
+ Dialog - 自定义显示按钮
+ Dialog - 按钮纵向排布
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/field/config.js b/example/pages/field/config.js
index 9a284ce6..1f49d0f9 100644
--- a/example/pages/field/config.js
+++ b/example/pages/field/config.js
@@ -54,6 +54,7 @@ module.exports = {
// Form 中使用输入框
form: {
name: {
+ name: 'name',
placeholder: '请输入收货人姓名',
componentId: 'form:test:name'
},
diff --git a/example/pages/field/index.js b/example/pages/field/index.js
index f49f8486..28ef3a4b 100644
--- a/example/pages/field/index.js
+++ b/example/pages/field/index.js
@@ -1,7 +1,6 @@
-const Zan = require('../../dist/index');
const config = require('./config');
-Page(Object.assign({}, Zan.Field, {
+Page({
data: {
config,
value: 'test',
@@ -24,21 +23,21 @@ Page(Object.assign({}, Zan.Field, {
},
handleZanFieldChange(e) {
- const { componentId, detail } = e;
+ const { detail } = e;
- console.log('[zan:field:change]', componentId, detail);
+ console.log('[zan:field:change]', detail);
},
handleZanFieldFocus(e) {
- const { componentId, detail } = e;
+ const { detail } = e;
- console.log('[zan:field:focus]', componentId, detail);
+ console.log('[zan:field:focus]', detail);
},
handleZanFieldBlur(e) {
- const { componentId, detail } = e;
+ const { detail } = e;
- console.log('[zan:field:blur]', componentId, detail);
+ console.log('[zan:field:blur]', detail);
},
clearInput() {
@@ -80,4 +79,4 @@ Page(Object.assign({}, Zan.Field, {
});
}
-}));
+});
diff --git a/example/pages/field/index.json b/example/pages/field/index.json
index ced7e35b..cc654398 100644
--- a/example/pages/field/index.json
+++ b/example/pages/field/index.json
@@ -1,3 +1,9 @@
{
- "navigationBarTitleText": "Field 输入框"
+ "navigationBarTitleText": "Field 输入框",
+ "usingComponents": {
+ "zan-button": "../../dist/btn/index",
+ "zan-field": "../../dist/field/index",
+ "zan-panel": "../../dist/panel/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml
index 1e5c8a2b..0b447cf0 100644
--- a/example/pages/field/index.wxml
+++ b/example/pages/field/index.wxml
@@ -1,67 +1,93 @@
-
-
-
- Field
-
+
- 基础用法
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+ 清除输入
- 无标题输入框
-
-
-
+
+
+
+
-
+ 清除输入
- 圆角输入框
-
-
-
-
-
- Form 表单中的field应用
-
-
+ -->
+
diff --git a/example/pages/helper/index.json b/example/pages/helper/index.json
index cdee37ee..9d900d28 100644
--- a/example/pages/helper/index.json
+++ b/example/pages/helper/index.json
@@ -1,3 +1,9 @@
{
- "navigationBarTitleText": "Helper 基础样式"
+ "navigationBarTitleText": "Helper 基础样式",
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ "zan-panel": "../../dist/panel/index",
+ "zan-cell-group": "../../dist/cell-group/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/helper/index.wxml b/example/pages/helper/index.wxml
index a40f3a54..295a60d4 100644
--- a/example/pages/helper/index.wxml
+++ b/example/pages/helper/index.wxml
@@ -1,76 +1,59 @@
-
-
+
-
-
- zan-pull-right: 往右靠
-
-
+
+ zan-pull-right: 往右靠
+
-
-
- zan-text-deleted：被删除的效果
-
-
+
+ zan-text-deleted：被删除的效果
+
-
-
-
- zan-font-12：字号12
- zan-font-bold：再来个加粗
-
+
+
+ zan-font-12：字号12
+ zan-font-bold：再来个加粗
-
+
-
-
-
- zan-font-16：字号16
- zan-font-bold：再来个加粗
-
+
+
+ zan-font-16：字号16
+ zan-font-bold：再来个加粗
-
+
-
-
-
- 字体颜色
- zan-c-red: 红色
- zan-c-gray: 灰色
- zan-c-gray-dark: 再灰一点点
- zan-c-gray-darker: 更深的灰色
- zan-c-black: 黑色
- zan-c-blue: 蓝色
- zan-c-green: 绿色
-
+
+
+ 字体颜色
+ zan-c-red: 红色
+ zan-c-gray: 灰色
+ zan-c-gray-dark: 再灰一点点
+ zan-c-gray-darker: 更深的灰色
+ zan-c-black: 黑色
+ zan-c-blue: 蓝色
+ zan-c-green: 绿色
-
+
-
-
- zan-arrow：箭头
-
-
-
+
+ zan-arrow：箭头
+
+
-
-
-
- zan-ellipsis：单行点点点
- ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-
+
+
+ zan-ellipsis：单行点点点
+ ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-
+
-
-
-
- zan-ellipsis--l2：单行点点点
- ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-
+
+
+ zan-ellipsis--l2：单行点点点
+ ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-
+
-
+
diff --git a/example/pages/icon/index.json b/example/pages/icon/index.json
index 0d34d293..b2a90ffd 100644
--- a/example/pages/icon/index.json
+++ b/example/pages/icon/index.json
@@ -1,3 +1,7 @@
{
- "navigationBarTitleText": "Icon 图标"
+ "navigationBarTitleText": "Icon 图标",
+ "usingComponents": {
+ "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 6e1191ba..5d0f1d45 100644
--- a/example/pages/icon/index.wxml
+++ b/example/pages/icon/index.wxml
@@ -1,11 +1,8 @@
-
-
- ICON
-
-
-
-
- zan-icon-{{ icon }}
+
+
+
+
+ zan-icon-{{ icon }}
-
+
diff --git a/example/pages/icon/index.wxss b/example/pages/icon/index.wxss
index 9369da59..66308e8c 100644
--- a/example/pages/icon/index.wxss
+++ b/example/pages/icon/index.wxss
@@ -4,11 +4,14 @@
float: left;
text-align: center;
}
+
+.example-icon {
+ font-size: 24px;
+ padding: 10px;
+ color: rgba(69, 90, 100, .8);
+}
+
.icon-classname {
color: #999;
font-size: 10px;
}
-.zan-icon {
- font-size: 24px;
- margin: 20px;
-}
diff --git a/example/pages/layout/index.json b/example/pages/layout/index.json
new file mode 100644
index 00000000..368b703f
--- /dev/null
+++ b/example/pages/layout/index.json
@@ -0,0 +1,8 @@
+{
+ "usingComponents": {
+ "zan-row": "../../dist/row/index",
+ "zan-col": "../../dist/col/index",
+ "zan-panel": "../../dist/panel/index",
+ "doc-page": "../../components/doc-page/index"
+ }
+}
diff --git a/example/pages/layout/index.wxml b/example/pages/layout/index.wxml
index dfcb5303..24ca7110 100644
--- a/example/pages/layout/index.wxml
+++ b/example/pages/layout/index.wxml
@@ -1,33 +1,21 @@
-
+
- LAYOUT
+
+
+ span: 8
+ span: 8
+ span: 8
+
+
- 基础用法
- Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度
-
-
-
- span: 8
-
-
- span: 8
-
-
- span: 8
-
-
-
+
+
+ span: 4
+ offset: 4, span: 10
+
+
+ offset: 12, span: 12
+
+
- offset
- 添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同
-
-
- span: 4
- offset: 4, span: 10
-
-
- offset: 12, span: 12
-
-
-
-
+
diff --git a/example/pages/layout/index.wxss b/example/pages/layout/index.wxss
index 5eab3147..ff64efce 100644
--- a/example/pages/layout/index.wxss
+++ b/example/pages/layout/index.wxss
@@ -1,4 +1,4 @@
-.zan-col {
+.custom-zan-col {
line-height: 30px;
text-align: center;
background-color: #39a9ed;
@@ -6,6 +6,6 @@
color: #fff;
}
-.zan-col:nth-child(even) {
+.custom-zan-col:nth-child(even) {
background-color: #66c6f2;
}
diff --git a/example/pages/loading/index.js b/example/pages/loading/index.js
new file mode 100644
index 00000000..9555c825
--- /dev/null
+++ b/example/pages/loading/index.js
@@ -0,0 +1 @@
+Page({})
\ No newline at end of file
diff --git a/example/pages/loading/index.json b/example/pages/loading/index.json
new file mode 100644
index 00000000..33ad67d1
--- /dev/null
+++ b/example/pages/loading/index.json
@@ -0,0 +1,6 @@
+{
+ "navigationBarTitleText": "loading 加载",
+ "usingComponents": {
+ "zan-loading": "../../dist/loading/index"
+ }
+}
\ No newline at end of file
diff --git a/example/pages/loading/index.wxml b/example/pages/loading/index.wxml
new file mode 100644
index 00000000..c620cfef
--- /dev/null
+++ b/example/pages/loading/index.wxml
@@ -0,0 +1,21 @@
+
+
+ LOADING
+
+ circle
+
+
+
+
+ spinner
+
+
+
+
+ dot
+
+
+
+
+
+
diff --git a/example/pages/loading/index.wxss b/example/pages/loading/index.wxss
new file mode 100644
index 00000000..434bad3d
--- /dev/null
+++ b/example/pages/loading/index.wxss
@@ -0,0 +1,14 @@
+.container {
+ background: #f0f0f0;
+}
+.loading-example {
+ display: flex;
+ flex-direction: row;
+ background: transparent;
+}
+.loading-example zan-loading {
+ flex: 1;
+}
+.no-flex {
+ display: block;
+}
\ No newline at end of file
diff --git a/example/pages/loadmore/index.js b/example/pages/loadmore_bak/index.js
similarity index 100%
rename from example/pages/loadmore/index.js
rename to example/pages/loadmore_bak/index.js
diff --git a/example/pages/loadmore/index.json b/example/pages/loadmore_bak/index.json
similarity index 100%
rename from example/pages/loadmore/index.json
rename to example/pages/loadmore_bak/index.json
diff --git a/example/pages/loadmore/index.wxml b/example/pages/loadmore_bak/index.wxml
similarity index 100%
rename from example/pages/loadmore/index.wxml
rename to example/pages/loadmore_bak/index.wxml
diff --git a/example/pages/noticebar/index.js b/example/pages/noticebar/index.js
index 346675c3..f3edc73f 100644
--- a/example/pages/noticebar/index.js
+++ b/example/pages/noticebar/index.js
@@ -1,23 +1,28 @@
-var Zan = require('../../dist/index');
-
-Page(Object.assign({}, Zan.NoticeBar, {
+Page({
data: {
- movable: {
+ bar1: {
+ text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
+ scrollable: true,
+ delay: 1000
+ },
+ bar2: {
+ text: '足协杯战线连续第2年上演广州德比战',
+ color: '#fff',
+ backgroundColor: '#000'
+ },
+ bar3: {
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
},
- static1: {
- text: '足协杯战线连续第2年上演广州德比战'
+ bar4: {
+ text: '带icon的公告',
+ leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'
},
- static2: {
- text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+ bar5: {
+ text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
+ leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png',
+ mode: 'closeable',
+ scrollable: true,
+ speed: 10
}
- },
- onShow() {
- // 滚动通告栏需要initScroll
- this.initZanNoticeBarScroll('movable');
- // initScroll的通告栏如果宽度足够显示内容将保持静止
- this.initZanNoticeBarScroll('static1');
- // 不进行initScroll的通告栏也将保持静止
- // this.initZanNoticeBarScroll('static2');
}
-}))
+})
diff --git a/example/pages/noticebar/index.json b/example/pages/noticebar/index.json
index 0b9753c7..a1a7c61e 100644
--- a/example/pages/noticebar/index.json
+++ b/example/pages/noticebar/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Noticebar 通告栏"
+ "navigationBarTitleText": "Noticebar 通告栏",
+ "usingComponents": {
+ "zan-noticebar": "../../dist/noticebar/index",
+ "zan-panel": "../../dist/panel/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/noticebar/index.wxml b/example/pages/noticebar/index.wxml
index 915fa634..e2cb5b0d 100644
--- a/example/pages/noticebar/index.wxml
+++ b/example/pages/noticebar/index.wxml
@@ -1,30 +1,54 @@
-
-
+
- NOTICEBAR
+
+
+
- 滚动通告栏
-
-
-
+
+
+
- 静止通告栏1
-
-
-
+
+
+
- 静止通告栏2
-
-
-
+
+
+
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/panel/index.json b/example/pages/panel/index.json
index ac111a79..f495ed85 100644
--- a/example/pages/panel/index.json
+++ b/example/pages/panel/index.json
@@ -1,3 +1,7 @@
{
- "navigationBarTitleText": "Panel 面板"
+ "navigationBarTitleText": "Panel 面板",
+ "usingComponents": {
+ "zan-panel": "../../dist/panel/index",
+ "doc-page": "../../components/doc-page/index"
+ }
}
diff --git a/example/pages/panel/index.wxml b/example/pages/panel/index.wxml
index 7487d109..83df0b2f 100644
--- a/example/pages/panel/index.wxml
+++ b/example/pages/panel/index.wxml
@@ -1,22 +1,15 @@
-
+
- PANEL
+
+ PANEL 内容区域
+
- 标题
-
- 内容
-
+
+ 带有标题的 PANEL
+
-
- 内容
-
-
-
+
无边框的panel
-
+
-
- 内容
-
-
-
+
diff --git a/example/pages/panel/index.wxss b/example/pages/panel/index.wxss
new file mode 100644
index 00000000..1d35f5af
--- /dev/null
+++ b/example/pages/panel/index.wxss
@@ -0,0 +1,4 @@
+.panel-example {
+ display: block;
+ margin-top: 15px;
+}
diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json
index ca281fb4..5a6d5b1a 100644
--- a/example/pages/popup/index.json
+++ b/example/pages/popup/index.json
@@ -1,3 +1,9 @@
{
- "navigationBarTitleText": "Popup 弹出层"
+ "navigationBarTitleText": "Popup 弹出层",
+ "usingComponents": {
+ "doc-page": "../../components/doc-page/index",
+ "zan-popup": "../../dist/popup/index",
+ "zan-button": "../../dist/btn/index"
+ }
}
+
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index db3bc03c..433dbd88 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,74 +1,89 @@
-
-
- POPUP
-
-
-
-
-
-
-
+
-
diff --git a/packages/badge/README.md b/packages/badge/README.md
index c67972f6..90cf2a4d 100644
--- a/packages/badge/README.md
+++ b/packages/badge/README.md
@@ -1,15 +1,33 @@
## Badge 徽章
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-badge": "path/to/zanui-weapp/dist/badge/index"
+ }
+}
```
### 代码演示
+
+#### 基础用法
```html
-
- 10
+
+ 10
+
+```
+
+#### 自定义参数
+```html
+
+ 10
```
@@ -19,3 +37,11 @@
height: 100px;
}
```
+
+### API
+| 参数 | 说明 | 类型 | 默认值 |
+|-----|-----|-----|-----|
+| color | 字体颜色 | String | `#fff`
+| background-color | 背景颜色 | String | `#f44`
+| font-size | 字体大小 | Number | 10
+| box-shadow | 为了更好的控制宽度，使用了box-shadow来实现badge的边框，可以根据box-shadow的语法自行修改颜色和宽度 | String | `0 0 0 2px #fff`
diff --git a/packages/badge/index.js b/packages/badge/index.js
new file mode 100644
index 00000000..c4c7f361
--- /dev/null
+++ b/packages/badge/index.js
@@ -0,0 +1,25 @@
+const DEFAULT_COLOR = '#fff';
+const DEFAULT_BACKGROUND_COLOR = '#f44';
+const DEFAULT_FONT_SIZE = 10;
+const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff';
+
+Component({
+ properties: {
+ color: {
+ type: String,
+ value: DEFAULT_COLOR
+ },
+ backgroundColor: {
+ type: String,
+ value: DEFAULT_BACKGROUND_COLOR
+ },
+ fontSize: {
+ type: Number,
+ value: DEFAULT_FONT_SIZE
+ },
+ boxShadow: {
+ type: String,
+ value: DEFAULT_BOX_SHADOW
+ }
+ }
+});
diff --git a/packages/badge/index.json b/packages/badge/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/badge/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/badge/index.pcss b/packages/badge/index.pcss
index 7bce89e1..8ede3dc7 100644
--- a/packages/badge/index.pcss
+++ b/packages/badge/index.pcss
@@ -1,9 +1,9 @@
.zan-badge {
position: relative;
}
-.zan-badge__count {
+.zan-badge__text {
position: absolute;
- top: -16px;
+ top: -0.8em;
right: 0px;
height: 1.6em;
min-width: 1.6em;
@@ -11,7 +11,7 @@
padding: 0 .4em;
font-size: 20px;
border-radius: .8em;
- background: #FF4444;
+ background: #f44;
color: #fff;
text-align: center;
white-space: nowrap;
diff --git a/packages/badge/index.wxml b/packages/badge/index.wxml
new file mode 100644
index 00000000..193791e7
--- /dev/null
+++ b/packages/badge/index.wxml
@@ -0,0 +1,8 @@
+
+
+
+
+
diff --git a/packages/btn/README.md b/packages/btn/README.md
index 30d9662f..0515669d 100644
--- a/packages/btn/README.md
+++ b/packages/btn/README.md
@@ -1,42 +1,60 @@
## Button 按钮
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 json 文件中配置button组件
+```json
+"usingComponents": {
+ "zan-button": "/dist/btn/index"
+}
```
+### 属性
+
+| 名称 | 类型 | 是否必须 | 默认 | 描述 |
+|---------|---------|----------|------|-------|
+| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger |
+| size | String | 否 | 空 | 按钮大小，值有large、small、mini |
+| plain | Boolean | 否 | false | 按钮是否镂空，默认为false |
+| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false |
+| loading | Boolean | 否 | false | 按钮加载状态，默认为false |
+
### 代码演示
#### 基础用法
```html
-
+取消订单
```
#### 按钮类型
按钮支持额外的三种类型 primary, danger, warn
```html
-
-
-
+确认付款
+确认付款
+确认付款
```
#### 按钮大小
按钮支持额外三种大小 large, small, mini
```html
-
-
-
+确认付款
+取消订单
+确认付款
```
#### 其他
-按钮支持镂空状态，可以直接使用 zan-btn--plain
+按钮镂空状态
```html
-
+确认付款
```
-同时支持加载状态，可以使用 zan-btn--loading 获得
+
+按钮加载状态
```html
-
+确认付款
+```
+
+按钮禁用状态
+```html
+确认付款
```
diff --git a/packages/btn/index.js b/packages/btn/index.js
new file mode 100644
index 00000000..8795e4ee
--- /dev/null
+++ b/packages/btn/index.js
@@ -0,0 +1,35 @@
+
+Component({
+ externalClasses: ['custom-class'],
+ properties: {
+ type: {
+ type: String,
+ value: '',
+ },
+ size: {
+ type: String,
+ value: '',
+ },
+ plain: {
+ type: Boolean,
+ value: false,
+ },
+ disabled: {
+ type: Boolean,
+ value: false,
+ },
+ loading: {
+ type: Boolean,
+ value: false,
+ },
+ openType: {
+ type: String,
+ value: ''
+ }
+ },
+ methods: {
+ handleTap() {
+ this.triggerEvent('btnclick');
+ }
+ }
+});
\ No newline at end of file
diff --git a/packages/btn/index.json b/packages/btn/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/btn/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/btn/index.pcss b/packages/btn/index.pcss
index 034051ad..c62145c8 100644
--- a/packages/btn/index.pcss
+++ b/packages/btn/index.pcss
@@ -15,6 +15,7 @@
text-decoration: none;
text-align: center;
vertical-align: middle;
+ overflow: visible;
}
.zan-btn::after {
@mixin hairline;
@@ -150,9 +151,5 @@
}
/* :last-child */
-.zan-btn--last-child,
-.zan-btn:last-child {
- margin-bottom: 0;
- margin-right: 0;
-}
+
diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml
new file mode 100644
index 00000000..ab1e53a6
--- /dev/null
+++ b/packages/btn/index.wxml
@@ -0,0 +1,8 @@
+
diff --git a/packages/capsule/README.md b/packages/capsule/README.md
index dfa17018..78878608 100644
--- a/packages/capsule/README.md
+++ b/packages/capsule/README.md
@@ -1,32 +1,23 @@
## Capsule 胶囊
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的模板里引入组件库模板
-```html
-
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-capsule": "/packages/capsule/index"
+ }
+}
```
### 代码演示
-
-#### 基础用法
-可以用 leftText 和 rightText 控制左右文案
+Panel 提供了一块白色的展示区域，使用方式如下
```html
-
-```
-
-#### 使用不同类型胶囊
-按钮支持额外的三种类型 primary, danger, warn
-```html
-
-```
-
-#### 自定义颜色
-通过 color 熟悉，可以自定义显示的颜色
-```html
-
+
```
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| type | capsule的主体颜色 | String | ''（有danger这个主题色） | |
+| color | 自定义capsule颜色 | String | - | |
+| leftText | 左侧文案 | String | - | |
+| rightText | 右侧文案 | String | - | |
diff --git a/packages/capsule/index.js b/packages/capsule/index.js
new file mode 100644
index 00000000..9826f235
--- /dev/null
+++ b/packages/capsule/index.js
@@ -0,0 +1,28 @@
+Component({
+ /**
+ * 组件的属性列表
+ * 用于组件自定义设置
+ */
+ properties: {
+ // 颜色状态
+ type: {
+ type: String,
+ value: ''
+ },
+ // 自定义颜色
+ color :{
+ type : String,
+ value : ''
+ },
+ // 左侧内容
+ leftText :{
+ type : String ,
+ value : ''
+ },
+ // 右侧内容
+ rightText :{
+ type : String ,
+ value : ''
+ }
+ }
+})
diff --git a/packages/capsule/index.json b/packages/capsule/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/capsule/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/capsule/index.wxml b/packages/capsule/index.wxml
index 0667e88e..abee3b42 100644
--- a/packages/capsule/index.wxml
+++ b/packages/capsule/index.wxml
@@ -1,18 +1,17 @@
-
-
-
- {{ leftText }}
- {{ rightText }}
-
-
- {{ leftText }}
- {{ rightText }}
-
-
-
+
+
+ {{ leftText }}
+ {{ rightText }}
+
+
+ {{ leftText }}
+ {{ rightText }}
+
+
+
diff --git a/packages/card/README.md b/packages/card/README.md
index e9c548ed..700621bb 100644
--- a/packages/card/README.md
+++ b/packages/card/README.md
@@ -1,49 +1,55 @@
## Card 卡片
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-card": "path/to/zanui-weapp/dist/card/index"
+ }
+}
```
-
### 代码演示
#### 基础用法
-卡片可以用于左侧图片，右侧描述信息的展示。
-`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示
-如下，是一个商品信息的展示：
+卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。
+
```html
-
-
-
-
-
-
-
-
-
-
-
- ¥ 999.99
-
- 红烧牛肉【虚拟商品】【有库存】【有sku】
-
-
-
-
- x2
-
- 3000克 50%
-
-
-
-
- 已发货
-
-
-
+
+
```
+#### 使用slot
+`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。
+
+```html
+
+
+
+ 我是标题
+
+
+```
+
+### API
+| 参数 | 说明 | 类型 | 默认值 |
+|-----|-----|-----|-----|
+| card-class | 自定义最外层class | String | -
+| thumb | 左侧缩略图 | String | -
+| price | 商品价格 | String | -
+| title | 商品标题 | String | -
+| desc | 商品描述 | String | -
+| num | 商品数量 | Number | -
+| status | 商品状态 | String | -
+| useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`
diff --git a/packages/card/index.js b/packages/card/index.js
new file mode 100644
index 00000000..d8e268f1
--- /dev/null
+++ b/packages/card/index.js
@@ -0,0 +1,24 @@
+Component({
+ options: {
+ multipleSlots: true
+ },
+
+ externalClasses: ['card-class'],
+
+ properties: {
+ useThumbSlot: {
+ type: Boolean,
+ value: false
+ },
+ useDetailSlot: {
+ type: Boolean,
+ value: false
+ },
+ thumb: String,
+ price: String,
+ title: String,
+ num: Number,
+ desc: String,
+ status: String
+ }
+});
diff --git a/packages/card/index.json b/packages/card/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/card/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/card/index.pcss b/packages/card/index.pcss
index 27a4376c..04847ed9 100644
--- a/packages/card/index.pcss
+++ b/packages/card/index.pcss
@@ -1,6 +1,9 @@
+@import "../color/index.pcss";
+@import "../helper/index.pcss";
+
.zan-card {
+ display: flex;
margin-left: 0px;
- width: auto;
padding: 5px 15px;
overflow: hidden;
position: relative;
@@ -10,7 +13,6 @@
.zan-card__thumb {
width: 90px;
height: 90px;
- float: left;
position: relative;
margin-left: auto;
margin-right: auto;
@@ -31,8 +33,8 @@
}
.zan-card__detail {
- margin-left: 100px;
- width: auto;
+ flex: 1;
+ margin-left: 10px;
position: relative;
}
diff --git a/packages/card/index.wxml b/packages/card/index.wxml
new file mode 100644
index 00000000..98e26788
--- /dev/null
+++ b/packages/card/index.wxml
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+ ¥ {{ price }}
+
+ {{ title }}
+
+
+
+
+ x {{ num }}
+
+ {{ desc }}
+
+
+
+
+ {{ status }}
+
+
+
+
diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
new file mode 100644
index 00000000..ddfa1d33
--- /dev/null
+++ b/packages/cell-group/index.js
@@ -0,0 +1,19 @@
+Component({
+ relations: {
+ '../cell/index': {
+ type: 'child',
+ linked (target) {}
+ }
+ },
+ ready () {
+ let cells = this.getRelationNodes('../cell/index')
+
+ if (cells.length > 0) {
+ let lastIndex = cells.length - 1
+
+ cells.forEach((cell, index) => {
+ if (index < lastIndex) cell.notLastCell()
+ });
+ }
+ }
+})
\ No newline at end of file
diff --git a/packages/cell-group/index.json b/packages/cell-group/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/cell-group/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/cell-group/index.wxml b/packages/cell-group/index.wxml
new file mode 100644
index 00000000..9966b641
--- /dev/null
+++ b/packages/cell-group/index.wxml
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/packages/cell/README.md b/packages/cell/README.md
index 4129159d..0c1965ed 100644
--- a/packages/cell/README.md
+++ b/packages/cell/README.md
@@ -1,54 +1,69 @@
## Cell 单元格
-### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+自定义 cell 组件
+
+### 属性与事件
+
+| 名称 | 类型 | 是否必须 | 默认 | 描述 |
+| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- |
+| title | String | 否 | 无 | 左侧标题 |
+| label | Boolean | 否 | false | 标题下方的描述信息 |
+| value | String | 否 | 取消 | 右侧内容 |
+| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 |
+| url | String | 否 | - | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 |
+| linkType | String | 否 | navigateTo | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` |
+| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 |
+| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 |
+
+### 可用的 slot
+
+| 名称 | 是否必须 | 默认 | 描述 |
+| ------------- | ----------- | ---- | --------------------------------------------------------------------- |
+| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 |
+| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 |
+| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 |
+
+### cell 组
+
+多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
+
+#### 单个 cell 使用示例
+~~~json
+ {
+ ...
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ }
+ ...
+ }
+~~~
+
+~~~wxml
+
+~~~
+
+#### cell 组使用示例
+```json
+ {
+ ...
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ "zan-cell-group": "../../dist/cell-group/index"
+ }
+ ...
+ }
```
-### 代码演示
-
-#### 基础用法
-`zan-cell` 有三部分组成：
-顶部 Icon：`zan-cell__icon`
-主内容区：`zan-cell__bd`
-附属内容：`zan-cell__ft`
-
-```html
-
-
- 单行列表
- 详细信息
-
-```
-
-当然，也可以在内容区增加附加描述
-```html
-
-
- 单行列表
- 附加描述
-
- 详细信息
-
-```
-
-#### 带箭头的单元格
-在根元素上增加 `zan-cell--access`，可以在右侧显示出箭头。
-```html
-
- 单行列表
-
-
-```
-
-#### 带开关的单元格
-增加 `zan-cell--switch`，更好的适配带有开关的情况
-```html
-
- 开关
-
-
-
-
-```
+```wxml
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/packages/cell/index.js b/packages/cell/index.js
new file mode 100644
index 00000000..92b62534
--- /dev/null
+++ b/packages/cell/index.js
@@ -0,0 +1,79 @@
+const warn = (msg, getValue) => {
+ console.warn(msg)
+ console.log('接受到的值为：', getValue)
+}
+
+Component({
+ options: {
+ multipleSlots: true
+ },
+ relations: {
+ '../cell-group/index': {
+ type: 'parent'
+ }
+ },
+ properties: {
+ title: {
+ type: String,
+ description: '左侧标题'
+ },
+ label: {
+ type: String,
+ description: '标题下方的描述信息'
+ },
+ value: {
+ type: String,
+ description: '右侧内容'
+ },
+ onlyTapFooter: {
+ type: Boolean,
+ description: '只有点击 footer 区域才触发 tab 事件'
+ },
+ isLink: {
+ type: null,
+ value: '',
+ description: '是否展示右侧箭头并开启尝试以 url 跳转'
+ },
+ linkType: {
+ type: String,
+ value: 'navigateTo',
+ description: '链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch'
+ },
+ url: {
+ type: String,
+ value: ''
+ }
+ },
+ data: {
+ isLastCell: true
+ },
+ methods: {
+ navigateTo () {
+ const url = this.data.url
+ const type = typeof this.data.isLink
+
+ this.triggerEvent('tap', {})
+
+ if (!this.data.isLink || !url || url === 'true' || url === 'false') return;
+
+ if (type !== 'boolean' && type !== 'string') {
+ warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink)
+ return
+ }
+
+ if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) {
+ warn('linkType 属性可选值为 navigateTo，redirectTo，switchTab，reLaunch', this.data.linkType)
+ return
+ }
+ wx[this.data.linkType].call(wx, { url })
+ },
+ cellTap () {
+ if (!this.data.onlyTapFooter) {
+ this.navigateTo()
+ }
+ },
+ notLastCell () {
+ this.setData({ isLastCell: false })
+ }
+ }
+})
\ No newline at end of file
diff --git a/packages/cell/index.json b/packages/cell/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/cell/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/cell/index.pcss b/packages/cell/index.pcss
index 63c54c40..5017c06a 100644
--- a/packages/cell/index.pcss
+++ b/packages/cell/index.pcss
@@ -16,9 +16,13 @@
right: 0;
}
-.zan-cell__icon {
+.zan-cell .zan-cell__icon {
margin-right: 5px;
}
+.zan-cell .zan-cell__icon:empty {
+ display: none
+}
+
.zan-cell__bd {
flex: 1;
}
@@ -49,8 +53,7 @@
padding: 12px 15px 12px 0;
}
-.zan-cell--last-child::after,
-.zan-cell:last-child::after {
+.zan-cell.last-cell::after {
display: none;
}
diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml
new file mode 100644
index 00000000..a3ccd2a7
--- /dev/null
+++ b/packages/cell/index.wxml
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+ {{ title }}
+ {{ label }}
+
+
+
+
+ {{ value }}
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/col/index.js b/packages/col/index.js
new file mode 100644
index 00000000..b9e7bf42
--- /dev/null
+++ b/packages/col/index.js
@@ -0,0 +1,20 @@
+Component({
+ externalClasses: ['col-class'],
+
+ relations: {
+ '../row/index': {
+ type: 'parent'
+ }
+ },
+
+ properties: {
+ col: {
+ value: 0,
+ type: Number
+ },
+ offset: {
+ value: 0,
+ type: Number
+ }
+ }
+});
diff --git a/packages/col/index.json b/packages/col/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/col/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/col/index.wxml b/packages/col/index.wxml
new file mode 100644
index 00000000..2be191c3
--- /dev/null
+++ b/packages/col/index.wxml
@@ -0,0 +1 @@
+
diff --git a/packages/common/pop-manager/index.js b/packages/common/pop-manager/index.js
new file mode 100644
index 00000000..edbd9966
--- /dev/null
+++ b/packages/common/pop-manager/index.js
@@ -0,0 +1,29 @@
+Component({
+ properties: {
+ show: {
+ type: Boolean,
+ value: false
+ },
+ // 是否有遮罩层
+ overlay: {
+ type: Boolean,
+ value: true
+ },
+ // 遮罩层是否会显示
+ showOverlay: {
+ 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..6bb47ef1
--- /dev/null
+++ b/packages/common/pop-manager/index.wxml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/packages/dialog/README.md b/packages/dialog/README.md
index 32b1ef9f..69225374 100644
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -1,57 +1,54 @@
## Dialog 弹出框
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-dialog": "path/to/zanui-weapp/dist/dialog/index"
+ }
+}
```
在需要使用的页面里引入组件库模板和脚本
```html
-
-
-
+
```
```js
-const { Dialog, extend } = require('path/to/zanui-weapp/dist/index');
+const Dialog = require('path/to/zanui-weapp/dist/dialog/dialog');
-// 在 Page 中混入 Dialog 里面声明的方法
-Page(extend({}, Dialog, {
+Page({
// ...
-}));
+ // 可以在任意方法里直接调用，即可唤起
+ handleClick() {
+ Dialog({
+ title: '',
+ message: '',
+ selector: '#zan-dialog-test'
+ }).then((res) => {
+ console.log(res);
+ })
+ }
+});
```
### 代码演示
-#### 基础功能
-在 js 中直接调用 this.showZanDialog 即可，可以在 title 或者 content 传入需要展示的内容。
-
-showZanDialog 调用后返回 promise 对象。点击确定后，可以在 resolve 状态中监听到。点击取消后，可以在 reject 状态中监听到。
-```js
-this.showZanDialog({
- content: '这是一个模态弹窗',
- showCancel: true
-}).then(() => {
- console.log('=== dialog ===', 'type: confirm');
-}).catch(() => {
- console.log('=== dialog ===', 'type: cancel');
-});
-```
#### 按钮展示方式
按钮可以通过设置 buttonsShowVertical 来切换按钮纵向展示或者横向并排展示，方便各种场景下使用。
```js
-this.showZanDialog({
- content: '这是一个模态弹窗',
+Dialog({
+ message: '这是一个模态弹窗',
buttonsShowVertical: true,
- showCancel: true
+ showCancelButton: true
});
```
#### 自定义展示按钮
`dialog` 支持自定义展示按钮。设置 buttons 数组即可实现。自定义按钮的点击后，都会在 resolve 状态中监听到。
```js
-this.showZanDialog({
- content: '这是一个模态弹窗',
+Dialog({
+ message: '这是一个模态弹窗',
buttons: [{
// 按钮文案
text: '现金支付',
@@ -75,15 +72,16 @@ this.showZanDialog({
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
+| message | 弹窗内容 | String | - | 必须 |
+| selector | 显示弹窗对应组件节点的选择器 | String | - | 必须 |
| title | 弹窗标题 | String | - | |
-| content | 弹窗内容 | String | - | 必须 |
| buttonsShowVertical | 按钮是否纵向展示 | Boolean | false | |
-| showConfirm | 是否展示确认按钮 | Boolean | true | |
-| confirmText | 确认按钮文案 | String | 确定 | |
-| confirmColor | 确认按钮文字颜色 | String | #3CC51F | |
-| showCancel | 是否展示取消按钮 | Boolean | false | |
-| cancelText | 取消按钮文案 | String | 取消 | |
-| cancelColor | 取消按钮文字颜色 | String | #333 | |
+| showConfirmButton | 是否展示确认按钮 | Boolean | true | |
+| confirmButtonText | 确认按钮文案 | String | 确定 | |
+| confirmButtonColor | 确认按钮文字颜色 | String | #3CC51F | |
+| showCancelButton | 是否展示取消按钮 | Boolean | false | |
+| cancelButtonText | 取消按钮文案 | String | 取消 | |
+| cancelButtonColor | 取消按钮文字颜色 | String | #333 | |
| buttons | 自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。| Array | - | |
buttons 参考格式：
diff --git a/packages/dialog/data.js b/packages/dialog/data.js
new file mode 100644
index 00000000..9a624d0f
--- /dev/null
+++ b/packages/dialog/data.js
@@ -0,0 +1,25 @@
+module.exports = {
+ // 标题
+ title: '',
+ // 自定义 btn 列表
+ // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
+ buttons: [],
+ // 内容
+ message: ' ',
+ // 选择节点
+ selector: '#zan-dialog',
+ // 按钮是否展示为纵向
+ buttonsShowVertical: false,
+ // 是否展示确定
+ showConfirmButton: true,
+ // 确认按钮文案
+ confirmButtonText: '确定',
+ // 确认按钮颜色
+ confirmButtonColor: '#3CC51F',
+ // 是否展示取消
+ showCancelButton: false,
+ // 取消按钮文案
+ cancelButtonText: '取消',
+ // 取消按钮颜色
+ cancelButtonColor: '#333'
+};
diff --git a/packages/dialog/dialog.js b/packages/dialog/dialog.js
new file mode 100644
index 00000000..45242ad1
--- /dev/null
+++ b/packages/dialog/dialog.js
@@ -0,0 +1,64 @@
+const defaultData = require('./data');
+
+// options 使用参数
+// pageCtx 页面 page 上下文
+function Dialog(options, pageCtx) {
+ const parsedOptions = {
+ ...defaultData,
+ ...options
+ };
+
+ let ctx = pageCtx;
+ if (!ctx) {
+ const pages = getCurrentPages();
+ ctx = pages[pages.length - 1];
+ }
+ const dialogCtx = ctx.selectComponent(parsedOptions.selector);
+
+ if (!dialogCtx) {
+ console.error('无法找到对应的dialog组件，请于页面中注册并在 wxml 中声明 dialog 自定义组件');
+ return Promise.reject({ type: 'component error' });
+ }
+
+ // 处理默认按钮的展示
+ // 纵向排布确认按钮在上方
+ const buttons = parsedOptions.buttons;
+ let showCustomBtns = false;
+ if (buttons.length === 0) {
+ if (parsedOptions.showConfirmButton) {
+ buttons.push({
+ type: 'confirm',
+ text: parsedOptions.confirmButtonText,
+ color: parsedOptions.confirmButtonColor
+ });
+ }
+
+ if (parsedOptions.showCancelButton) {
+ const cancelButton = {
+ type: 'cancel',
+ text: parsedOptions.cancelButtonText,
+ color: parsedOptions.cancelButtonColor
+ };
+ if (parsedOptions.buttonsShowVertical) {
+ buttons.push(cancelButton);
+ } else {
+ buttons.unshift(cancelButton);
+ }
+ }
+ } else {
+ showCustomBtns = true;
+ }
+
+ return new Promise((resolve, reject) => {
+ dialogCtx.setData({
+ ...parsedOptions,
+ buttons,
+ showCustomBtns,
+ key: `${(new Date()).getTime()}`,
+ show: true,
+ promiseFunc: { resolve, reject }
+ });
+ });
+};
+
+module.exports = Dialog;
\ No newline at end of file
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
index bc97a739..9b870c20 100644
--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@@ -1,112 +1,49 @@
-const _f = function () {};
+const defaultData = require('./data');
-module.exports = {
- showZanDialog(options = {}) {
- const {
- // 自定义 btn 列表
- // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
- buttons = [],
- // 标题
- title = '',
- // 内容
- content = ' ',
- // 按钮是否展示为纵向
- buttonsShowVertical = false,
- // 是否展示确定
- showConfirm = true,
- // 确认按钮文案
- confirmText = '确定',
- // 确认按钮颜色
- confirmColor = '#3CC51F',
- // 是否展示取消
- showCancel = false,
- // 取消按钮文案
- cancelText = '取消',
- // 取消按钮颜色
- cancelColor = '#333'
- } = options;
+const _f = function() {};
- // 处理默认按钮的展示
- // 纵向排布确认按钮在上方
- let showCustomBtns = false;
- if (buttons.length === 0) {
- if (showConfirm) {
- buttons.push({
- type: 'confirm',
- text: confirmText,
- color: confirmColor
- });
- }
+Component({
+ properties: {},
- if (showCancel) {
- const cancelButton = {
- type: 'cancel',
- text: cancelText,
- color: cancelColor
- };
- if (buttonsShowVertical) {
- buttons.push(cancelButton);
- } else {
- buttons.unshift(cancelButton);
- }
- }
- } else {
- showCustomBtns = true;
- }
-
- return new Promise((resolve, reject) => {
- this.setData({
- zanDialog: {
- show: true,
- showCustomBtns,
- buttons,
- title,
- content,
- buttonsShowVertical,
- showConfirm,
- confirmText,
- confirmColor,
- showCancel,
- cancelText,
- cancelColor,
- // 回调钩子
- resolve,
- reject
- }
- });
- });
+ data: {
+ ...defaultData,
+ key: '',
+ show: false,
+ showCustomBtns: false,
+ promiseFunc: {}
},
- _handleZanDialogButtonClick(e) {
- const { currentTarget = {} } = e;
- const { dataset = {} } = currentTarget;
+ methods: {
+ handleButtonClick(e) {
+ const { currentTarget = {} } = e;
+ const { dataset = {} } = currentTarget;
- // 获取当次弹出框的信息
- const zanDialogData = this.data.zanDialog || {};
- const { resolve = _f, reject = _f } = zanDialogData;
+ // 获取当次弹出框的信息
+ const { resolve = _f, reject = _f } = this.data.promiseFunc || {};
- // 重置 zanDialog 里的内容
- this.setData({
- zanDialog: { show: false }
- });
-
- // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
- if (zanDialogData.showCustomBtns) {
- resolve({
- type: dataset.type
+ // 重置展示
+ this.setData({
+ show: false
});
- return;
- }
- // 默认按钮，确认为 resolve，取消为 reject
- if (dataset.type === 'confirm') {
- resolve({
- type: 'confirm'
- });
- } else {
- reject({
- type: 'cancel'
- });
+ // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
+ if (this.data.showCustomBtns) {
+ resolve({
+ type: dataset.type
+ });
+ return;
+ }
+
+ // 默认按钮，确认为 resolve，取消为 reject
+ if (dataset.type === 'confirm') {
+ resolve({
+ type: 'confirm'
+ });
+ } else {
+ reject({
+ type: 'cancel'
+ });
+ }
}
}
-};
+});
diff --git a/packages/dialog/index.json b/packages/dialog/index.json
new file mode 100644
index 00000000..f4d43043
--- /dev/null
+++ b/packages/dialog/index.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "pop-manager": "../common/pop-manager/index",
+ "zan-button": "../btn/index"
+ }
+}
diff --git a/packages/dialog/index.pcss b/packages/dialog/index.pcss
index 31144751..6e4a69a1 100644
--- a/packages/dialog/index.pcss
+++ b/packages/dialog/index.pcss
@@ -2,32 +2,12 @@
/* 基础样式 */
.zan-dialog--container {
- position: fixed;
- top: 45%;
- left: 50%;
- width: 80%;
- height: 0;
+ width: 80vw;
font-size: 16px;
overflow: hidden;
- transition: all .2s linear;
border-radius: 4px;
background-color: #fff;
- transform: translate3d(-50%, -50%, 0);
color: #333;
- opacity: 0;
- z-index: 1;
-}
-
-.zan-dialog--mask {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.6);
- transition: .3s;
- display: none;
- z-index: 1;
}
/* 弹出层内容 */
@@ -59,11 +39,13 @@
}
.zan-dialog__button {
+ flex: 1;
+}
+
+.zan-dialog__button-inside, .zan-dialog__button-inside--first {
+ margin-bottom: 0;
line-height: 50px;
height: 50px;
- padding: 0 5px;
- border-radius: 0;
- margin-bottom: 0;
&::after {
border-width: 0;
@@ -71,42 +53,19 @@
}
}
-/* 展示时，样式重置 */
-.zan-dialog--show .zan-dialog--container {
- opacity: 1;
- height: auto;
-}
-
-.zan-dialog--show .zan-dialog--mask {
- display: block;
-}
-
/* 水平/垂直布局 */
.zan-dialog__footer--horizon {
display: flex;
}
-.zan-dialog__footer--horizon .zan-dialog__button {
- flex: 1;
-
+.zan-dialog__footer--horizon .zan-dialog__button-inside {
&::after {
- border-right-width: 1px;
- }
-
- &:last-child::after {
- border-right-width: 0;
+ border-left-width: 1px;
}
}
-
-.zan-dialog__footer--vertical .zan-dialog__button {
- flex: 1;
-
+.zan-dialog__footer--vertical .zan-dialog__button-inside {
&::after {
- border-bottom-width: 1px;
- }
-
- &:last-child::after {
- border-bottom-width: 0;
+ border-top-width: 1px;
}
}
diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml
index cd103b1e..019d17c5 100644
--- a/packages/dialog/index.wxml
+++ b/packages/dialog/index.wxml
@@ -1,27 +1,35 @@
-
-
-
-
-
-
+
+
+
+ {{ message }}
+
+
-
-
-
-
-
+
+ {{ item.text }}
+
+
-
+
diff --git a/packages/field/README.md b/packages/field/README.md
index b3427282..94f384cb 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -1,55 +1,87 @@
## Field 输入框
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-
-
-
-```
-```js
-const { Field, extend } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Field 里面声明的方法
-Page(extend({}, Field, {
- // ...
-}));
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-field": "path/to/zanui-weapp/dist/field/index"
+ }
+}
```
### 代码演示
+
+#### 基础用法
field 支持多种展示方式，在 `data` 中传入对应的设置即可。
```html
-
+
+
```
-当 field 触发输入事件时，可以在页面中注册 handleZanFieldChange 方法来监听
```js
-Page(extend({}, Field, {
- // 输入框内容更改时触发
- handleZanFieldChange({ componentId, detail }) {
- /*
- * componentId 即为在模板中传入的 componentId
- * 用于在一个页面上使用多个 tab 时，进行区分
- * detail 即输入框中的内容
- */
- /*
- * 处理函数可以直接 return 一个字符串，将替换输入框的内容。
- */
- },
- // 输入框聚焦时触发
- handleZanFieldFocus({ componentId, detail }) {},
- // 输入框失焦时触发
- handleZanFieldBlur({ componentId, detail }) {},
+Page(extend({}, {
+ data: {
+ field: {
+ focus: true,
+ title: '收货人',
+ placeholder: '名字',
+ value: 'test'
+ }
+ }
}));
```
-`Field` 支持传入参数如下
+#### 监听事件
+
+field会触发一些事件，当你需要监听这些事件时，可以绑定对应的事件。
+
+```html
+
+
+```
+
+```js
+Page(extend({}, {
+ data: {
+ field: {
+ focus: true,
+ title: '收货人',
+ placeholder: '名字',
+ value: 'test'
+ }
+ },
+
+ methods: {
+ handleFieldChange(event) {
+ console.log(event);
+ },
+
+ handleFieldFocus(event) {
+ console.log(event);
+ },
+
+ handleFieldBlur(event) {
+ console.log(event);
+ }
+ }
+}));
+```
+
+### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
@@ -65,3 +97,11 @@ Page(extend({}, Field, {
| right | 输入框内容是否居右显示 | Boolean | false | |
| error | 是否显示为输入框错误情况下的样式 | Boolean | false | |
| componentId | 用于区分输入框之间的唯一名称 | String | - | |
+
+### Event
+
+| 事件名称 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | event对象 |
+| focus | 输入框focus | event对象 |
+| blur | 输入框blur | event对象 |
diff --git a/packages/field/index.js b/packages/field/index.js
index 3de38b72..8ceb43da 100644
--- a/packages/field/index.js
+++ b/packages/field/index.js
@@ -1,38 +1,44 @@
-const { extractComponentId } = require('../common/helper');
-
-module.exports = {
- _handleZanFieldChange(event) {
- const componentId = extractComponentId(event);
- event.componentId = componentId;
-
- console.info('[zan:field:change]', event);
-
- if (this.handleZanFieldChange) {
- return this.handleZanFieldChange(event);
- }
-
- console.warn('页面缺少 handleZanFieldChange 回调函数');
+Component({
+ properties: {
+ title: String,
+ name: String,
+ type: {
+ type: String,
+ value: 'input'
+ },
+ name: String,
+ value: String,
+ disabled: Boolean,
+ inputType: {
+ type: String,
+ value: 'text'
+ },
+ placeholder: String,
+ focus: Boolean,
+ mode: {
+ type: String,
+ value: 'normal'
+ },
+ right: Boolean,
+ error: Boolean
},
- _handleZanFieldFocus(event) {
- const componentId = extractComponentId(event);
- event.componentId = componentId;
-
- console.info('[zan:field:focus]', event);
-
- if (this.handleZanFieldFocus) {
- return this.handleZanFieldFocus(event);
- }
- },
-
- _handleZanFieldBlur(event) {
- const componentId = extractComponentId(event);
- event.componentId = componentId;
-
- console.info('[zan:field:blur]', event);
-
- if (this.handleZanFieldBlur) {
- return this.handleZanFieldBlur(event);
+ methods: {
+ handleZanFieldChange(event) {
+ console.info('[zan:field:change]', event);
+ this.triggerEvent('change', event);
+ },
+
+ handleZanFieldFocus(event) {
+ console.info('[zan:field:focus]', event);
+
+ this.triggerEvent('focus', event);
+ },
+
+ handleZanFieldBlur(event) {
+ console.info('[zan:field:blur]', event);
+
+ this.triggerEvent('blur', event);
}
}
-};
+})
diff --git a/packages/field/index.json b/packages/field/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/field/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/field/index.pcss b/packages/field/index.pcss
index 5e6b13ae..0925a68f 100644
--- a/packages/field/index.pcss
+++ b/packages/field/index.pcss
@@ -6,7 +6,7 @@
}
.zan-field--wrapped {
- margin: 0 15px;
+ margin: 10px 15px;
background-color: #fff;
&::after {
@@ -21,16 +21,12 @@
display: block;
}
-.zan-field--wrapped + .zan-field--wrapped {
- margin-top: 10px;
-}
-
.zan-field--error {
color: #f40;
}
/* 圆角输入框出现错误时，将边框也置红 */
-.zan-field--wrapped.zan-field--error::after {
+.zan-field--wrapped.zan-field--error::after {
border-color: #f40;
}
diff --git a/packages/field/index.wxml b/packages/field/index.wxml
index 0222cf08..7ba48c4e 100644
--- a/packages/field/index.wxml
+++ b/packages/field/index.wxml
@@ -1,35 +1,35 @@
-
-
- {{ title }}
-
-
+
+
+ {{ title }}
-
+
+
+
diff --git a/packages/helper/index.pcss b/packages/helper/index.pcss
index 97cbbece..9059b028 100644
--- a/packages/helper/index.pcss
+++ b/packages/helper/index.pcss
@@ -1,4 +1,5 @@
@import "../common/_mixins";
+@import "../common/_var";
.zan-pull-left {
float: left;
@@ -44,7 +45,10 @@
font-size: 22px;
}
.zan-font-24 {
- font-size: 22px;
+ font-size: 24px;
+}
+.zan-font-26 {
+ font-size: 26px;
}
.zan-font-30 {
font-size: 30px;
@@ -102,6 +106,36 @@
clear: both;
}
+.zan-c {
+ &-red {
+ color: $red;
+ }
+
+ &-black {
+ color: $black;
+ }
+
+ &-green {
+ color: $green;
+ }
+
+ &-blue {
+ color: $blue;
+ }
+
+ &-gray {
+ color: $gray;
+ }
+
+ &-gray-dark {
+ color: $gray-dark;
+ }
+
+ &-gray-darker {
+ color: $gray-darker;
+ }
+}
+
/* 超细边框 */
.zan-hairline {
&,
diff --git a/packages/icon/README.md b/packages/icon/README.md
index e6d02e0c..5edddb91 100644
--- a/packages/icon/README.md
+++ b/packages/icon/README.md
@@ -1,15 +1,19 @@
## Icon 图标
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-icon": "path/to/zanui-weapp/dist/icon/index"
+ }
+}
```
### 代码演示
-可以在任意元素上增加 zan-icon 类即可
+可以在任意位置上使用 zan-icon 标签。通过 type 可以控制 icon 显示的图标
```html
-
+
```
支持的 icon 和 名称 见下图
diff --git a/packages/icon/index.js b/packages/icon/index.js
new file mode 100644
index 00000000..d964601a
--- /dev/null
+++ b/packages/icon/index.js
@@ -0,0 +1,8 @@
+Component({
+ properties: {
+ type: {
+ type: String,
+ value: ''
+ }
+ }
+});
diff --git a/packages/icon/index.json b/packages/icon/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/icon/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
new file mode 100644
index 00000000..ed428f08
--- /dev/null
+++ b/packages/icon/index.wxml
@@ -0,0 +1 @@
+
diff --git a/packages/index.js b/packages/index.js
index 1e36bd32..9e3c73c9 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,16 +1,4 @@
-exports.Actionsheet = require('./actionsheet/index');
-exports.Dialog = require('./dialog/index');
-exports.Field = require('./field/index');
-exports.NoticeBar = require('./noticebar/index');
-exports.Select = require('./select/index');
-exports.Stepper = require('./stepper/index');
-exports.Switch = require('./switch/index');
-exports.Tab = require('./tab/index');
-exports.Toast = require('./toast/index');
-exports.TopTips = require('./toptips/index');
+exports.Dialog = require('./dialog/dialog');
+exports.Toast = require('./toast/toast');
+// exports.TopTips = require('./toptips/index');
-// 兼容老版本，在下次大版本发布时会被移除
-exports.CheckLabel = require('./select/index');
-
-const { extend } = require('./common/helper');
-exports.extend = extend;
diff --git a/packages/index.pcss b/packages/index.pcss
index 95916492..62301768 100644
--- a/packages/index.pcss
+++ b/packages/index.pcss
@@ -1,25 +1 @@
-@import "actionsheet/index.pcss";
-@import "badge/index.pcss";
-@import "btn/index.pcss";
-@import "capsule/index.pcss";
-@import "card/index.pcss";
-@import "cell/index.pcss";
-@import "col/index.pcss";
-@import "color/index.pcss";
-@import "dialog/index.pcss";
-@import "field/index.pcss";
@import "helper/index.pcss";
-@import "icon/index.pcss";
-@import "loadmore/index.pcss";
-@import "noticebar/index.pcss";
-@import "panel/index.pcss";
-@import "popup/index.pcss";
-@import "row/index.pcss";
-@import "select/index.pcss";
-@import "stepper/index.pcss";
-@import "steps/index.pcss";
-@import "switch/index.pcss";
-@import "tab/index.pcss";
-@import "tag/index.pcss";
-@import "toast/index.pcss";
-@import "toptips/index.pcss";
diff --git a/packages/loading/README.md b/packages/loading/README.md
new file mode 100644
index 00000000..a5c01916
--- /dev/null
+++ b/packages/loading/README.md
@@ -0,0 +1,27 @@
+## Loading 加载
+
+### 属性
+
+| 名称 | 类型 | 是否必须 | 默认 | 描述 |
+| ------- | --------------- | -------- | ----- | ----------------- |
+| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot |
+| color | String | 否 | 无 | 可选值 black |
+| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 |
+
+### 代码演示
+
+```json
+ {
+ ...
+ "usingComponents": {
+ "zan-loading": "../../dist/loading/index"
+ }
+ ...
+ }
+```
+
+```html
+
+
+
+```
diff --git a/packages/loading/index.js b/packages/loading/index.js
new file mode 100644
index 00000000..89fbaabe
--- /dev/null
+++ b/packages/loading/index.js
@@ -0,0 +1,11 @@
+Component({
+ properties: {
+ type: {
+ type: String,
+ value: 'circle'
+ },
+ color: {
+ type: String
+ }
+ }
+})
\ No newline at end of file
diff --git a/packages/loading/index.json b/packages/loading/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/loading/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/loading/index.pcss b/packages/loading/index.pcss
new file mode 100644
index 00000000..b3ec5f78
--- /dev/null
+++ b/packages/loading/index.pcss
@@ -0,0 +1,175 @@
+$spinners: 12;
+
+.loading.inline {
+ position: relative;
+ margin: 15px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+
+ & .circle {
+ display: inline-block;
+ height: 24px;
+ width: 24px;
+ border-radius: 100%;
+ border: 3px solid transparent;
+ box-sizing: border-box;
+ border-color: rgba(0, 0, 0, .1);
+ border-top-color: rgba(255, 255, 255, .7);
+ animation: loading 1s linear infinite;
+ }
+ &.black .circle {
+ border-color: #c9c9c9;
+ border-top-color: #666;
+ }
+
+ & .circular {
+ display: inline-block;
+ height: 24px;
+ width: 24px;
+ animation: loading 2s linear infinite;
+
+ &::after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 100%;
+ border: 3px solid transparent;
+ box-sizing: border-box;
+ animation: circular 2s ease infinite;
+ }
+ }
+
+ & .spinner {
+ width: 30px;
+ height: 30px;
+ display: inline-block;
+ position: relative;
+ animation: loading 1s linear infinite;
+ animation-timing-function: steps(12);
+ & view {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ left: 0;
+
+ &::after {
+ content: '';
+ background: #fff;
+ height: 25%;
+ display: block;
+ width: 2px;
+ border-radius: 2px;
+ margin: 0 auto;
+ }
+
+ @for $i from 1 to $spinners {
+ &:nth-child($i) {
+ transform: rotate(calc($i * 30)deg);
+ opacity: calc(1 / ($spinners + 2) * ($spinners - $i));
+ }
+ }
+ }
+ }
+ &.black .spinner view::after {
+ content: '';
+ background: #c9c9c9;
+ height: 25%;
+ display: block;
+ width: 2px;
+ border-radius: 2px;
+ margin: 0 auto;
+ }
+}
+
+.loading.block {
+ & .dot-spinner {
+ margin: 15px 15px;
+ overflow: hidden;
+
+ & view {
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background: #fff;
+ display: inline-block;
+ margin-left: 3px;
+ position: relative;
+ left: 0;
+
+ animation: dot-spinner 2s ease infinite;
+ @for $i from 1 to 6 {
+ &:nth-child($i) {
+ animation-delay: calc((6 - $i)/10)s;
+ }
+ }
+ @for $i from 6 to $spinners {
+ &:nth-child($i) {
+ display: none;
+ }
+ }
+ }
+ }
+
+ &.black .dot-spinner view {
+ background: #c9c9c9;
+ }
+}
+
+
+@keyframes dot-spinner {
+ 40% {
+ left: calc(50% - 15px);
+ }
+
+ 60% {
+ left: calc(50% - 15px);
+ }
+
+ 100% {
+ left: 100%;
+ }
+}
+
+@keyframes circular {
+ 0% {
+ border-color: #fff;
+ }
+ 12% {
+ border-top-color: transparent;
+ }
+ 25% {
+ border-right-color: transparent;
+ }
+ 37% {
+ border-bottom-color: transparent;
+ }
+ 50% {
+ border-left-color: transparent;
+ }
+ 64% {
+ border-top-color: #fff
+ }
+ 75% {
+ border-right-color: #fff;
+ }
+ 87.5% {
+ border-bottom-color: #fff;
+ }
+ 100% {
+ border-color: #fff;
+ }
+}
+
+@keyframes loading {
+ 0% {
+ transform: rotate(0deg)
+ }
+
+ 100% {
+ transform: rotate(360deg)
+ }
+}
diff --git a/packages/loading/index.wxml b/packages/loading/index.wxml
new file mode 100644
index 00000000..641501ff
--- /dev/null
+++ b/packages/loading/index.wxml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/noticebar/README.md b/packages/noticebar/README.md
index 6269cc62..abfb04a7 100644
--- a/packages/noticebar/README.md
+++ b/packages/noticebar/README.md
@@ -1,49 +1,95 @@
## Noticebar 通告栏
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-noticebar": "path/to/zanui-weapp/dist/noticebar/index"
+ }
+}
```
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-
-
-
-```
-
-// 在 Page 中混入 Noticebar 里面声明的方法
+在 index.js 中声明组件数据
```js
-const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index');
-
-Page(extend({}, Noticebar, {
- // ...
-}));
+// 在 Page 中声明 Noticebar 依赖的展示数据
+Page({
+ data: {
+ text: 'xxx',
+ scrollable: 'xxx',
+ ...
+ }
+})
```
### 代码演示
`Noticebar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案
+
+### 静止公告栏
```html
-
+
```
-**注意**
-
-如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示
-```js
-Page(extend({}, Noticebar, {
- // ...
- onShow() {
- // 在方法中传入对应的 componentId
- this.initZanNoticeBarScroll('movable');
- }
- // ...
-}));
+### 滚动通告栏
+```html
+
```
-| 参数 | 说明 | 类型 | 默认值 | 必须 |
+### 延时滚动通告栏
+```html
+
+```
+
+### 改变滚动通告栏滚动速度
+```html
+
+```
+
+### 自定义通告栏字体颜色和背景色
+```html
+
+```
+
+### 添加左侧icon通告栏
+```html
+
+```
+
+### 可关闭通告栏
+```html
+
+```
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| text | 通告栏展示文案 | String | - | |
-| componentId | 用于区分页面多个 Noticebar 组件，在调用 initZanNoticeBarScroll 时需要传入 | String | - | |
+| mode | 通告栏模式 | String | '' | `closeable` |
+| delay | 滚动延时时间 | Number | 0 | |
+| speed | 滚动速度 | Number | 40 | |
+| scrollable | 是否可滚动 | Boolean | false | |
+| leftIcon | 左侧图标 | String | - | |
+| color | 通告栏字体颜色 | String | `#f60` | |
+| backgroundColor | 通告栏背景色 | String | `#fff7cc` |
diff --git a/packages/noticebar/index.js b/packages/noticebar/index.js
index b71a37e9..7c0c67f2 100644
--- a/packages/noticebar/index.js
+++ b/packages/noticebar/index.js
@@ -1,74 +1,169 @@
-const ZanNoticeBar = {
- initZanNoticeBarScroll(componentId) {
- this.zanNoticeBarNode = this.zanNoticeBarNode || {};
- this.zanNoticeBarNode[`${componentId}`] = {
- width: undefined,
- wrapWidth: undefined,
- animation: null,
- resetAnimation: null
- };
+const VALID_MODE = ['closeable'];
+const FONT_COLOR = '#f60';
+const BG_COLOR = '#fff7cc';
- const currentComponent = this.zanNoticeBarNode[`${componentId}`];
- wx.createSelectorQuery()
+Component({
+ properties: {
+ text: {
+ type: String,
+ value: ''
+ },
+ mode: {
+ type: String,
+ value: ''
+ },
+ url: {
+ type: String,
+ value: ''
+ },
+ openType: {
+ type: String,
+ value: 'navigate'
+ },
+ delay: {
+ type: Number,
+ value: 0
+ },
+ speed: {
+ type: Number,
+ value: 40
+ },
+ scrollable: {
+ type: Boolean,
+ value: false
+ },
+ leftIcon: {
+ type: String,
+ value: ''
+ },
+ color: {
+ type: String,
+ value: FONT_COLOR
+ },
+ backgroundColor: {
+ type: String,
+ value: BG_COLOR
+ }
+ },
+
+ data: {
+ show: true,
+ hasRightIcon: false,
+ width: undefined,
+ wrapWidth: undefined,
+ elapse: undefined,
+ animation: null,
+ resetAnimation: null,
+ timer: null
+ },
+
+ attached() {
+ const { mode } = this.data;
+ if (mode && this._checkMode(mode)) {
+ this.setData({
+ hasRightIcon: true
+ });
+ }
+ },
+
+ detached() {
+ const { timer } = this.data;
+ timer && clearTimeout(timer);
+ },
+
+ ready() {
+ this._init();
+ },
+
+ methods: {
+ _checkMode(val) {
+ const isValidMode = ~VALID_MODE.indexOf(val);
+ if (!isValidMode) {
+ console.warn(`mode only accept value of ${VALID_MODE}, now get ${val}.`);
+ }
+ return isValidMode;
+ },
+
+ _init() {
+ wx.createSelectorQuery()
.in(this)
- .select(`#${componentId}__content`)
- .boundingClientRect((rect) => {
+ .select('.zan-noticebar__content')
+ .boundingClientRect(rect => {
if (!rect || !rect.width) {
- console.warn('页面缺少 noticebar 元素');
+ throw new Error('页面缺少 noticebar 元素');
return;
}
+ this.setData({
+ width: rect.width
+ });
- currentComponent.width = rect.width;
- wx
- .createSelectorQuery()
+ wx.createSelectorQuery()
.in(this)
- .select(`#${componentId}__content-wrap`)
+ .select('.zan-noticebar__content-wrap')
.boundingClientRect((rect) => {
if (!rect || !rect.width) {
return;
}
- clearTimeout(this.data[componentId].setTimeoutId)
+ const wrapWidth = rect.width;
+ const { width, speed, scrollable, delay } = this.data;
- currentComponent.wrapWidth = rect.width;
- if (currentComponent.wrapWidth < currentComponent.width) {
- var mstime = currentComponent.width / 40 * 1000;
- currentComponent.animation = wx.createAnimation({
- duration: mstime,
- timingFunction: 'linear'
+ if (scrollable && wrapWidth < width) {
+ const elapse = width / speed * 1000;
+ const animation = wx.createAnimation({
+ duration: elapse,
+ timeingFunction: 'linear',
+ delay
});
- currentComponent.resetAnimation = wx.createAnimation({
+ const resetAnimation = wx.createAnimation({
duration: 0,
- timingFunction: 'linear'
+ timeingFunction: 'linear'
+ });
+
+ this.setData({
+ elapse,
+ wrapWidth,
+ animation,
+ resetAnimation
+ }, () => {
+ this._scroll();
});
- this.scrollZanNoticeBar(componentId, mstime);
}
})
- .exec();
+ .exec();
})
- .exec();
- },
+ .exec();
+ },
- scrollZanNoticeBar(componentId, mstime) {
- const currentComponent = this.zanNoticeBarNode[`${componentId}`];
- const resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step();
- this.setData({
- [`${componentId}.animationData`]: resetAnimationData.export()
- });
- const aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step();
- setTimeout(() => {
+ _scroll() {
+ const { animation, resetAnimation, wrapWidth, elapse, speed } = this.data;
+ const resetAnimationData = resetAnimation.translateX(wrapWidth).step();
+ const animationData = animation.translateX(-elapse * speed / 1000).step();
this.setData({
- [`${componentId}.animationData`]: aninationData.export()
+ animationData: resetAnimation.export()
});
- }, 100);
+ setTimeout(() => {
+ this.setData({
+ animationData: animationData.export()
+ })
+ }, 100);
- const setTimeoutId = setTimeout(() => {
- this.scrollZanNoticeBar(componentId, mstime);
- }, mstime);
- this.setData({
- [`${componentId}.setTimeoutId`]: setTimeoutId
- })
+ const timer = setTimeout(() => {
+ this._scroll();
+ }, elapse);
+
+ this.setData({
+ timer
+ });
+ },
+
+ _handleButtonClick() {
+ const { timer } = this.data;
+ timer && clearTimeout(timer);
+ this.setData({
+ show: false,
+ timer: null
+ });
+ }
}
-};
-
-module.exports = ZanNoticeBar;
+})
diff --git a/packages/noticebar/index.json b/packages/noticebar/index.json
new file mode 100644
index 00000000..9e5bbd55
--- /dev/null
+++ b/packages/noticebar/index.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "zan-icon": "../icon/index"
+ }
+}
\ No newline at end of file
diff --git a/packages/noticebar/index.pcss b/packages/noticebar/index.pcss
index f6a94b91..4a4ca31d 100644
--- a/packages/noticebar/index.pcss
+++ b/packages/noticebar/index.pcss
@@ -1,7 +1,43 @@
.zan-noticebar {
- color: #f60;
+ display: flex;
padding: 9px 10px;
font-size: 12px;
line-height: 1.5;
- background-color: #fff7cc;
+
+ &--within-icon {
+ position: relative;
+ padding-right: 30px;
+ }
+
+ &__left-icon {
+ height: 18px;
+ min-width: 20px;
+ padding-top: 1px;
+ box-sizing: border-box;
+
+ > image {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ &__right-icon {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 15px;
+ line-height: 1;
+ }
+
+ &__content-wrap {
+ position: relative;
+ flex: 1;
+ height: 18px;
+ overflow: hidden;
+ }
+
+ &__content {
+ position: absolute;
+ white-space: nowrap;
+ }
}
diff --git a/packages/noticebar/index.wxml b/packages/noticebar/index.wxml
index a3bc85e3..08efb94c 100644
--- a/packages/noticebar/index.wxml
+++ b/packages/noticebar/index.wxml
@@ -1,16 +1,31 @@
-
-
-
-
- {{ text }}
-
+
+
+
+
+
+
+ {{ text }}
-
+
+
+
+
+
+
+
+
+
diff --git a/packages/panel/README.md b/packages/panel/README.md
index b4d9d426..f6b4f1c0 100644
--- a/packages/panel/README.md
+++ b/packages/panel/README.md
@@ -1,15 +1,25 @@
-## Panel 面板
+## Panel 面板组件
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-panel": "/packages/panel/index"
+ }
+}
```
### 代码演示
-Panel 提供了一块白色的展示区域，直接在需要的元素上加上 zan-panel 类即可，使用方式如下
+Panel 提供了一块白色的展示区域，使用方式如下
```html
-
+
内容
-
+
```
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | panel的标题 | String | - | |
+| hide-border | 内容区隐藏边框 | Boolean | - | |
+
+
diff --git a/packages/panel/index.js b/packages/panel/index.js
new file mode 100644
index 00000000..32c20610
--- /dev/null
+++ b/packages/panel/index.js
@@ -0,0 +1,23 @@
+Component({
+ /**
+ * 组件的属性列表
+ * 用于组件自定义设置
+ */
+ properties: {
+ // 标题
+ title: {
+ type: String,
+ value: ''
+ },
+ // 内容区顶部是否取消10像素的间距
+ hideTop :{
+ type : Boolean ,
+ value : false
+ },
+ // 内容区顶部是否取消边框
+ hideBorder :{
+ type : Boolean ,
+ value : false
+ }
+ }
+})
diff --git a/packages/panel/index.json b/packages/panel/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/panel/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/panel/index.pcss b/packages/panel/index.pcss
index 218e6455..f0ac4e35 100644
--- a/packages/panel/index.pcss
+++ b/packages/panel/index.pcss
@@ -2,10 +2,20 @@
.zan-panel {
position: relative;
- background: #fff;
- margin-top: 10px;
overflow: hidden;
+}
+.zan-panel__title {
+ font-size: 14px;
+ line-height: 1;
+ color: #999;
+ padding: 20px 15px 10px 15px;
+}
+
+.zan-panel__content {
+ position: relative;
+ background: #fff;
+ overflow: hidden;
&::after {
@mixin hairline;
border-top-width: 1px;
@@ -13,18 +23,6 @@
}
}
-.zan-panel-title {
- font-size: 14px;
- line-height: 1;
- color: #999;
- padding: 20px 15px 0 15px;
-}
-
-
-.zan-panel--without-margin-top {
- margin-top: 0;
-}
-
.zan-panel--without-border {
&::after {
border: 0 none;
diff --git a/packages/panel/index.wxml b/packages/panel/index.wxml
new file mode 100644
index 00000000..196eeebd
--- /dev/null
+++ b/packages/panel/index.wxml
@@ -0,0 +1,10 @@
+
+ {{ title }}
+
+
+
+
diff --git a/packages/popup/README.md b/packages/popup/README.md
index b4ff71dd..c1638e4b 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
deleted file mode 100644
index e15be8e5..00000000
--- a/packages/popup/index.pcss
+++ /dev/null
@@ -1,75 +0,0 @@
-.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..6451fc6f
--- /dev/null
+++ b/packages/popup/index.wxml
@@ -0,0 +1,8 @@
+
+
+
diff --git a/packages/row/README.md b/packages/row/README.md
index a021d2c2..44c07651 100644
--- a/packages/row/README.md
+++ b/packages/row/README.md
@@ -1,34 +1,48 @@
## Layout 布局
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-row": "path/to/zanui-weapp/dist/row/index",
+ "zan-col": "path/to/zanui-weapp/dist/col/index"
+ }
+}
```
### 代码演示
-Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度
+Layout 组件提供了24列栅格，设置 col 属性可以设置元素所占宽度
+
```html
-
-
- span: 8
-
-
- span: 8
-
-
- span: 8
-
-
+
+ span: 8
+ span: 8
+ span: 8
+
```
-Layout 提供了 offset 功能。添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同
+Layout 提供了 offset 功能。设置 offset 属性可以设置列的偏移宽度，计算方式与 span 相同
```html
-
- span: 4
- offset: 4, span: 10
-
-
- offset: 12, span: 12
-
+
+ span: 4
+ offset: 4, span: 10
+
+
+ offset: 12, span: 12
+
```
+
+### API
+#### Row
+| 参数 | 说明 | 类型 | 默认值 |
+|-----|-----|-----|-----|
+| row-class | 自定义row class | String | -
+
+#### Col
+| 参数 | 说明 | 类型 | 默认值 |
+|-----|-----|-----|-----|
+| col-class | 自定义col class | String | -
+| col | 元素所占宽度 | Number | `0`
+| offset | 元素偏移宽度 | Number | `0`
+
diff --git a/packages/row/index.js b/packages/row/index.js
new file mode 100644
index 00000000..ac80c59a
--- /dev/null
+++ b/packages/row/index.js
@@ -0,0 +1,9 @@
+Component({
+ externalClasses: ['row-class'],
+
+ relations: {
+ '../col/index': {
+ type: 'child'
+ }
+ }
+});
diff --git a/packages/row/index.json b/packages/row/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/row/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/row/index.wxml b/packages/row/index.wxml
new file mode 100644
index 00000000..c420646a
--- /dev/null
+++ b/packages/row/index.wxml
@@ -0,0 +1 @@
+
diff --git a/packages/select/README.md b/packages/select/README.md
index 494e66ec..6fd2dcb9 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -1,68 +1,73 @@
## Select 选择
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-
-
-```
-```js
-const { extend, Select } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Select 里面声明的方法
-Page(extend({}, Select, {
- // ...
-}));
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-select": "/packages/select/index"
+ }
+}
```
### 代码演示
-#### 基础功能
-`Select` 组件通过传入的 items 对象控制显示，用 checkedValue 确认显示的高亮项目
```html
-
+
+```
+```js
+Page({
+ data: {
+ items: [
+ {
+ value: '1',
+ // 选项文案
+ name: '选项一',
+ },
+ {
+ value: '2',
+ name: '选项二',
+ },
+ ],
+ checkedValue: '选项一',
+ activeColor: '#ff4443'
+ },
+
+ methods: {
+ handleSelectChange({ detail }) {
+ console.log(detail);
+ }
+ }
+});
```
-当 Select 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
-```js
-Page(extend({}, Select, {
- handleZanSelectChange({ componentId, value }) {
- // componentId 即为在模板中传入的 componentId
- // 用于在一个页面上使用多个 Select 时，进行区分
- // value 表示被选中项的 value
- }
-}));
-```
+
#### 具体参数
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| items | select 显示各个项的配置 | Array | - | |
| checkedValue | 高亮的 item 的 value 值 | String | - | |
-| name | Select 的名字，作为 form 表单提交时数据的 key | String | - | |
| activeColor | Select 高亮颜色 | String | #ff4444 | |
-| componentId | 用于区分页面多个 Select 组件 | String | - | |
-items 参数格式
+items 具体格式如下
```js
-[
- {
- // 当前选项离左侧的距离
- padding: 0,
- // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
- value: '1',
- // 选项文案
- name: '选项一',
- },
- {
- padding: 0,
- value: '2',
- name: '选项二',
- },
-]
+{
+ items: [
+ {
+ // 选项选中时，代表的选中值。会以此作为唯一值，判断是否选中
+ value: '1',
+ // 选项的文字描述
+ name: '选项一',
+ },
+ {
+ value: '2',
+ name: '选项二',
+ },
+ ]
+}
```
diff --git a/packages/select/index.js b/packages/select/index.js
index 971122dc..9e4a617b 100644
--- a/packages/select/index.js
+++ b/packages/select/index.js
@@ -1,25 +1,27 @@
-const { extractComponentId } = require('../common/helper');
+Component({
+ properties: {
+ items: {
+ type: Array,
+ value: []
+ },
+ name: {
+ type: String,
+ value: ''
+ },
+ checkedValue: {
+ type: String,
+ value: ''
+ },
+ activeColor: {
+ type: String,
+ value: '#ff4444'
+ }
+ },
-function handle(e) {
- const componentId = extractComponentId(e);
- const value = e.detail.value;
-
- callback.call(this, componentId, value);
-}
-
-function callback(componentId, value) {
- const e = { componentId, value };
- console.info('[zan:Select:change]', e);
-
- if (this.handleZanSelectChange) {
- this.handleZanSelectChange(e);
- } else {
- console.warn('页面缺少 handleZanSelectChange 回调函数');
+ methods: {
+ handleSelectChange(e) {
+ const value = e.detail.value;
+ this.triggerEvent('change', { value });
+ }
}
-}
-
-module.exports = {
- _handleZanSelectChange(e) {
- handle.call(this, e);
- }
-};
+});
diff --git a/packages/select/index.json b/packages/select/index.json
new file mode 100644
index 00000000..9bab8188
--- /dev/null
+++ b/packages/select/index.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "zan-icon": "../icon/index",
+ "zan-cell": "../cell/index"
+ }
+}
diff --git a/packages/select/index.pcss b/packages/select/index.pcss
index 0695dae7..36382a85 100644
--- a/packages/select/index.pcss
+++ b/packages/select/index.pcss
@@ -1,3 +1,8 @@
.zan-select__list .zan-select__radio{
- display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ opacity: 0;
}
diff --git a/packages/select/index.wxml b/packages/select/index.wxml
index d53e3561..7d0ce062 100644
--- a/packages/select/index.wxml
+++ b/packages/select/index.wxml
@@ -1,24 +1,21 @@
-
-
-
-
-
+
+
+
+
function getColor(color) {
diff --git a/packages/stepper/README.md b/packages/stepper/README.md
index a187ac14..e6f0b09c 100644
--- a/packages/stepper/README.md
+++ b/packages/stepper/README.md
@@ -1,45 +1,32 @@
## Stepper 计数器
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-
-
-```
-```js
-const { extend, Stepper } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Stepper 里面声明的方法
-Page(extend({}, Stepper, {
- // ...
-}));
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-stepper": "path/to/zanui-weapp/dist/stepper/index"
+ }
+}
```
### 代码演示
-#### 基础功能
+
+#### 基础用法
`Stepper` 组件通过传入的 stepper 对象控制，内部数据格式如下：
```js
-const stepper = {
- // 当前 stepper 数字
- stepper: 1,
- // 最小可到的数字
- min: 1,
- // 最大可到的数字
- max: 1
-};
-```
+Page(extend({}, {
+ data: {
+ stepper: {
+ // 当前 stepper 数字
+ stepper: 1,
+ // 最小可到的数字
+ min: 1,
+ // 最大可到的数字
+ max: 1
+ }
+ },
-当一个 `Stepper` 中，min 超过 max，就会导致组件被置灰
-
-当 stepper 被点击时，可以在页面中注册 handleZanStepperChange 方法来监听
-```js
-Page(extend({}, Stepper, {
handleZanStepperChange({ componentId, stepper }) {
// componentId 即为在模板中传入的 componentId
// 用于在一个页面上使用多个 stepper 时，进行区分
@@ -50,3 +37,37 @@ Page(extend({}, Stepper, {
}
}));
```
+
+当一个 `Stepper` 中，min 超过 max，就会导致组件被置灰。
+
+当 stepper 被点击时，需要监听`change`事件，处理计数器值的改变。
+
+```js
+
+
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| size | 计数器尺寸 | String | - | |
+| stepper | 计数器的值 | Number | `1` | 必须 |
+| min | 计数器最小值 | Number | `1` | |
+| max | 计数器最大值 | Number | 无穷大 | |
+| step | 步数 | Number | `1` | |
+| componentId | 用于区分输入框之间的唯一名称 | String | - | |
+
+### Event
+
+| 事件名称 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | `{ index, stepper }` |
+| minus | 点击减少按钮时触发 | - |
+| plus | 点击增加按钮时触发 | - |
diff --git a/packages/stepper/index.js b/packages/stepper/index.js
index cd5339f1..9155aad0 100644
--- a/packages/stepper/index.js
+++ b/packages/stepper/index.js
@@ -1,61 +1,71 @@
-function handle(e, num) {
- var dataset = e.currentTarget.dataset;
- var componentId = dataset.componentId;
- var disabled = dataset.disabled;
- var stepper = +dataset.stepper;
-
- if (disabled) return null;
-
- callback.call(this, componentId, stepper + num);
-}
-
-function callback(componentId, stepper) {
- stepper = +stepper;
- var e = { componentId, stepper };
- console.info('[zan:stepper:change]', e);
-
- if (this.handleZanStepperChange) {
- this.handleZanStepperChange(e);
- } else {
- console.warn('页面缺少 handleZanStepperChange 回调函数');
- }
-}
-
-var Stepper = {
- _handleZanStepperMinus(e) {
- handle.call(this, e, -1);
+Component({
+ properties: {
+ size: String,
+ stepper: {
+ type: Number,
+ value: 1
+ },
+ min: {
+ type: Number,
+ value: 1
+ },
+ max: {
+ type: Number,
+ value: Infinity
+ },
+ step: {
+ type: Number,
+ value: 1
+ }
},
- _handleZanStepperPlus(e) {
- handle.call(this, e, +1);
- },
+ methods: {
+ handleZanStepperChange(e, type) {
+ const dataset = e.currentTarget.dataset;
+ const disabled = dataset.disabled;
+ const { step } = this.data;
+ let stepper = this.data.stepper;
- _handleZanStepperBlur(e) {
- var dataset = e.currentTarget.dataset;
- var componentId = dataset.componentId;
- var max = +dataset.max;
- var min = +dataset.min;
- var value = e.detail.value;
+ if (disabled) return null;
- if (!value) {
- setTimeout(() => {
- callback.call(this, componentId, min);
- }, 16);
- callback.call(this, componentId, value);
- return '' + value;
+ if (type === 'minus') {
+ stepper -= step;
+ } else if (type === 'plus') {
+ stepper += step;
+ }
+
+ this.triggerEvent('change', stepper);
+ this.triggerEvent(type);
+ },
+
+ handleZanStepperMinus(e) {
+ this.handleZanStepperChange(e, 'minus');
+ },
+
+ handleZanStepperPlus(e) {
+ this.handleZanStepperChange( e, 'plus');
+ },
+
+ handleZanStepperBlur(e) {
+ const dataset = e.currentTarget.dataset;
+ let value = e.detail.value;
+ const { min, max } = this.data;
+
+ if (!value) {
+ setTimeout(() => {
+ this.triggerEvent('change', min);
+ }, 16);
+ return;
+ }
+
+ value = +value;
+ if (value > max) {
+ value = max;
+ } else if (value < min) {
+ value = min;
+ }
+
+ this.triggerEvent('change', value);
}
-
- value = +value;
- if (value > max) {
- value = max;
- } else if (value < min) {
- value = min;
- }
-
- callback.call(this, componentId, value);
-
- return '' + value;
}
-};
-
-module.exports = Stepper;
+});
diff --git a/packages/stepper/index.json b/packages/stepper/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/stepper/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/stepper/index.wxml b/packages/stepper/index.wxml
index ff711720..c3d2c6c0 100644
--- a/packages/stepper/index.wxml
+++ b/packages/stepper/index.wxml
@@ -1,28 +1,23 @@
-
-
- -
-
- +
+
+
+ -
-
+
+
+ +
+
+
diff --git a/packages/steps/README.md b/packages/steps/README.md
index d92f1ceb..0e9354fa 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -6,15 +6,18 @@
@import "path/to/zanui-weapp/dist/index.wxss";
```
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-```
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-steps": "path/to/zanui-weapp/dist/steps/index"
+ }
+}
### 代码演示
在模板中使用 zan-steps 模板，并传入相应数据
```html
-
+
```
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
diff --git a/packages/steps/index.js b/packages/steps/index.js
new file mode 100644
index 00000000..651992f4
--- /dev/null
+++ b/packages/steps/index.js
@@ -0,0 +1,20 @@
+Component({
+ properties: {
+ type: {
+ type: String,
+ value: 'horizon'
+ },
+
+ hasDesc: {
+ type: Boolean,
+ value: false
+ },
+
+ steps: { // 必须
+ type: Array,
+ value: []
+ },
+
+ className: String
+ }
+})
diff --git a/packages/steps/index.json b/packages/steps/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/steps/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml
index 7e57b18b..cdcfbafa 100644
--- a/packages/steps/index.wxml
+++ b/packages/steps/index.wxml
@@ -1,15 +1,13 @@
-
-
-
- {{ step.text }}
- {{ step.desc }}
-
-
-
-
+
+
+ {{ step.text }}
+ {{ step.desc }}
+
+
+
-
+
diff --git a/packages/switch/README.md b/packages/switch/README.md
index c46968ec..e0550fdc 100644
--- a/packages/switch/README.md
+++ b/packages/switch/README.md
@@ -1,47 +1,54 @@
## Switch 开关
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-```
-```js
-const { Switch, extend } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Switch 里面声明的方法
-Page(extend({}, Switch, {
- // ...
-}));
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-switch": "/packages/switch/index"
+ }
+}
```
### 代码演示
-在模板中使用 zan-switch 模板，并传入相应数据
+=======
```html
-
+
```
+```js
+Page({
+ data: {
+ disabled: false,
+ checked: false,
+ loading: false
+ },
+
+ methods: {
+ handleFieldChange(event, data) {
+ console.log(event, data);
+ }
+ }
+});
+```
+
+### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| loading | switch 是否是 loading 状态 | Boolean | false | |
| disabled | 是否不可用 | Boolean | false | |
| checked | 是否打开状态 | Boolean | false | 必须 |
-| componentId | 用于在一个页面上使用多个 switch 时，进行区分 | String | | |
-当 switch 被点击时，可以在页面中注册 handleZanSwitchChange 方法来监听
-```js
-Page(extend({}, Tab, {
- handleZanSwitchChange({ componentId, checked }) {
- // componentId 即为在模板中传入的 componentId
- // 用于在一个页面上使用多个 switch 时，进行区分
- // checked 表示 switch 的选中状态
- this.setData({ checked });
- }
-}));
-```
+### Event
+
+| 事件名称 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | event对象和数据对象（包含loading和checked） |
+
diff --git a/packages/switch/index.js b/packages/switch/index.js
index c73c0cab..8b99051a 100644
--- a/packages/switch/index.js
+++ b/packages/switch/index.js
@@ -1,25 +1,31 @@
-var Switch = {
- _handleZanSwitchChange(e) {
- var dataset = e.currentTarget.dataset;
+Component({
+ properties: {
+ checked: {
+ type: Boolean,
+ value: false
+ },
- var checked = !dataset.checked;
- var loading = dataset.loading;
- var disabled = dataset.disabled;
- var componentId = dataset.componentId;
+ loading: {
+ type: Boolean,
+ value: false
+ },
- if (loading || disabled) return;
+ disabled: {
+ type: Boolean,
+ value: false
+ }
+ },
- console.info('[zan:switch:change]', { checked, componentId });
-
- if (this.handleZanSwitchChange) {
- this.handleZanSwitchChange({
+ methods: {
+ handleZanSwitchChange(event) {
+ if (this.data.loading || this.data.disabled) {
+ return;
+ }
+ let checked = !this.data.checked;
+ this.triggerEvent('change', {
checked,
- componentId
+ loading: this.data.loading
});
- } else {
- console.warn('页面缺少 handleZanSwitchChange 回调函数');
}
}
-};
-
-module.exports = Switch;
+});
diff --git a/packages/switch/index.json b/packages/switch/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/switch/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/switch/index.wxml b/packages/switch/index.wxml
index b99d2e3b..9d8fa233 100644
--- a/packages/switch/index.wxml
+++ b/packages/switch/index.wxml
@@ -1,15 +1,12 @@
-
-
-
-
-
-
+
+
+
-
+
+
diff --git a/packages/tab/README.md b/packages/tab/README.md
index 9131b2e3..5e368077 100644
--- a/packages/tab/README.md
+++ b/packages/tab/README.md
@@ -1,41 +1,53 @@
## Tab 标签
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-tab": "path/to/zanui-weapp/dist/tab/index"
+ }
+}
```
-在需要使用的页面里引入组件库模板和脚本
-```html
-
-```
+在 index.js 中声明组件数据
```js
-const { extend, Tab } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Tab 里面声明的方法
-Page(extend({}, Tab, {
- // ...
-}));
+// 在 Page 中声明 Tab 依赖的展示数据
+Page({
+ data: {
+ list: [{
+ id: 'xxx',
+ title: 'xxx'
+ }],
+ selectedId: 'xxx',
+ ...
+ }
+})
```
### 代码演示
-在模板中使用 zan-tab 模板，并传入相应数据
+可以在任意位置上使用 zan-tab 标签。传入对应的数据即可。
```html
-
+
```
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
-| tab | tab 配置对象 | Object | - | |
-| tab.scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
-| tab.list | 可选项列表 | Array | - | |
-| tab.selectedId | 选中id | - | - | |
-| tab.height | tab高度 | Number | - | |
-| componentId | 用于区分页面多个 tab 组件 | String | - | |
+| scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
+| list | 可选项列表 | Array | - | |
+| selectedId | 选中id | - | - | |
+| height | tab高度 | Number | - | |
+| fixed | 是否固定位置 | Boolean | - | |
-tab 组件中，tab.list 数据格式如下
+tab 组件中，list 数据格式如下
```js
[{
// tab 项 id
@@ -57,12 +69,10 @@ tab 组件中，tab.list 数据格式如下
}]
```
-当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
+可以监听 bindtabchange 事件回调，在页面注册回调函数
```js
-Page(extend({}, Tab, {
- handleZanTabChange({ componentId, selectedId }) {
- // componentId 即为在模板中传入的 componentId
- // 用于在一个页面上使用多个 tab 时，进行区分
+Page({
+ customCallback(selectedId) {
// selectId 表示被选中 tab 项的 id
}
}));
diff --git a/packages/tab/index.js b/packages/tab/index.js
index ff3c474e..23568383 100644
--- a/packages/tab/index.js
+++ b/packages/tab/index.js
@@ -1,19 +1,39 @@
-const { extractComponentId } = require('../common/helper');
+Component({
+ externalClasses: 'class',
-var Tab = {
- _handleZanTabChange(e) {
- const componentId = extractComponentId(e);
- const dataset = e.currentTarget.dataset;
- const selectedId = dataset.itemId;
- const data = { componentId, selectedId };
+ properties: {
+ scroll: {
+ type: Boolean,
+ value: false
+ },
+ fixed: {
+ type: Boolean,
+ value: false
+ },
+ height: {
+ type: Number,
+ value: 0
+ },
+ list: {
+ type: Array,
+ value: []
+ },
+ selectedId: {
+ type: [String, Number],
+ value: ''
+ }
+ },
- console.info('[zan:tab:change]', data);
- if (this.handleZanTabChange) {
- this.handleZanTabChange(data);
- } else {
- console.warn('页面缺少 handleZanTabChange 回调函数');
+ methods: {
+ _handleZanTabChange(e) {
+ const selectedId = e.currentTarget.dataset.itemId;
+
+ this.setData({
+ selectedId
+ });
+
+ console.info('[zan:tab:change] selectedId:', selectedId);
+ this.triggerEvent('tabchange', selectedId);
}
}
-};
-
-module.exports = Tab;
+})
diff --git a/packages/tab/index.json b/packages/tab/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/tab/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/tab/index.pcss b/packages/tab/index.pcss
index c0d492fa..15984d8b 100644
--- a/packages/tab/index.pcss
+++ b/packages/tab/index.pcss
@@ -16,7 +16,7 @@
.zan-tab__item {
flex: 1;
display: inline-block;
- padding: 0 10px;
+ padding: 0 5px;
line-height: 0;
box-sizing: border-box;
overflow: hidden;
diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml
index 6ece0e42..1a52111e 100644
--- a/packages/tab/index.wxml
+++ b/packages/tab/index.wxml
@@ -1,37 +1,47 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{ item.title }}
+
+ {{ item.title }}
+
diff --git a/packages/tag/README.md b/packages/tag/README.md
index 9f262adc..b24ad0c8 100644
--- a/packages/tag/README.md
+++ b/packages/tag/README.md
@@ -1,25 +1,45 @@
## Tag 标签
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 json 文件中配置tag组件
+```json
+"usingComponents": {
+ "zan-tag": "/dist/tag/index"
+}
```
+### 属性
+
+| 名称 | 类型 | 是否必须 | 默认 | 描述 |
+|---------|---------|----------|------|-------|
+| type | String | 否 | 空 | tag类型，值有primary、warn、danger |
+| plain | Boolean | 否 | false | tag是否镂空，默认为false |
+| disabled | Boolean | 否 | false | tag是否禁用，默认为false |
+
### 代码演示
-直接在元素上添加`zan-tag`类即可。同时支持 danger, warn, primary 三种主题色。
-添加`zan-tag--disabled`以后，会以不可用形式展示
+#### 基础用法
```html
-灰色
-会员折扣
-返现
-返现
-
-不可用
+取消订单
```
-添加`zan-tag--plain`以后，即可展示镂空样式标签
+#### 类型
+tag支持额外的三种类型 primary, danger, warn
```html
-返现
+会员折扣
+返现
+返现
```
+
+
+#### 其他
+tag镂空状态
+```html
+返现
+```
+
+tag禁用状态
+```html
+不可用
+```
+
diff --git a/packages/tag/index.js b/packages/tag/index.js
new file mode 100644
index 00000000..9f1bcbd2
--- /dev/null
+++ b/packages/tag/index.js
@@ -0,0 +1,15 @@
+Component({
+ properties: {
+ type: {
+ type: String,
+ },
+ plain: {
+ type: Boolean,
+ value: false,
+ },
+ disabled: {
+ type: Boolean,
+ value: false,
+ }
+ }
+});
\ No newline at end of file
diff --git a/packages/tag/index.json b/packages/tag/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/tag/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml
new file mode 100644
index 00000000..194034d9
--- /dev/null
+++ b/packages/tag/index.wxml
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/packages/toast/README.md b/packages/toast/README.md
index cb3a40a7..140caa9b 100644
--- a/packages/toast/README.md
+++ b/packages/toast/README.md
@@ -1,64 +1,53 @@
## Toast 轻提示
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 json 文件中配置 toast 组件
+```json
+"usingComponents": {
+ "zan-toast": "/path/to/zanui-weapp/dist/toast/index"
+}
```
在需要使用的页面里引入组件库模板和脚本
```html
-
-
-
-
+
```
```js
-const { Toast, extend } = require('path/to/zanui-weapp/dist/index');
+const Toast = require('path/to/zanui-weapp/dist/toast/toast');
-// 在 Page 中混入 Toast 里面声明的方法
-Page(extend({}, Toast, {
+Page({
// ...
-}));
-```
-
-### 代码演示
-在 js 中直接调用 this.showZanToast 即可
-```js
-this.showZanToast('toast的内容');
-
-this.showZanToast({
- title: 'toast的内容'
+ // 可以在任意方法里直接调用，即可唤起
+ handleClick() {
+ Toast({
+ message: 'toast me',
+ selector: '#zan-toast-test'
+ });
+ }
});
```
-Toast 支持在文字上展示图标，用法如下
+#### 加载提示
```js
-this.showZanToast({
- title: 'toast的内容',
- // icon 仅支持 Icon 组件内提供的
- icon: 'fail'
+Toast.loading({
+ selector: '#zan-toast-test'
});
```
-Toast 组件扩展了一个 showZanLoading 的方法，快速展示加载中
-```js
-this.showZanLoading('toast的内容');
-```
-
### 参数说明
#### 方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
-| showZanToast | `title \| options`, `timeout` | - | 展示提示 |
-| showZanLoading | `title \| options` | - | 展示加载提示 |
-| clearZanToast | | - | 关闭提示 |
+| Toast | `options`, `timeout` | - | 展示提示 |
+| Toast.loading | `options` | - | 展示加载提示 |
+| Toast.clear | - | - | 关闭提示 |
#### options 具体参数如下
-| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
-| title | toast 显示文案 | String | - | |
-| icon | toast 显示图标，仅支持 Icon 组件内提供的和 `loading` | String | - | |
+| message | toast 显示文案 | String | - | |
+| type | 提示类型 | String | - | loading success fail |
+| icon | toast 显示图标，可以用 icon 里面支持的所有图标 | String | - | - |
| image | toast 显示图标，为图片的链接，传入此值后会覆盖 icon 值 | String | - | |
| timeout | toast 显示时间，小于0则会一直显示，需要手动调用 clearZanToast 清除 | Number | - | |
diff --git a/packages/toast/index.js b/packages/toast/index.js
index 56e8c82f..a5ba4e7d 100644
--- a/packages/toast/index.js
+++ b/packages/toast/index.js
@@ -1,66 +1,40 @@
-module.exports = {
- showZanToast(title, timeout) {
- const options = formatParameter(title, timeout);
-
- // 清除上一轮的计时器
- const { timer = 0 } = this.data.zanToast || {};
- clearTimeout(timer);
-
- // 弹层设置~
- const zanToast = {
- show: true,
- icon: options.icon,
- image: options.image,
- title: options.title
- };
- this.setData({
- zanToast
- });
-
- // 传入的显示时长小于0，就认为需要一直显示
- if (timeout < 0) {
- return;
- }
-
- // 下一轮计时器
- const nextTimer = setTimeout(() => {
- this.clearZanToast();
- }, timeout || 3000);
-
- this.setData({
- 'zanToast.timer': nextTimer
- });
- },
-
- // 清除所有 toast
- clearZanToast() {
- const { timer = 0 } = this.data.zanToast || {};
- clearTimeout(timer);
-
- this.setData({
- 'zanToast.show': false
- });
- },
-
- // 快捷方法，显示 loading
- showZanLoading(title) {
- const options = formatParameter(title);
-
- this.showZanToast({
- ...options,
- icon: 'loading'
- });
- }
+const DEFAULT_DATA = {
+ show: false,
+ message: '',
+ icon: '',
+ image: '',
+ mask: false
};
-function formatParameter(title, timeout = 0) {
- // 如果传入的 title 是对象，那么认为所有的配置属性都在这个对象中了
- if (typeof title === 'object') {
- return title;
- }
+const SUPPORT_TYPE = ['loading', 'success', 'fail'];
- return {
- title,
- timeout
- };
-}
+Component({
+ data: {
+ ...DEFAULT_DATA
+ },
+
+ methods: {
+ show(options) {
+ const toastOptions = { ...options };
+
+ let icon = options.icon || '';
+ let image = options.image || '';
+ if (SUPPORT_TYPE.indexOf(options.type) > -1) {
+ icon = options.type;
+ image = '';
+ }
+
+ this.setData({
+ ...toastOptions,
+ icon,
+ image
+ });
+ },
+
+ clear() {
+ this.setData({
+ ...DEFAULT_DATA
+ });
+ }
+ }
+});
diff --git a/packages/toast/index.json b/packages/toast/index.json
new file mode 100644
index 00000000..fc0d0bf9
--- /dev/null
+++ b/packages/toast/index.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "zan-icon": "../icon/index"
+ }
+}
diff --git a/packages/toast/index.pcss b/packages/toast/index.pcss
index bab8976b..ee286509 100644
--- a/packages/toast/index.pcss
+++ b/packages/toast/index.pcss
@@ -21,6 +21,7 @@
}
.zan-toast__icon {
+ display: block;
width: 40px;
height: 40px;
line-height: 40px;
@@ -35,6 +36,16 @@
line-height: 0;
}
+.zan-loading {
+ width:20px;
+ height:20px;
+ display: inline-block;
+ vertical-align: middle;
+ animation: weuiLoading 1s steps(12, end) infinite;
+ background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
+ background-size: 100%;
+}
+
.zan-toast__icon-loading .zan-loading {
width: 40px;
height: 40px;
diff --git a/packages/toast/index.wxml b/packages/toast/index.wxml
index 0798d9f8..ac180b71 100644
--- a/packages/toast/index.wxml
+++ b/packages/toast/index.wxml
@@ -1,31 +1,30 @@
-
-
+
+
-
-
+
-
-
-
-
-
-
+
+
+
+
-
- {{ zanToast.title }}
-
-
+
+ {{ message }}
+
diff --git a/packages/toast/toast.js b/packages/toast/toast.js
new file mode 100644
index 00000000..b2f57b4e
--- /dev/null
+++ b/packages/toast/toast.js
@@ -0,0 +1,60 @@
+let timeoutData = {
+ timeoutId: 0,
+ toastCtx: null
+}
+
+function Toast(options = {}, pageCtx) {
+ let ctx = pageCtx;
+ if (!ctx) {
+ const pages = getCurrentPages();
+ ctx = pages[pages.length - 1];
+ }
+ const toastCtx = ctx.selectComponent(options.selector);
+
+ if (!toastCtx) {
+ console.error('无法找到对应的toast组件，请于页面中注册并在 wxml 中声明 toast 自定义组件');
+ return;
+ }
+
+ if (timeoutData.timeoutId) {
+ Toast.clear();
+ }
+
+ toastCtx.show({
+ ...options,
+ show: true
+ });
+
+ const timeoutId = setTimeout(() => {
+ toastCtx.clear();
+ }, options.timeout || 3000);
+
+ timeoutData = {
+ timeoutId,
+ toastCtx
+ }
+};
+
+// 清理所有 toast
+Toast.clear = function() {
+ clearTimeout(timeoutData.timeoutId);
+
+ try {
+ timeoutData.toastCtx && timeoutData.toastCtx.clear();
+ } catch (e) {}
+
+ timeoutData = {
+ timeoutId: 0,
+ toastCtx: null
+ }
+}
+
+// 显示 loading
+Toast.loading = function(options = {}) {
+ Toast({
+ ...options,
+ type: 'loading'
+ });
+}
+
+module.exports = Toast;
diff --git a/packages/toptips/README.md b/packages/toptips/README.md
index 73fe777b..a0f04d69 100644
--- a/packages/toptips/README.md
+++ b/packages/toptips/README.md
@@ -1,29 +1,129 @@
## TopTips 顶部提示
### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+ "usingComponents": {
+ "zan-toptips": "path/to/zanui-weapp/dist/toptips/index"
+ }
+}
```
-在需要使用的页面里引入组件库模板和脚本
-```html
-
+在 index.js 中声明组件数据
-
-
-```
+**toptips提供了声明式和命令式2种调用方式，但是由于小程序本身限制，会有一定使用的要求**
```js
-const { TopTips, extend } = require('path/to/zanui-weapp/dist/index');
+// 使用声明式调用的方式， 必须在Page中声明 $zanui对象， 结构如下
+// 同时在其他触发toptips显示的函数中，需要手动改变对应的数值
+Page({
+ data: {
+ duration: 1000,
+ content: 'xxx',
+ $zanui: {
+ toptips: {
+ show: false
+ }
+ }
+ }
+})
+
+// 使用命令式调用的方式，必须在 wxml 模板中声明组件id，
+// 默认我们使用了 zan-toptips， 如果使用者要更换，可以手动传入
+
+const Toptips = require('path/to/zanui-weapp/dist/toptips/index');
+Page({
+ customCallback() {
+ Toptips('只穿文案展示');
+ }
+})
-// 在 Page 中混入 TopTips 里面声明的方法
-Page(extend({}, TopTips, {
- // ...
-}));
```
+
### 代码演示
-在 js 中直接调用 this.showZanTopTips 即可
+
+### 声明式调用
+使用声明式调用
```js
-this.showZanTopTips('toptips的内容');
+Page({
+ data: {
+ duration: 1000,
+ content: 'xxx',
+ $zanui: {
+ toptips: {
+ show: false
+ }
+ }
+ },
+
+ customCallback() {
+ this.setData({
+ $zanui: {
+ toptips: {
+ show: true
+ }
+ }
+ });
+
+ setTimeout(() => {
+ this.setData({
+ $zanui: {
+ toptips: {
+ show: false
+ }
+ }
+ })
+ }, this.data.duration);
+ }
+})
```
+```html
+
+```
+
+### 命令式调用
+```js
+Page({
+ customCallback() {
+ Toptips('我只改文案')
+ }
+})
+```
+```html
+
+```
+
+### 修改组件id
+```js
+Page({
+ customCallback() {
+ Toptips({
+ content: '传入其他参数',
+ selector: '#other-id',
+ duration: 5000
+ })
+ }
+})
+```
+```html
+
+```
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| content | 展示文案 | String | - | |
+| duration | 弹层持续时间 | Number | 3000 | |
+| isShow | 弹层是否展示 | Boolean | false | |
+| color | 字体颜色 | String | `#fff` | |
+| backgroundColor | 提示背景色 | String | `#e64340` |
\ No newline at end of file
diff --git a/packages/toptips/index.js b/packages/toptips/index.js
index c1d1cea5..b34ca615 100644
--- a/packages/toptips/index.js
+++ b/packages/toptips/index.js
@@ -1,39 +1,74 @@
-module.exports = {
- showZanTopTips(content = '', options = {}) {
- let zanTopTips = this.data.zanTopTips || {};
- // 如果已经有一个计时器在了，就清理掉先
- if (zanTopTips.timer) {
- clearTimeout(zanTopTips.timer);
- zanTopTips.timer = 0;
+const FONT_COLOR = '#fff';
+const BG_COLOR = '#e64340';
+
+Component({
+ properties: {
+ content: String,
+ color: {
+ type: String,
+ value: FONT_COLOR
+ },
+ backgroundColor: {
+ type: String,
+ value: BG_COLOR
+ },
+ isShow: {
+ type: Boolean,
+ value: false
+ },
+ duration: {
+ type: Number,
+ value: 3000
}
+ },
- if (typeof options === 'number') {
- options = {
- duration: options
- };
- }
+ methods: {
+ show() {
+ const duration = this.data.duration;
- // options参数默认参数扩展
- options = Object.assign({
- duration: 3000
- }, options);
-
- // 设置定时器，定时关闭topTips
- let timer = setTimeout(() => {
+ this._timer && clearTimeout(this._timer);
this.setData({
- 'zanTopTips.show': false,
- 'zanTopTips.timer': 0
+ isShow: true
});
- }, options.duration);
- // 展示出topTips
- this.setData({
- zanTopTips: {
- show: true,
- content,
- options,
- timer
+ if (duration > 0 && duration !== Infinity) {
+ this._timer = setTimeout(() => {
+ this.hide();
+ }, duration);
}
- });
+ },
+
+ hide() {
+ this._timer = clearTimeout(this._timer);
+
+ this.setData({
+ isShow: false
+ });
+ }
}
-};
+});
+
+function Toptips(options = {}) {
+ const pages = getCurrentPages();
+ const ctx = pages[pages.length - 1];
+ const defaultOptions = {
+ selector: '#zan-toptips',
+ duration: 3000
+ };
+
+ options = Object.assign(defaultOptions,parseParam(options));
+
+ const $toptips = ctx.selectComponent(options.selector);
+ delete options.selector;
+
+ $toptips.setData({
+ ...options
+ });
+ $toptips && $toptips.show();
+}
+
+function parseParam(params) {
+ return typeof params === 'object' ? params : { content: params };
+}
+
+module.exports = Toptips;
\ No newline at end of file
diff --git a/packages/toptips/index.json b/packages/toptips/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/toptips/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/toptips/index.wxml b/packages/toptips/index.wxml
index fe089460..e293b276 100644
--- a/packages/toptips/index.wxml
+++ b/packages/toptips/index.wxml
@@ -1,3 +1 @@
-
- {{ zanTopTips.content }}
-
+{{ content }}
diff --git a/yarn.lock b/yarn.lock
index 80bb3c5f..a9cb27ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1180,6 +1180,10 @@ binary-extensions@^1.0.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+binaryextensions@~1.0.0:
+ version "1.0.1"
+ resolved "https://registry.npmjs.org/binaryextensions/-/binaryextensions-1.0.1.tgz#1e637488b35b58bda5f4774bf96a5212a8c90755"
+
block-stream@*:
version "0.0.9"
resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -1982,6 +1986,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
+cross-env@^5.1.4:
+ version "5.1.4"
+ resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.1.4.tgz#f61c14291f7cc653bb86457002ea80a04699d022"
+ dependencies:
+ cross-spawn "^5.1.0"
+ is-windows "^1.0.0"
+
cross-spawn@^5.0.1, cross-spawn@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2655,7 +2666,7 @@ escape-html@~1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -3656,10 +3667,24 @@ gulp-postcss@^7.0.0:
postcss-load-config "^1.2.0"
vinyl-sourcemaps-apply "^0.2.1"
+gulp-remove-logging@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.npmjs.org/gulp-remove-logging/-/gulp-remove-logging-1.2.0.tgz#fd16c19d368e243430126c619a393363e2cfe5a6"
+ dependencies:
+ gulp-replace "0.5.4"
+
gulp-rename@^1.2.2:
version "1.2.2"
resolved "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817"
+gulp-replace@0.5.4:
+ version "0.5.4"
+ resolved "https://registry.npmjs.org/gulp-replace/-/gulp-replace-0.5.4.tgz#69a67914bbd13c562bff14f504a403796aa0daa9"
+ dependencies:
+ istextorbinary "1.0.2"
+ readable-stream "^2.0.1"
+ replacestream "^4.0.0"
+
gulp-util@3.0.8, gulp-util@^3.0.0, gulp-util@^3.0.8:
version "3.0.8"
resolved "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -4446,14 +4471,14 @@ is-whitespace@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
+is-windows@^1.0.0, is-windows@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
is-windows@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
-is-windows@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-
is-wsl@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@@ -4547,6 +4572,13 @@ istanbul-reports@^1.1.4:
dependencies:
handlebars "^4.0.3"
+istextorbinary@1.0.2:
+ version "1.0.2"
+ resolved "https://registry.npmjs.org/istextorbinary/-/istextorbinary-1.0.2.tgz#ace19354d1a9a0173efeb1084ce0f87b0ad7decf"
+ dependencies:
+ binaryextensions "~1.0.0"
+ textextensions "~1.0.0"
+
jest-changed-files@^22.2.0:
version "22.2.0"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.2.0.tgz#517610c4a8ca0925bdc88b0ca53bd678aa8d019e"
@@ -7362,6 +7394,14 @@ replace-ext@0.0.1:
version "0.0.1"
resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+replacestream@^4.0.0:
+ version "4.0.3"
+ resolved "https://registry.npmjs.org/replacestream/-/replacestream-4.0.3.tgz#3ee5798092be364b1cdb1484308492cb3dff2f36"
+ dependencies:
+ escape-string-regexp "^1.0.3"
+ object-assign "^4.0.1"
+ readable-stream "^2.0.2"
+
request-promise-core@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
@@ -8219,6 +8259,10 @@ text-table@^0.2.0, text-table@~0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+textextensions@~1.0.0:
+ version "1.0.2"
+ resolved "https://registry.npmjs.org/textextensions/-/textextensions-1.0.2.tgz#65486393ee1f2bb039a60cbba05b0b68bd9501d2"
+
throat@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"