[build] 3.0.0

2025-04-06 03:58:05 +08:00 · 2018-04-28 12:08:10 +08:00 · 2018-04-28 12:08:10 +08:00 · b91cf980ac
commit b91cf980ac
parent d331b69b0c
100 changed files with 1563 additions and 710 deletions
--- a/dist/actionsheet/index.js
+++ b/dist/actionsheet/index.js
@ -1,41 +1,36 @@
-const { extractComponentId } = require('../common/helper');
-
-module.exports = {
-  _handleZanActionsheetMaskClick({ currentTarget = {} }) {
-    const dataset = currentTarget.dataset || {};
-    const { componentId, closeOnClickOverlay } = dataset;
-
-    // 判断是否在点击背景时需要关闭弹层
-    if (!closeOnClickOverlay) {
-      return;
+Component({
+  externalClasses: ['mask-class', 'container-class'],
+  properties: {
+    actions: {
+      type: Array,
+      value: []
+    },
+    show: {
+      type: Boolean,
+      value: false
+    },
+    cancelWithMask: {
+      type: Boolean,
+      value: true
+    },
+    cancelText: {
+      type: String,
+      value: ''
    }
-
-    resolveCancelClick.call(this, { componentId });
  },
-
-  _handleZanActionsheetCancelBtnClick(e) {
-    const componentId = extractComponentId(e);
-
-    resolveCancelClick.call(this, { componentId });
-  },
-
-  _handleZanActionsheetBtnClick({ currentTarget = {} }) {
-    const dataset = currentTarget.dataset || {};
-    const { componentId, index } = dataset;
-
-    if (this.handleZanActionsheetClick) {
-      this.handleZanActionsheetClick({ componentId, index });
-    } else {
-      console.warn('页面缺少 handleZanActionsheetClick 回调函数');
+  methods: {
+    onMaskClick() {
+      if (this.data.cancelWithMask) {
+        this.cancelClick();
+      }
+    },
+    cancelClick() {
+      this.triggerEvent('cancel');
+    },
+    handleBtnClick({ currentTarget = {} }) {
+      const dataset = currentTarget.dataset || {};
+      const { index } = dataset;
+      this.triggerEvent('actionclick', { index });
    }
  }
-};
-
-function resolveCancelClick({ componentId }) {
-  
-  if (this.handleZanActionsheetCancel) {
-    this.handleZanActionsheetCancel({ componentId });
-  } else {
-    console.warn('页面缺少 handleZanActionsheetCancel 回调函数');
-  }
-}
+});
--- a/dist/actionsheet/index.json
+++ b/dist/actionsheet/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-btn": "../btn/index"
+  }
+}
--- a/dist/actionsheet/index.wxml
+++ b/dist/actionsheet/index.wxml
@ -1,40 +1,39 @@
-<template name="zan-actionsheet">
-  <view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
-    <view
-      class="zan-actionsheet__mask"
-      catchtap="_handleZanActionsheetMaskClick"
-      data-close-on-click-overlay="{{ closeOnClickOverlay }}"
-      data-component-id="{{ componentId }}"></view>
-    <view class="zan-actionsheet__container">
-      <!-- 实际按钮显示 -->
-      <button
-        wx:for="{{ actions }}"
-        wx:for-index="index"
-        wx:for-item="item"
-        wx:key="{{ index }}-{{ item.name }}"
-        catchtap="_handleZanActionsheetBtnClick"
-        data-component-id="{{ componentId }}"
-        data-index="{{ index }}"
-        open-type="{{ item.openType }}"
-        class="zan-btn zan-actionsheet__btn {{ item.loading ? 'zan-btn--loading' : '' }} {{ item.className }}"
-      >
-        <text>{{ item.name }}</text>
-        <text
+<view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
+  <view
+    class="mask-class zan-actionsheet__mask"
+    bindtap="onMaskClick"
+  ></view>
+  <view class="container-class zan-actionsheet__container">
+    <!-- 选项按钮 -->
+    <zan-btn
+      wx:for="{{ actions }}"
+      wx:key="{{ index }}-{{ item.name }}"
+      bind:btnclick="handleBtnClick"
+      data-index="{{ index }}"
+      open-type="{{ item.openType }}"
+      custom-class="zan-actionsheet__btn"
+      loading="{{ item.loading }}"
+    >
+      <!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
+      <view class="zan-actionsheet__btn-content {{ item.loading ? 'zan-actionsheet__btn--loading' : '' }}">
+        <view class="zan-actionsheet__name">{{ item.name }}</view>
+        <view
          wx:if="{{ item.subname }}"
-          class="zan-actionsheet__subname">{{ item.subname }}</text>
-      </button>
-
-      <!-- 关闭按钮 -->
-      <view
-        wx:if="{{ cancelText }}"
-        class="zan-actionsheet__footer"
-      >
-        <button
-          class="zan-btn zan-actionsheet__btn"
-          catchtap="_handleZanActionsheetCancelBtnClick"
-          data-component-id="{{ componentId }}"
-        >{{ cancelText }}</button>
+          class="zan-actionsheet__subname">
+          {{ item.subname }}
+        </view>
      </view>
+    </zan-btn>
+
+    <!-- 关闭按钮 -->
+    <view
+      wx:if="{{ cancelText }}"
+      class="zan-actionsheet__footer"
+    >
+      <zan-btn
+        custom-class="zan-actionsheet__btn"
+        catchtap="cancelClick"
+      >{{ cancelText }}</zan-btn>
    </view>
  </view>
-</template>
+</view>
--- a/dist/actionsheet/index.wxss
+++ b/dist/actionsheet/index.wxss
@ -1 +1 @@
-.zan-actionsheet{background-color:#f8f8f8}.zan-actionsheet__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.zan-actionsheet__container{position:fixed;left:0;right:0;bottom:0;background:#f8f8f8;transform:translate3d(0,50%,0);transform-origin:center;transition:all .2s ease;z-index:11;opacity:0;visibility:hidden}.zan-actionsheet__btn.zan-btn{height:50px;line-height:50px;margin-bottom:0}.zan-actionsheet__btn.zan-btn::after{border-width:0;border-bottom-width:1px}.zan-actionsheet__btn.zan-btn:last-child::after{border-bottom-width:0}.zan-actionsheet__subname{margin-left:2px;font-size:12px;color:#666}.zan-actionsheet__footer{margin-top:10px}.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname{color:transparent}.zan-actionsheet--show .zan-actionsheet__container{opacity:1;transform:translate3d(0,0,0);visibility:visible}.zan-actionsheet--show .zan-actionsheet__mask{display:block}
+.zan-actionsheet{background-color:#f8f8f8}.zan-actionsheet__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.zan-actionsheet__container{position:fixed;left:0;right:0;bottom:0;background:#f8f8f8;transform:translate3d(0,50%,0);transform-origin:center;transition:all .2s ease;z-index:11;opacity:0;visibility:hidden}.zan-actionsheet__btn{margin-bottom:0!important}.zan-actionsheet__footer .zan-actionsheet__btn{background:#fff}.zan-actionsheet__btn-content{display:flex;flex-direction:row;justify-content:center}.zan-actionsheet__subname{color:#999}.zan-actionsheet__name,.zan-actionsheet__subname{height:45px;line-height:45px}.zan-actionsheet__btn.zan-btn:last-child::after{border-bottom-width:0}.zan-actionsheet__subname{margin-left:2px;font-size:12px}.zan-actionsheet__footer{margin-top:10px}.zan-actionsheet__btn--loading .zan-actionsheet__subname{color:transparent}.zan-actionsheet--show .zan-actionsheet__container{opacity:1;transform:translate3d(0,0,0);visibility:visible}.zan-actionsheet--show .zan-actionsheet__mask{display:block}
--- a/dist/badge/index.js
+++ b/dist/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
+    }
+  }
+});
--- a/dist/badge/index.json
+++ b/dist/badge/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/badge/index.wxml
+++ b/dist/badge/index.wxml
@ -0,0 +1,8 @@
+<view class="zan-badge">
+  <text
+    class="zan-badge__text"
+    style="color: {{ color }}; background-color: {{ backgroundColor }};font-size: {{ fontSize * 2 }}px; box-shadow: {{ boxShadow }};"
+  >
+    <slot></slot>
+  </text>
+</view>
--- a/dist/badge/index.wxss
+++ b/dist/badge/index.wxss
@ -1 +1 @@
-.zan-badge{position:relative}.zan-badge__count{position:absolute;top:-16px;right:0;height:1.6em;min-width:1.6em;line-height:1.6;padding:0 .4em;font-size:20px;border-radius:.8em;background:#f44;color:#fff;text-align:center;white-space:nowrap;transform:translateX(50%) scale(.5);transform-origin:center;z-index:10;box-shadow:0 0 0 2px #fff;box-sizing:border-box}
+.zan-badge{position:relative}.zan-badge__text{position:absolute;top:-.8em;right:0;height:1.6em;min-width:1.6em;line-height:1.6;padding:0 .4em;font-size:20px;border-radius:.8em;background:#f44;color:#fff;text-align:center;white-space:nowrap;transform:translateX(50%) scale(.5);transform-origin:center;z-index:10;box-shadow:0 0 0 2px #fff;box-sizing:border-box}
--- a/dist/btn-group/index.js
+++ b/dist/btn-group/index.js
@ -0,0 +1,28 @@
+Component({
+  relations: {
+    '../btn/index': {
+      type: 'child',
+      linked () {
+        updateBtnChild.call(this);
+      },
+      linkChange() {
+        updateBtnChild.call(this);
+      },
+      unlinked() {
+        updateBtnChild.call(this);
+      }
+    }
+  }
+});
+
+function updateBtnChild() {
+  let btns = this.getRelationNodes('../btn/index')
+    
+  if (btns.length > 0) {
+    let lastIndex = btns.length - 1
+
+    btns.forEach((btn, index) => {
+      btn.switchLastButtonStatus(index === lastIndex);
+    });
+  }
+}
--- a/dist/btn-group/index.json
+++ b/dist/btn-group/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/btn-group/index.wxml
+++ b/dist/btn-group/index.wxml
@ -0,0 +1,3 @@
+<view class="btn-group">
+  <slot></slot>
+</view>
--- a/dist/btn-group/index.wxss
+++ b/dist/btn-group/index.wxss
@ -0,0 +1,3 @@
+.btn-group {
+  margin: 15px;
+}
--- a/dist/btn/index.js
+++ b/dist/btn/index.js
@ -0,0 +1,56 @@
+
+Component({
+  externalClasses: ['custom-class'],
+  relations: {
+    '../btn-group/index': {
+      type: 'parent',
+      linked() {
+        this.setData({ inGroup: true });
+      },
+      unlinked() {
+        this.setData({ inGroup: false });
+      }
+    }
+  },
+  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: ''
+    }
+  },
+
+  data: {
+    inGroup: false,
+    isLast: false
+  },
+
+  methods: {
+    handleTap() {
+      this.triggerEvent('btnclick');
+    },
+
+    switchLastButtonStatus(isLast = false) {
+      this.setData({ isLast });
+    }
+  }
+});
--- a/dist/btn/index.json
+++ b/dist/btn/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/btn/index.wxml
+++ b/dist/btn/index.wxml
@ -0,0 +1,8 @@
+<button 
+  class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  bindtap="handleTap"
+>
+  <slot></slot>
+</button>
--- a/dist/btn/index.wxss
+++ b/dist/btn/index.wxss
@ -1 +1 @@
-.zan-btn{position:relative;color:#333;background-color:#fff;margin-bottom:10px;padding-left:15px;padding-right:15px;border-radius:2px;font-size:16px;line-height:45px;height:45px;box-sizing:border-box;text-decoration:none;text-align:center;vertical-align:middle}.zan-btn::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-width:1px;border-radius:4px}.zan-btns{margin:15px}.zan-btn--primary{color:#fff;background-color:#4b0}.zan-btn--primary::after{border-color:#0a0}.zan-btn--warn{color:#fff;background-color:#f85}.zan-btn--warn::after{border-color:#f85}.zan-btn--danger{color:#fff;background-color:#f44}.zan-btn--danger::after{border-color:#e33}.zan-btn--small{display:inline-block;height:30px;line-height:30px;font-size:12px;margin-right:5px;margin-bottom:0}.zan-btn--mini{display:inline-block;line-height:21px;height:22px;font-size:10px;margin-right:5px;margin-bottom:0;padding-left:5px;padding-right:5px}.zan-btn--large{border-radius:0;margin-bottom:0;border:none;line-height:50px;height:50px}.zan-btn--plain.zan-btn{background-color:transparent}.zan-btn--plain.zan-btn--primary{color:#06bf04}.zan-btn--plain.zan-btn--warn{color:#f60}.zan-btn--plain.zan-btn--danger{color:#f44}.button-hover{opacity:.9}.zan-btn--loading{color:transparent;opacity:1}.zan-btn--loading::before{position:absolute;left:50%;top:50%;content:' ';width:16px;height:16px;margin-left:-8px;margin-top:-8px;border:3px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;border-radius:8px;box-sizing:border-box;animation:btn-spin .6s linear;animation-iteration-count:infinite}.zan-btn--danger.zan-btn--loading::before,.zan-btn--primary.zan-btn--loading::before,.zan-btn--warn.zan-btn--loading::before{border-color:#fff rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1)}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.zan-btn.zan-btn--disabled{color:#999!important;background:#f8f8f8!important;border-color:#e5e5e5!important;cursor:not-allowed!important;opacity:1!important}.zan-btn.zan-btn--disabled::after{border-color:#e5e5e5!important}.zan-btn--last-child,.zan-btn:last-child{margin-bottom:0;margin-right:0}
+.zan-btn{position:relative;color:#333;background-color:#fff;padding-left:15px;padding-right:15px;border-radius:2px;font-size:16px;line-height:45px;height:45px;box-sizing:border-box;text-decoration:none;text-align:center;vertical-align:middle;overflow:visible}.zan-btn--group{margin-bottom:10px}.zan-btn::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-width:1px;border-radius:4px}.zan-btn--primary{color:#fff;background-color:#4b0}.zan-btn--primary::after{border-color:#0a0}.zan-btn--warn{color:#fff;background-color:#f85}.zan-btn--warn::after{border-color:#f85}.zan-btn--danger{color:#fff;background-color:#f44}.zan-btn--danger::after{border-color:#e33}.zan-btn--small{display:inline-block;height:30px;line-height:30px;font-size:12px}.zan-btn--small.zan-btn--group{margin-bottom:0;margin-right:5px}.zan-btn--mini{display:inline-block;line-height:21px;height:22px;font-size:10px;padding-left:5px;padding-right:5px}.zan-btn--mini.zan-btn--group{margin-bottom:0;margin-right:5px}.zan-btn--large{border-radius:0;border:none;line-height:50px;height:50px}.zan-btn--large.zan-btn--group{margin-bottom:0}.zan-btn--plain.zan-btn{background-color:transparent}.zan-btn--plain.zan-btn--primary{color:#06bf04}.zan-btn--plain.zan-btn--warn{color:#f60}.zan-btn--plain.zan-btn--danger{color:#f44}.button-hover{opacity:.9}.zan-btn--loading{color:transparent;opacity:1}.zan-btn--loading::before{position:absolute;left:50%;top:50%;content:' ';width:16px;height:16px;margin-left:-8px;margin-top:-8px;border:3px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;border-radius:8px;box-sizing:border-box;animation:btn-spin .6s linear;animation-iteration-count:infinite}.zan-btn--danger.zan-btn--loading::before,.zan-btn--primary.zan-btn--loading::before,.zan-btn--warn.zan-btn--loading::before{border-color:#fff rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1)}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.zan-btn.zan-btn--disabled{color:#999!important;background:#f8f8f8!important;border-color:#e5e5e5!important;cursor:not-allowed!important;opacity:1!important}.zan-btn.zan-btn--disabled::after{border-color:#e5e5e5!important}.zan-btn--group.zan-btn--last{margin-bottom:0;margin-right:0}
--- a/dist/capsule/index.js
+++ b/dist/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 : ''
+    }
+  }
+})
--- a/dist/capsule/index.json
+++ b/dist/capsule/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/capsule/index.wxml
+++ b/dist/capsule/index.wxml
@ -1,18 +1,17 @@
-<template name="capsule">
-  <view class="zan-capsule zan-capsule--{{type}}">
-    <block wx:if="{{color}}">
-      <view
-        class="zan-capsule__left"
-        style="background: {{ color }}; border-color: {{ color }}"
-      >{{ leftText }}</view>
-      <view
-        class="zan-capsule__right"
-        style="color: {{ color }}; border-color: {{ color }}"
-      >{{ rightText }}</view>
-    </block>
-    <block wx:else>
-      <view class="zan-capsule__left">{{ leftText }}</view>
-      <view class="zan-capsule__right">{{ rightText }}</view>
-    </block>
-  </view>
-</template>
+<view class="zan-capsule zan-capsule--{{type}}">
+  <block wx:if="{{color}}">
+    <view
+      class="zan-capsule__left"
+      style="background: {{ color }}; border-color: {{ color }}"
+    >{{ leftText }}</view>
+    <view
+      class="zan-capsule__right"
+      style="color: {{ color }}; border-color: {{ color }}"
+    >{{ rightText }}</view>
+  </block>
+  <block wx:else>
+    <view class="zan-capsule__left">{{ leftText }}</view>
+    <view class="zan-capsule__right">{{ rightText }}</view>
+  </block>
+</view>
+
--- a/dist/card/index.js
+++ b/dist/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
+  }
+});
--- a/dist/card/index.json
+++ b/dist/card/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/card/index.wxml
+++ b/dist/card/index.wxml
@ -0,0 +1,33 @@
+<view class="zan-card card-class">
+  <!-- 左侧图片 -->
+  
+  <view class="zan-card__thumb">
+    <image class="zan-card__img"
+      src="{{ thumb }}"
+      mode="aspectFit"
+    ></image>
+  </view>
+  <!-- 右侧详情 -->
+  <view class="zan-card__detail">
+    <slot wx:if="{{ useDetailSlot }}" name="detail-slot"></slot>
+    <block wx:else>
+      <view class="zan-card__detail-row">
+        <view class="zan-card__right-col">¥ {{ price }}</view>
+        <view class="zan-card__left-col zan-ellipsis--l2">
+          {{ title }}
+        </view>
+      </view>
+
+      <view class="zan-card__detail-row zan-c-gray-darker">
+        <view wx:if="{{ num }}" class="zan-card__right-col">x {{ num }}</view>
+        <view wx:if="{{ desc }}" class="zan-card__left-col">
+          {{ desc }}
+        </view>
+      </view>
+
+      <view wx:if="{{ status }}" class="zan-card__detail-row">
+        <view class="zan-card__left-col zan-c-red">{{ status }}</view>
+      </view>
+    </block>
+  </view>
+</view>
--- a/dist/card/index.wxss
+++ b/dist/card/index.wxss
@ -1 +1 @@
-.zan-card{margin-left:0;width:auto;padding:5px 15px;overflow:hidden;position:relative;font-size:14px}.zan-card__thumb{width:90px;height:90px;float:left;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;background-size:cover}.zan-card__img{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;max-width:100%;max-height:100%}.zan-card__detail{margin-left:100px;width:auto;position:relative}.zan-card__detail-row{overflow:hidden;line-height:20px;min-height:20px;margin-bottom:3px}.zan-card__right-col{float:right}.zan-card__left-col{margin-right:80px}
+.zan-c-red{color:#f44!important}.zan-c-gray{color:#c9c9c9!important}.zan-c-gray-dark{color:#999!important}.zan-c-gray-darker{color:#666!important}.zan-c-black{color:#333!important}.zan-c-blue{color:#38f!important}.zan-c-green{color:#06bf04!important}.zan-pull-left{float:left}.zan-pull-right{float:right}.zan-center{text-align:center}.zan-right{text-align:right}.zan-text-deleted{text-decoration:line-through}.zan-font-8{font-size:8px}.zan-font-10{font-size:10px}.zan-font-12{font-size:12px}.zan-font-14{font-size:14px}.zan-font-16{font-size:16px}.zan-font-18{font-size:18px}.zan-font-20{font-size:20px}.zan-font-22{font-size:22px}.zan-font-24{font-size:24px}.zan-font-26{font-size:26px}.zan-font-30{font-size:30px}.zan-font-bold{font-weight:700}.zan-arrow{position:absolute;right:15px;top:50%;display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.zan-ellipsis--l2{max-height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.zan-ellipsis--l3{max-height:60px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.zan-clearfix{zoom:1}.zan-clearfix::after{content:'';display:table;clear:both}.zan-c-red{color:#f44}.zan-c-black{color:#000}.zan-c-green{color:#06bf04}.zan-c-blue{color:#38f}.zan-c-gray{color:#c9c9c9}.zan-c-gray-dark{color:#999}.zan-c-gray-darker{color:#666}.zan-hairline,.zan-hairline--bottom,.zan-hairline--left,.zan-hairline--right,.zan-hairline--surround,.zan-hairline--top,.zan-hairline--top-bottom{position:relative}.zan-hairline--bottom::after,.zan-hairline--left::after,.zan-hairline--right::after,.zan-hairline--surround::after,.zan-hairline--top-bottom::after,.zan-hairline--top::after,.zan-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.zan-hairline--top::after{border-top-width:1px}.zan-hairline--left::after{border-left-width:1px}.zan-hairline--right::after{border-right-width:1px}.zan-hairline--bottom::after{border-bottom-width:1px}.zan-hairline--top-bottom::after{border-width:1px 0}.zan-hairline--surround::after{border-width:1px}.zan-card{display:flex;margin-left:0;padding:5px 15px;overflow:hidden;position:relative;font-size:14px}.zan-card__thumb{width:90px;height:90px;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;background-size:cover}.zan-card__img{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;max-width:100%;max-height:100%}.zan-card__detail{flex:1;margin-left:10px;position:relative}.zan-card__detail-row{overflow:hidden;line-height:20px;min-height:20px;margin-bottom:3px}.zan-card__right-col{float:right}.zan-card__left-col{margin-right:80px}
--- a/dist/cell-group/index.js
+++ b/dist/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()
+      });
+    }
+  }
+})
--- a/dist/cell-group/index.json
+++ b/dist/cell-group/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/cell-group/index.wxml
+++ b/dist/cell-group/index.wxml
@ -0,0 +1,3 @@
+<view class="cell-group">
+  <slot></slot>
+</view>
--- a/dist/cell/index.js
+++ b/dist/cell/index.js
@ -0,0 +1,25 @@
+const warn = (msg, getValue) => {
+  console.warn(msg)
+  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 })
+    }
+  }
+})
--- a/dist/cell/index.json
+++ b/dist/cell/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/cell/index.wxml
+++ b/dist/cell/index.wxml
@ -0,0 +1,21 @@
+<view 
+  bindtap="cellTap"
+  class="zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}">
+
+  <view class="zan-cell__icon">
+    <slot name="icon"></slot>
+  </view>
+
+  <view class="zan-cell__bd">
+    <view wx:if="{{ title }}" class="zan-cell__text">{{ title }}</view>
+    <view wx:if="{{ label }}" class="zan-cell__desc">{{ label }}</view>
+    <slot></slot>
+  </view>
+
+  <view catchtap="navigateTo" class="zan-cell__ft">
+    <block wx:if="{{value}}">{{ value }}</block>
+    <block wx:else>
+      <slot name="footer"></slot>
+    </block>
+  </view>
+</view>
--- a/dist/cell/index.wxss
+++ b/dist/cell/index.wxss
@ -1 +1 @@
-.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px;left:15px;right:0}.zan-cell__icon{margin-right:5px}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell--last-child::after,.zan-cell:last-child::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}
+.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px;left:15px;right:0}.zan-cell .zan-cell__icon{margin-right:5px}.zan-cell .zan-cell__icon:empty{display:none}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell.last-cell::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}
--- a/dist/col/index.js
+++ b/dist/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
+    }
+  }
+});
--- a/dist/col/index.json
+++ b/dist/col/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/col/index.wxml
+++ b/dist/col/index.wxml
@ -0,0 +1 @@
+  <view class="col-class zan-col {{ col ? 'zan-col-' + col : '' }} {{ offset ? 'zan-col-offset-' + offset : '' }}"><slot></slot></view>
--- a/dist/common/pop-manager/index.js
+++ b/dist/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', {});
+    }
+  }
+});
--- a/dist/common/pop-manager/index.json
+++ b/dist/common/pop-manager/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/common/pop-manager/index.wxml
+++ b/dist/common/pop-manager/index.wxml
@ -0,0 +1,12 @@
+<view
+  class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}"
+>
+  <view 
+    wx:if="{{ overlay }}"
+    class="pop__mask {{ showOverlay ? '' : 'pop__mask--hide' }}"
+    bindtap="handleMaskClick"
+  ></view>
+  <view class="pop__container">
+    <slot></slot>
+  </view>
+</view>
--- a/dist/common/pop-manager/index.wxss
+++ b/dist/common/pop-manager/index.wxss
@ -0,0 +1 @@
+.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,.7);display:none}.pop__mask--hide{background:0 0}.pop__container{position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .4s ease;z-index:11;opacity:0}.pop--show .pop__container{opacity:1}.pop--show .pop__mask{display:block}.pop--left .pop__container{left:0;top:50%;transform:translate3d(-100%,-50%,0)}.pop--show.pop--left .pop__container{transform:translate3d(0,-50%,0)}.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)}.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)}.pop--top .pop__container{top:0;left:50%;transform:translate3d(-50%,-100%,0)}.pop--show.pop--top .pop__container{transform:translate3d(-50%,0,0)}
--- a/dist/dialog/data.js
+++ b/dist/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'
+};
--- a/dist/dialog/dialog.js
+++ b/dist/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;
--- a/dist/dialog/index.js
+++ b/dist/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'
+        });
+      }
    }
  }
-};
+});
--- a/dist/dialog/index.json
+++ b/dist/dialog/index.json
@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "pop-manager": "../common/pop-manager/index",
+    "zan-button": "../btn/index"
+  } 
+}
--- a/dist/dialog/index.wxml
+++ b/dist/dialog/index.wxml
@ -1,22 +1,35 @@
-<template name="zan-dialog">
-  <view class="zan-dialog {{ zanDialog.show ? 'zan-dialog--show' : '' }}">
-    <view class="zan-dialog--mask"></view>
-    <view class="zan-dialog--container">
-      <view
-        wx:if="{{ zanDialog.title }}"
-        class="zan-dialog__header">{{ zanDialog.title }}</view>
-      <view
-        class="zan-dialog__content {{ zanDialog.title ? 'zan-dialog__content--title' : '' }}">{{ zanDialog.content }}</view>
-      <view
-        class="zan-dialog__footer {{ zanDialog.buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' }}">
-        <block wx:for="{{ zanDialog.buttons }}" wx:key="{{ item.text }}-{{ item.type }}">
-          <button
-            class="zan-dialog__button zan-btn"
-            data-type="{{ item.type }}"
-            catchtap="_handleZanDialogButtonClick"
-            style="color: {{ item.color || '#333' }}">{{ item.text }}</button>
-        </block>
-      </view>
+<pop-manager
+  show="{{ show }}"
+  type="center"
+>
+  <view class="zan-dialog--container">
+    <view
+      wx:if="{{ title }}"
+      class="zan-dialog__header"
+    >{{ title }}</view>
+    <view
+      class="zan-dialog__content {{ title ? 'zan-dialog__content--title' : '' }}"
+    >
+      <text>{{ message }}</text>
+    </view>
+    <view
+      class="zan-dialog__footer {{ buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' }}"
+    >
+      <block
+        wx:for="{{ buttons }}"
+        wx:key="{{ item.text }}-{{ item.type }}"
+      >
+        <zan-button
+          class="zan-dialog__button"
+          custom-class="{{ index === 0 ? 'zan-dialog__button-inside--first' : 'zan-dialog__button-inside' }}"
+          data-type="{{ item.type }}"
+          bind:btnclick="handleButtonClick"
+        >
+          <view
+            style="color: {{ item.color || '#333' }}"
+          >{{ item.text }}</view>
+        </zan-button>
+      </block>
    </view>
  </view>
-</template>
+</pop-manager>
--- a/dist/dialog/index.wxss
+++ b/dist/dialog/index.wxss
@ -1 +1 @@
-.zan-dialog--container{position:fixed;top:45%;left:50%;width:80%;height:0;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,.6);transition:.3s;display:none;z-index:1}.zan-dialog__header{padding:15px 0 0;text-align:center}.zan-dialog__content{position:relative;padding:15px 20px;line-height:1.5;min-height:40px}.zan-dialog__content::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px}.zan-dialog__content--title{color:#999;font-size:14px}.zan-dialog__footer{overflow:hidden}.zan-dialog__button{line-height:50px;height:50px;padding:0 5px;border-radius:0;margin-bottom:0}.zan-dialog__button::after{border-width:0;border-radius:0}.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::after{border-right-width:1px}.zan-dialog__footer--horizon .zan-dialog__button:last-child::after{border-right-width:0}.zan-dialog__footer--vertical .zan-dialog__button{flex:1}.zan-dialog__footer--vertical .zan-dialog__button::after{border-bottom-width:1px}.zan-dialog__footer--vertical .zan-dialog__button:last-child::after{border-bottom-width:0}
+.zan-dialog--container{width:80vw;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff;color:#333}.zan-dialog__header{padding:15px 0 0;text-align:center}.zan-dialog__content{position:relative;padding:15px 20px;line-height:1.5;min-height:40px}.zan-dialog__content::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px}.zan-dialog__content--title{color:#999;font-size:14px}.zan-dialog__footer{overflow:hidden}.zan-dialog__button{flex:1}.zan-dialog__button-inside,.zan-dialog__button-inside--first{margin-bottom:0;line-height:50px;height:50px}.zan-dialog__button-inside--first::after,.zan-dialog__button-inside::after{border-width:0;border-radius:0}.zan-dialog__footer--horizon{display:flex}.zan-dialog__footer--horizon .zan-dialog__button-inside::after{border-left-width:1px}.zan-dialog__footer--vertical .zan-dialog__button-inside::after{border-top-width:1px}
--- a/dist/field/index.js
+++ b/dist/field/index.js
@ -1,38 +1,48 @@
-const { extractComponentId } = require('../common/helper');
-
-module.exports = {
-  _handleZanFieldChange(event) {
-    const componentId = extractComponentId(event);
-    event.componentId = componentId;
-
-    
-
-    if (this.handleZanFieldChange) {
-      return this.handleZanFieldChange(event);
-    }
-
-    console.warn('页面缺少 handleZanFieldChange 回调函数');
-  },
-
-  _handleZanFieldFocus(event) {
-    const componentId = extractComponentId(event);
-    event.componentId = componentId;
-
-    
-
-    if (this.handleZanFieldFocus) {
-      return this.handleZanFieldFocus(event);
+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,
+    maxlength: {
+      type: Number,
+      value: 140
    }
  },

-  _handleZanFieldBlur(event) {
-    const componentId = extractComponentId(event);
-    event.componentId = componentId;
-
-    
-
-    if (this.handleZanFieldBlur) {
-      return this.handleZanFieldBlur(event);
+  methods: {
+    handleZanFieldChange(event) {
+      
+      this.triggerEvent('change', event);
+    },
+  
+    handleZanFieldFocus(event) {
+      
+  
+      this.triggerEvent('focus', event);
+    },
+  
+    handleZanFieldBlur(event) {
+      
+  
+      this.triggerEvent('blur', event);
    }
  }
-};
+})
--- a/dist/field/index.json
+++ b/dist/field/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/field/index.wxml
+++ b/dist/field/index.wxml
@ -1,35 +1,37 @@
-<template name="zan-field">
-  <view class="zan-cell zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }}">
-    <view
-      wx:if="{{ title }}"
-      class="zan-cell__hd zan-field__title">{{ title }}</view>
-    <textarea
-      wx:if="{{ type === 'textarea' }}"
-      auto-height
-      name="{{ name || componentId || '' }}"
-      disabled="{{ disabled }}"
-      focus="{{ focus }}"
-      value="{{ value }}"
-      placeholder="{{ placeholder }}"
-      class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
-      placeholder-class="zan-field__placeholder"
-      bindinput="_handleZanFieldChange"
-      bindfocus="_handleZanFieldFocus"
-      bindblur="_handleZanFieldBlur"
-      data-component-id="{{ componentId || '' }}"></textarea>
-    <input
-      wx:else
-      type="{{ inputType || 'text' }}"
-      name="{{ name || componentId || '' }}"
-      disabled="{{ disabled }}"
-      focus="{{ focus }}"
-      value="{{ value }}"
-      placeholder="{{ placeholder }}"
-      class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
-      placeholder-class="zan-field__placeholder"
-      bindinput="_handleZanFieldChange"
-      bindfocus="_handleZanFieldFocus"
-      bindblur="_handleZanFieldBlur"
-      data-component-id="{{ componentId || '' }}"/>
+<view class="zan-cell zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }}">
+  <view
+    wx:if="{{ title }}"
+    class="zan-cell__hd zan-field__title">
+    {{ title }}
  </view>
-</template>
+  <textarea
+    wx:if="{{ type === 'textarea' }}"
+    auto-height
+    name="{{ name || '' }}"
+    disabled="{{ disabled }}"
+    focus="{{ focus }}"
+    value="{{ value }}"
+    placeholder="{{ placeholder }}"
+    maxlength="{{ maxlength }}"
+    class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
+    placeholder-class="zan-field__placeholder"
+    bindinput="handleZanFieldChange"
+    bindfocus="handleZanFieldFocus"
+    bindblur="handleZanFieldBlur">
+  </textarea>
+  <input
+    wx:else
+    type="{{ inputType || 'text' }}"
+    name="{{ name || '' }}"
+    disabled="{{ disabled }}"
+    focus="{{ focus }}"
+    value="{{ value }}"
+    placeholder="{{ placeholder }}"
+    maxlength="{{ maxlength }}"
+    class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
+    placeholder-class="zan-field__placeholder"
+    bindinput="handleZanFieldChange"
+    bindfocus="handleZanFieldFocus"
+    bindblur="handleZanFieldBlur"
+  />
+</view>
--- a/dist/field/index.wxss
+++ b/dist/field/index.wxss
@ -1 +1 @@
-.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px;left:15px;right:0}.zan-cell__icon{margin-right:5px}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell--last-child::after,.zan-cell:last-child::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}.zan-field{padding:7px 15px;color:#333}.zan-field--wrapped{margin:0 15px;background-color:#fff}.zan-field--wrapped::after{left:0;border-width:1px;border-radius:4px}.zan-field.zan-field--wrapped::after{display:block}.zan-field--wrapped+.zan-field--wrapped{margin-top:10px}.zan-field--error{color:#f40}.zan-field--wrapped.zan-field--error::after{border-color:#f40}.zan-field__title{color:#333;min-width:65px;padding-right:10px}.zan-field__input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.zan-field__placeholder{font-size:14px}.zan-field__input--right{text-align:right}
+.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px;left:15px;right:0}.zan-cell .zan-cell__icon{margin-right:5px}.zan-cell .zan-cell__icon:empty{display:none}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell.last-cell::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}.zan-field{padding:7px 15px;color:#333}.zan-field--wrapped{margin:10px 15px;background-color:#fff}.zan-field--wrapped::after{left:0;border-width:1px;border-radius:4px}.zan-field.zan-field--wrapped::after{display:block}.zan-field--error{color:#f40}.zan-field--wrapped.zan-field--error::after{border-color:#f40}.zan-field__title{color:#333;min-width:65px;padding-right:10px}.zan-field__input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.zan-field__placeholder{font-size:14px}.zan-field__input--right{text-align:right}
--- a/dist/helper/index.wxss
+++ b/dist/helper/index.wxss
@ -1 +1 @@
-.zan-pull-left{float:left}.zan-pull-right{float:right}.zan-center{text-align:center}.zan-right{text-align:right}.zan-text-deleted{text-decoration:line-through}.zan-font-8{font-size:8px}.zan-font-10{font-size:10px}.zan-font-12{font-size:12px}.zan-font-14{font-size:14px}.zan-font-16{font-size:16px}.zan-font-18{font-size:18px}.zan-font-20{font-size:20px}.zan-font-22{font-size:22px}.zan-font-24{font-size:22px}.zan-font-30{font-size:30px}.zan-font-bold{font-weight:700}.zan-arrow{position:absolute;right:15px;top:50%;display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.zan-ellipsis--l2{max-height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.zan-ellipsis--l3{max-height:60px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.zan-clearfix{zoom:1}.zan-clearfix::after{content:'';display:table;clear:both}.zan-hairline,.zan-hairline--bottom,.zan-hairline--left,.zan-hairline--right,.zan-hairline--surround,.zan-hairline--top,.zan-hairline--top-bottom{position:relative}.zan-hairline--bottom::after,.zan-hairline--left::after,.zan-hairline--right::after,.zan-hairline--surround::after,.zan-hairline--top-bottom::after,.zan-hairline--top::after,.zan-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.zan-hairline--top::after{border-top-width:1px}.zan-hairline--left::after{border-left-width:1px}.zan-hairline--right::after{border-right-width:1px}.zan-hairline--bottom::after{border-bottom-width:1px}.zan-hairline--top-bottom::after{border-width:1px 0}.zan-hairline--surround::after{border-width:1px}
+.zan-pull-left{float:left}.zan-pull-right{float:right}.zan-center{text-align:center}.zan-right{text-align:right}.zan-text-deleted{text-decoration:line-through}.zan-font-8{font-size:8px}.zan-font-10{font-size:10px}.zan-font-12{font-size:12px}.zan-font-14{font-size:14px}.zan-font-16{font-size:16px}.zan-font-18{font-size:18px}.zan-font-20{font-size:20px}.zan-font-22{font-size:22px}.zan-font-24{font-size:24px}.zan-font-26{font-size:26px}.zan-font-30{font-size:30px}.zan-font-bold{font-weight:700}.zan-arrow{position:absolute;right:15px;top:50%;display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.zan-ellipsis--l2{max-height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.zan-ellipsis--l3{max-height:60px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.zan-clearfix{zoom:1}.zan-clearfix::after{content:'';display:table;clear:both}.zan-c-red{color:#f44}.zan-c-black{color:#000}.zan-c-green{color:#06bf04}.zan-c-blue{color:#38f}.zan-c-gray{color:#c9c9c9}.zan-c-gray-dark{color:#999}.zan-c-gray-darker{color:#666}.zan-hairline,.zan-hairline--bottom,.zan-hairline--left,.zan-hairline--right,.zan-hairline--surround,.zan-hairline--top,.zan-hairline--top-bottom{position:relative}.zan-hairline--bottom::after,.zan-hairline--left::after,.zan-hairline--right::after,.zan-hairline--surround::after,.zan-hairline--top-bottom::after,.zan-hairline--top::after,.zan-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5}.zan-hairline--top::after{border-top-width:1px}.zan-hairline--left::after{border-left-width:1px}.zan-hairline--right::after{border-right-width:1px}.zan-hairline--bottom::after{border-bottom-width:1px}.zan-hairline--top-bottom::after{border-width:1px 0}.zan-hairline--surround::after{border-width:1px}
--- a/dist/icon/index.js
+++ b/dist/icon/index.js
@ -0,0 +1,8 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: ''
+    }
+  }
+});
--- a/dist/icon/index.json
+++ b/dist/icon/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/icon/index.wxml
+++ b/dist/icon/index.wxml
@ -0,0 +1 @@
+<view class="zan-icon zan-icon-{{ type }}"></view>
--- a/dist/index.js
+++ b/dist/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;
--- a/dist/index.wxss
+++ b/dist/index.wxss
--- a/dist/loading/index.js
+++ b/dist/loading/index.js
@ -0,0 +1,11 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'circle'
+    },
+    color: {
+      type: String
+    }
+  }
+})
--- a/dist/loading/index.json
+++ b/dist/loading/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/loading/index.wxml
+++ b/dist/loading/index.wxml
@ -0,0 +1,18 @@
+<view class="loading {{color}} {{type === 'dot' ? 'block' : 'inline'}}">
+  <view wx:if="{{type === 'circle'}}" class="circle"></view>
+  <view wx:if="{{type === 'circular'}}" class="circular"></view>
+  <view wx:if="{{type === 'spinner' || type === 'dot'}}" class="{{ type === 'dot' ? 'dot-spinner' : 'spinner'}}">
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+  </view>
+</view>
--- a/dist/loading/index.wxss
+++ b/dist/loading/index.wxss
@ -0,0 +1 @@
+.loading.inline{position:relative;margin:15px;text-align:center;display:flex;justify-content:center}.loading.inline .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}.loading.inline.black .circle{border-color:#c9c9c9;border-top-color:#666}.loading.inline .circular{display:inline-block;height:24px;width:24px;animation:loading 2s linear infinite}.loading.inline .circular::after{content:'';display:block;width:100%;height:100%;border-radius:100%;border:3px solid transparent;box-sizing:border-box;animation:circular 2s ease infinite}.loading.inline .spinner{width:30px;height:30px;display:inline-block;position:relative;animation:loading 1s linear infinite;animation-timing-function:steps(12)}.loading.inline .spinner view{width:100%;height:100%;position:absolute;text-align:center;top:0;left:0}.loading.inline .spinner view::after{content:'';background:#fff;height:25%;display:block;width:2px;border-radius:2px;margin:0 auto}.loading.inline .spinner view:nth-child(1){transform:rotate(30deg);opacity:.78571}.loading.inline .spinner view:nth-child(2){transform:rotate(60deg);opacity:.71429}.loading.inline .spinner view:nth-child(3){transform:rotate(90deg);opacity:.64286}.loading.inline .spinner view:nth-child(4){transform:rotate(120deg);opacity:.57143}.loading.inline .spinner view:nth-child(5){transform:rotate(150deg);opacity:.5}.loading.inline .spinner view:nth-child(6){transform:rotate(180deg);opacity:.42857}.loading.inline .spinner view:nth-child(7){transform:rotate(210deg);opacity:.35714}.loading.inline .spinner view:nth-child(8){transform:rotate(240deg);opacity:.28571}.loading.inline .spinner view:nth-child(9){transform:rotate(270deg);opacity:.21429}.loading.inline .spinner view:nth-child(10){transform:rotate(300deg);opacity:.14286}.loading.inline .spinner view:nth-child(11){transform:rotate(330deg);opacity:.07143}.loading.inline .spinner view:nth-child(12){transform:rotate(360deg);opacity:0}.loading.inline.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}.loading.block .dot-spinner 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}.loading.block .dot-spinner view:nth-child(1){animation-delay:.5s}.loading.block .dot-spinner view:nth-child(2){animation-delay:.4s}.loading.block .dot-spinner view:nth-child(3){animation-delay:.3s}.loading.block .dot-spinner view:nth-child(4){animation-delay:.2s}.loading.block .dot-spinner view:nth-child(5){animation-delay:.1s}.loading.block .dot-spinner view:nth-child(6){animation-delay:0s}.loading.block .dot-spinner view:nth-child(6){display:none}.loading.block .dot-spinner view:nth-child(7){display:none}.loading.block .dot-spinner view:nth-child(8){display:none}.loading.block .dot-spinner view:nth-child(9){display:none}.loading.block .dot-spinner view:nth-child(10){display:none}.loading.block .dot-spinner view:nth-child(11){display:none}.loading.block .dot-spinner view:nth-child(12){display:none}.loading.block.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(0)}100%{transform:rotate(360deg)}}
--- a/dist/noticebar/index.js
+++ b/dist/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;
+})
--- a/dist/noticebar/index.json
+++ b/dist/noticebar/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-icon": "../icon/index"
+  }
+}
--- a/dist/noticebar/index.wxml
+++ b/dist/noticebar/index.wxml
@ -1,16 +1,31 @@
-<template name="zan-noticebar">
-  <view class="zan-noticebar">
-    <view
-      id="{{ componentId }}__content-wrap"
-      style="height: 18px; overflow: hidden; position: relative;"
-    >
-      <view
-        animation="{{ animationData }}"
-        id="{{ componentId }}__content"
-        style="position: absolute; white-space: nowrap;"
-      >
-        {{ text }}
-      </view>
+<view
+  wx:if="{{ show }}"
+  class="zan-noticebar {{ hasRightIcon ? 'zan-noticebar--within-icon' : '' }}"
+  style="color: {{ color }};background-color: {{ backgroundColor }}"
+>
+  <view wx:if="{{ leftIcon }}" class="zan-noticebar__left-icon">
+    <image src="{{ leftIcon }}" />
+  </view>
+  <view class="zan-noticebar__content-wrap">
+    <view class="zan-noticebar__content" animation="{{ animationData }}">
+      {{ text }}
    </view>
  </view>
-</template>
+
+  <block wx:if="{{ mode }}">
+    <zan-icon
+      wx:if="{{ mode === 'closeable' }}"
+      class="zan-noticebar__right-icon"
+      type="close"
+      bindtap="_handleButtonClick"
+    />
+    <navigator
+      wx:if="{{ mode === 'link' }}"
+      url="{{ url }}"
+      open-type="{{ openType }}"
+    >
+      <zan-icon class="zan-noticebar__right-icon" type="arrow" />
+    </navigator>
+  </block>
+
+</view>
--- a/dist/noticebar/index.wxss
+++ b/dist/noticebar/index.wxss
@ -1 +1 @@
-.zan-noticebar{color:#f60;padding:9px 10px;font-size:12px;line-height:1.5;background-color:#fff7cc}
+.zan-noticebar{display:flex;padding:9px 10px;font-size:12px;line-height:1.5}.zan-noticebar--within-icon{position:relative;padding-right:30px}.zan-noticebar__left-icon{height:18px;min-width:20px;padding-top:1px;box-sizing:border-box}.zan-noticebar__left-icon>image{width:16px;height:16px}.zan-noticebar__right-icon{position:absolute;top:10px;right:10px;font-size:15px;line-height:1}.zan-noticebar__content-wrap{position:relative;flex:1;height:18px;overflow:hidden}.zan-noticebar__content{position:absolute;white-space:nowrap}
--- a/dist/panel/index.js
+++ b/dist/panel/index.js
@ -0,0 +1,23 @@
+Component({
+  /**
+   * 组件的属性列表
+   * 用于组件自定义设置
+   */
+  properties: {
+    // 标题
+    title: {
+      type: String,
+      value: ''
+    },
+    // 内容区顶部是否取消10像素的间距
+    hideTop :{
+      type : Boolean ,
+      value : false
+    },
+    // 内容区顶部是否取消边框
+    hideBorder :{
+      type : Boolean ,
+      value : false
+    }
+  }
+})
--- a/dist/panel/index.json
+++ b/dist/panel/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/panel/index.wxml
+++ b/dist/panel/index.wxml
@ -0,0 +1,10 @@
+<view class="zan-panel">
+  <view
+    wx:if="{{ title }}"
+    class="zan-panel__title">{{ title }}</view>
+  <view
+    class="zan-panel__content {{ hideBorder ? 'zan-panel--without-border' : '' }}"
+  >
+    <slot></slot>
+  </view>
+</view>
--- a/dist/panel/index.wxss
+++ b/dist/panel/index.wxss
@ -1 +1 @@
-.zan-panel{position:relative;background:#fff;margin-top:10px;overflow:hidden}.zan-panel::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-top-width:1px;border-bottom-width:1px}.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}
+.zan-panel{position:relative;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}.zan-panel__content::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-top-width:1px;border-bottom-width:1px}.zan-panel--without-border::after{border:0 none}
--- a/dist/popup/index.js
+++ b/dist/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', {});
+    }
+  }
+});
--- a/dist/popup/index.json
+++ b/dist/popup/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "pop-manager": "../common/pop-manager/index"
+  } 
+}
--- a/dist/popup/index.wxml
+++ b/dist/popup/index.wxml
@ -0,0 +1,8 @@
+<pop-manager
+  show="{{ show }}"
+  type="{{ type }}"
+  show-overlay="{{ overlay }}"
+  bindclickmask="handleMaskClick"
+>
+  <slot></slot>
+</pop-manager>
--- a/dist/popup/index.wxss
+++ b/dist/popup/index.wxss
@ -1 +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,.7);display:none}.zan-popup__container{position:fixed;left:50%;top:50%;background:#fff;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .4s ease;z-index:11;opacity:0}.zan-popup--show .zan-popup__container{opacity:1}.zan-popup--show .zan-popup__mask{display:block}.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)}.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)}.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)}.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)}
--- a/dist/row/index.js
+++ b/dist/row/index.js
@ -0,0 +1,9 @@
+Component({
+  externalClasses: ['row-class'],
+
+  relations: {
+    '../col/index': {
+      type: 'child'
+    }
+  }
+});
--- a/dist/row/index.json
+++ b/dist/row/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/row/index.wxml
+++ b/dist/row/index.wxml
@ -0,0 +1 @@
+<view class="row-class zan-row"><slot></slot></view>
--- a/dist/select/index.js
+++ b/dist/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 };
-  
-
-  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);
-  }
-};
+});
--- a/dist/select/index.json
+++ b/dist/select/index.json
@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-icon": "../icon/index",
+    "zan-cell": "../cell/index"
+  }
+}
--- a/dist/select/index.wxml
+++ b/dist/select/index.wxml
@ -1,24 +1,21 @@
-<template name="zan-select">
-  <radio-group
-    class="zan-select__list"
-    name="{{ name || componentId || '' }}"
-    bindchange="_handleZanSelectChange"
-    data-component-id="{{ componentId }}"
-  >
-    <label wx:for="{{ items }}" wx:key="value">
-      <view class="zan-cell">
-        <radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
-        <view
-          class="zan-cell__bd"
-          style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}"
-        >{{ item.name }}</view>
-        <view wx:if="{{ item.value === checkedValue }}" class="zan-cell__ft">
-          <icon type="success_no_circle" color="{{ parse.getColor(activeColor) }}" size="14"></icon>
-        </view>
-      </view>
-    </label>
-  </radio-group>
-</template>
+<radio-group
+  class="zan-select__list"
+  bindchange="handleSelectChange"
+>
+  <label wx:for="{{ items }}" wx:key="value">
+    <zan-cell>
+      <radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
+      <span style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}">{{ item.name }}</span>
+      <zan-icon
+        wx:if="{{ item.value === checkedValue }}"
+        slot="footer"
+        type="success"
+        style="color: {{ parse.getColor(activeColor) }};font-size: 14px;"
+      />
+    </zan-cell>
+  </label>
+</radio-group>
+

 <wxs module="parse">
 function getColor(color) {
--- a/dist/select/index.wxss
+++ b/dist/select/index.wxss
@ -1 +1 @@
-.zan-select__list .zan-select__radio{display:none}
+.zan-select__list .zan-select__radio{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0}
--- a/dist/stepper/index.js
+++ b/dist/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;
+Component({
+  properties: {
+    size: String,
+    stepper: {
+      type: Number,
+      value: 1
+    },
+    min: {
+      type: Number,
+      value: 1
+    },
+    max: {
+      type: Number,
+      value: Infinity
+    },
+    step: {
+      type: Number,
+      value: 1
+    }
+  },

-  if (disabled) return null;
+  methods: {
+    handleZanStepperChange(e, type) {
+      const dataset = e.currentTarget.dataset;
+      const disabled = dataset.disabled;
+      const { step } = this.data;
+      let stepper = this.data.stepper;

-  callback.call(this, componentId, stepper + num);
-}
+      if (disabled) return null;

-function callback(componentId, stepper) {
-  stepper = +stepper;
-  var e = { componentId, stepper };
+      if (type === 'minus') {
+        stepper -= step;
+      } else if (type === 'plus') {
+        stepper += step;
+      }
+
+      this.triggerEvent('change', stepper);
+      this.triggerEvent(type);
+    },
+
+    handleZanStepperMinus(e) {
+      this.handleZanStepperChange(e, 'minus');
+    },
  
-
-  if (this.handleZanStepperChange) {
-    this.handleZanStepperChange(e);
-  } else {
-    console.warn('页面缺少 handleZanStepperChange 回调函数');
-  }
-}
-
-var Stepper = {
-  _handleZanStepperMinus(e) {
-    handle.call(this, e, -1);
-  },
-
-  _handleZanStepperPlus(e) {
-    handle.call(this, e, +1);
-  },
-
-  _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 (!value) {
-      setTimeout(() => {
-        callback.call(this, componentId, min);
-      }, 16);
-      callback.call(this, componentId, value);
-      return '' + value;
+    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;
+});
--- a/dist/stepper/index.json
+++ b/dist/stepper/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/stepper/index.wxml
+++ b/dist/stepper/index.wxml
@ -1,28 +1,23 @@
-<template name="zan-stepper">
-  <view class="zan-stepper {{ size === 'small' ? 'zan-stepper--small' : '' }}">
-    <view
-      class="zan-stepper__minus {{ stepper <= min ? 'zan-stepper--disabled' : '' }}"
-      data-component-id="{{ componentId }}"
-      data-stepper="{{ stepper }}"
-      data-disabled="{{ stepper <= min }}"
-      bindtap="_handleZanStepperMinus"
-    >-</view>
-    <input
-      class="zan-stepper__text {{ min >= max ? 'zan-stepper--disabled' : '' }}"
-      type="number"
-      data-component-id="{{ componentId }}"
-      data-min="{{ min }}"
-      data-max="{{ max }}"
-      value="{{ stepper }}"
-      disabled="{{ min >= max }}"
-      bindblur="_handleZanStepperBlur"
-    ></input>
-    <view
-      class="zan-stepper__plus {{ stepper >= max ? 'zan-stepper--disabled' : '' }}"
-      data-component-id="{{ componentId }}"
-      data-stepper="{{ stepper }}"
-      data-disabled="{{ stepper >= max }}"
-      bindtap="_handleZanStepperPlus"
-    >+</view>
+<view class="zan-stepper {{ size === 'small' ? 'zan-stepper--small' : '' }}">
+  <view
+    class="zan-stepper__minus {{ stepper <= min ? 'zan-stepper--disabled' : '' }}"
+    data-disabled="{{ stepper <= min }}"
+    bindtap="handleZanStepperMinus"
+  >
+    -
  </view>
-</template>
+  <input
+    class="zan-stepper__text {{ min >= max ? 'zan-stepper--disabled' : '' }}"
+    type="number"
+    value="{{ stepper }}"
+    disabled="{{ min >= max }}"
+    bindblur="handleZanStepperBlur"
+  />
+  <view
+    class="zan-stepper__plus {{ stepper >= max ? 'zan-stepper--disabled' : '' }}"
+    data-disabled="{{ stepper >= max }}"
+    bindtap="handleZanStepperPlus"
+  >
+    +
+  </view>
+</view>
--- a/dist/steps/index.js
+++ b/dist/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
+  }
+})
--- a/dist/steps/index.json
+++ b/dist/steps/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/steps/index.wxml
+++ b/dist/steps/index.wxml
@ -1,15 +1,13 @@
-<template name="zan-steps">
-  <view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
-    <view
-      wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
-      class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
-    >
-      <view class="zan-steps__title">{{ step.text }}</view>
-      <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
-      <view class="zan-steps__icons">
-        <view class="zan-steps__circle"></view>
-      </view>
-      <view class="zan-steps__line"></view>
+<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
+  <view
+    wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
+    class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
+  >
+    <view class="zan-steps__title">{{ step.text }}</view>
+    <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
+    <view class="zan-steps__icons">
+      <view class="zan-steps__circle"></view>
    </view>
+    <view class="zan-steps__line"></view>
  </view>
-</template>
+</view>
--- a/dist/switch/index.js
+++ b/dist/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
+    }
+  },

-    
-
-    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;
+});
--- a/dist/switch/index.json
+++ b/dist/switch/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/switch/index.wxml
+++ b/dist/switch/index.wxml
@ -1,15 +1,12 @@
-<template name="zan-switch">
-  <view
-    class="zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
-    data-checked="{{ checked }}"
-    data-loading="{{ loading }}"
-    data-disabled="{{ disabled }}"
-    data-component-id="{{ componentId }}"
-    bindtap="_handleZanSwitchChange"
-  >
-    <view class="zan-switch__circle">
-      <view hidden="{{ !loading }}" class="zan-switch__loading"></view>
-    </view>
-    <view class="zan-switch__bg"></view>
+<view
+  class="zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
+  checked="{{ checked }}"
+  loading="{{ loading }}"
+  disabled="{{ disabled }}"
+  bindtap="handleZanSwitchChange"
+>
+  <view class="zan-switch__circle">
+    <view hidden="{{ !loading }}" class="zan-switch__loading"></view>
  </view>
-</template>
+  <view class="zan-switch__bg"></view>
+</view>
--- a/dist/tab/index.js
+++ b/dist/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: ''
+    }
+  },

-    
-    if (this.handleZanTabChange) {
-      this.handleZanTabChange(data);
-    } else {
-      console.warn('页面缺少 handleZanTabChange 回调函数');
+  methods: {
+    _handleZanTabChange(e) {
+      const selectedId = e.currentTarget.dataset.itemId;
+
+      this.setData({
+        selectedId
+      });
+
+      
+      this.triggerEvent('tabchange', selectedId);
    }
  }
-};
-
-module.exports = Tab;
+})
--- a/dist/tab/index.json
+++ b/dist/tab/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/tab/index.wxml
+++ b/dist/tab/index.wxml
@ -1,37 +1,47 @@
-<template name="zan-tab">
-  <view class="zan-tab">
-    <block wx:if="{{ tab.scroll || scroll }}">
-      <scroll-view
-        class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
-        scroll-x="true"
-        style="height: {{ tab.height || height ? ((tab.height || height) + 'px') : 'auto' }}"
-      >
-        <template
-          is="zan-tab-list"
-          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
-        </template>
-      </scroll-view>
-    </block>
-    <block wx:else>
-      <view class="zan-tab__bd {{ fixed ? 'zan-tab__bd--fixed' : '' }}">
-        <template
-          is="zan-tab-list"
-          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
-        </template>
-      </view>
-    </block>
-  </view>
-</template>
+<view
+  class="zan-tab"
+  style="{{ height ? 'height:' + height + 'px' : '' }}"
+>
+  <block wx:if="{{ scroll }}">
+    <scroll-view
+      class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
+      scroll-x="true"
+      style="height: {{ height ? height + 'px' : 'auto' }}"
+    >
+      <template
+        is="zan-tab-list"
+        data="{{ list, selectedId, height }}"
+      />
+    </scroll-view>
+  </block>
+  <block wx:else>
+    <view
+      class="zan-tab__bd {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
+      style="height: {{ height ? height + 'px' : 'auto' }}"
+    >
+      <template
+        is="zan-tab-list"
+        data="{{ list, selectedId, height }}"
+      />
+    </view>
+  </block>
+</view>
+<!-- 插入内容 -->
+<slot></slot>

 <template name="zan-tab-list">
  <view
    wx:for="{{ list }}"
    wx:key="id"
    class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
-    data-component-id="{{ componentId }}"
    data-item-id="{{ item.id }}"
    bindtap="_handleZanTabChange"
  >
-    <view class="zan-tab__title">{{ item.title }}</view>
+    <view
+      class="zan-tab__title"
+      style="{{ height ? 'height:' + height + 'px;line-height:' + height + 'px' : '' }}"
+    >
+      {{ item.title }}
+    </view>
  </view>
 </template>
--- a/dist/tab/index.wxss
+++ b/dist/tab/index.wxss
@ -1 +1 @@
-.zan-tab{height:45px}.zan-tab__bd{width:750rpx;display:flex;flex-direction:row;border-bottom:1rpx solid #e5e5e5;background:#fff}.zan-tab__bd--fixed{position:fixed;top:0;z-index:2}.zan-tab__item{flex:1;display:inline-block;padding:0 10px;line-height:0;box-sizing:border-box;overflow:hidden;text-align:center}.zan-tab__title{display:inline-block;max-width:100%;height:44px;line-height:44px;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;word-break:keep-all;font-size:14px;color:#666}.zan-tab__item--selected .zan-tab__title{color:#f44;border-bottom:2px solid #f44}.zan-tab__bd--scroll{display:block;white-space:nowrap}.zan-tab__bd--scroll .zan-tab__item{min-width:80px}
+.zan-tab{height:45px}.zan-tab__bd{width:750rpx;display:flex;flex-direction:row;border-bottom:1rpx solid #e5e5e5;background:#fff}.zan-tab__bd--fixed{position:fixed;top:0;z-index:2}.zan-tab__item{flex:1;display:inline-block;padding:0 5px;line-height:0;box-sizing:border-box;overflow:hidden;text-align:center}.zan-tab__title{display:inline-block;max-width:100%;height:44px;line-height:44px;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;word-break:keep-all;font-size:14px;color:#666}.zan-tab__item--selected .zan-tab__title{color:#f44;border-bottom:2px solid #f44}.zan-tab__bd--scroll{display:block;white-space:nowrap}.zan-tab__bd--scroll .zan-tab__item{min-width:80px}
--- a/dist/tag/index.js
+++ b/dist/tag/index.js
@ -0,0 +1,15 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+    },
+    plain: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    }
+  }
+});
--- a/dist/tag/index.json
+++ b/dist/tag/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/tag/index.wxml
+++ b/dist/tag/index.wxml
@ -0,0 +1,6 @@
+
+<view 
+  class="zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
+>
+  <slot></slot>
+</view>
--- a/dist/toast/index.js
+++ b/dist/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
+      });
+    }
+  }
+});
--- a/dist/toast/index.json
+++ b/dist/toast/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-icon": "../icon/index"
+  }
+}
--- a/dist/toast/index.wxml
+++ b/dist/toast/index.wxml
@ -1,31 +1,30 @@
-<template name="zan-toast">
-  <view
-    class="zan-toast {{ !zanToast.title ? 'zan-toast--notitle' : '' }}"
-    wx:if="{{ zanToast.show }}"
-    bindtap="clearZanToast"
+<view
+  class="zan-toast {{ !message ? 'zan-toast--notitle' : '' }}"
+  wx:if="{{ show }}"
+  bindtap="clearZanToast"
+>
+  <!-- icon 展示 -->
+  <block
+    wx:if="{{ icon || image }}"
  >
-    <!-- icon 展示 -->
-    <block
-      wx:if="{{ zanToast.icon || zanToast.image }}"
+    <view
+      wx:if="{{ image }}"
+      class="zan-toast__icon zan-toast__icon-image"
+      style="background-image: url({{ image }});"
+    ></view>
+    <view
+      wx:elif="{{ icon === 'loading' }}"
+      class="zan-toast__icon zan-toast__icon-loading"
    >
-      <view
-        wx:if="{{ zanToast.image }}"
-        class="zan-toast__icon zan-toast__icon-image"
-        style="background-image: url({{ zanToast.image }});"
-      ></view>
-      <view
-        wx:elif="{{ zanToast.icon === 'loading' }}"
-        class="zan-toast__icon zan-toast__icon-loading"
-      >
-        <view class="zan-loading"></view>
-      </view>
-      <view
-        wx:else
-        class="zan-toast__icon zan-icon zan-icon-{{ zanToast.icon }}"
-      ></view>
-    </block>
+      <view class="zan-loading"></view>
+    </view>
+    <zan-icon
+      wx:else
+      type="{{ icon }}"
+      class="zan-toast__icon"
+    ></zan-icon>
+  </block>

-    <!-- 文案展示 -->
-    <view wx:if="{{ zanToast.title }}">{{ zanToast.title }}</view>
-  </view>
-</template>
+  <!-- 文案展示 -->
+  <view wx:if="{{ message }}">{{ message }}</view>
+</view>
--- a/dist/toast/index.wxss
+++ b/dist/toast/index.wxss
@ -1 +1 @@
-.zan-toast{position:fixed;top:35%;left:50%;transform:translate3d(-50%,-50%,0);background:rgba(0,0,0,.7);color:#fff;font-size:14px;line-height:1.5em;margin:0 auto;box-sizing:border-box;padding:10px 18px;text-align:center;border-radius:4px;z-index:100}.zan-toast--notitle{padding:18px}.zan-toast__icon{width:40px;height:40px;line-height:40px;margin:0 auto;padding:12px 15px;font-size:38px;text-align:center}.zan-toast__icon-loading{line-height:0}.zan-toast__icon-loading .zan-loading{width:40px;height:40px}.zan-toast__icon-image{background-size:40px;background-position:center;background-repeat:no-repeat}
+.zan-toast{position:fixed;top:35%;left:50%;transform:translate3d(-50%,-50%,0);background:rgba(0,0,0,.7);color:#fff;font-size:14px;line-height:1.5em;margin:0 auto;box-sizing:border-box;padding:10px 18px;text-align:center;border-radius:4px;z-index:100}.zan-toast--notitle{padding:18px}.zan-toast__icon{display:block;width:40px;height:40px;line-height:40px;margin:0 auto;padding:12px 15px;font-size:38px;text-align:center}.zan-toast__icon-loading{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}.zan-toast__icon-image{background-size:40px;background-position:center;background-repeat:no-repeat}
--- a/dist/toast/toast.js
+++ b/dist/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;
--- a/dist/toptips/index.js
+++ b/dist/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;
--- a/dist/toptips/index.json
+++ b/dist/toptips/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/toptips/index.wxml
+++ b/dist/toptips/index.wxml
@ -1,3 +1 @@
-<template name="zan-toptips">
-  <view class="zan-toptips {{ zanTopTips.show ? 'zan-toptips--show' : '' }}">{{ zanTopTips.content }}</view>
-</template>
+<view class="zan-toptips {{ isShow ? 'zan-toptips--show' : '' }}">{{ content }}</view>
				`@ -0,0 +1 @@`
				`<view class="col-class zan-col {{ col ? 'zan-col-' + col : '' }} {{ offset ? 'zan-col-offset-' + offset : '' }}"><slot></slot></view>`
				`@ -0,0 +1 @@`
				.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,.7);display:none}.pop__mask--hide{background:0 0}.pop__container{position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .4s ease;z-index:11;opacity:0}.pop--show .pop__container{opacity:1}.pop--show .pop__mask{display:block}.pop--left .pop__container{left:0;top:50%;transform:translate3d(-100%,-50%,0)}.pop--show.pop--left .pop__container{transform:translate3d(0,-50%,0)}.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)}.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)}.pop--top .pop__container{top:0;left:50%;transform:translate3d(-50%,-100%,0)}.pop--show.pop--top .pop__container{transform:translate3d(-50%,0,0)}
				`@ -0,0 +1 @@`
				`<view class="zan-icon zan-icon-{{ type }}"></view>`
				`@ -0,0 +1 @@`
				.loading.inline{position:relative;margin:15px;text-align:center;display:flex;justify-content:center}.loading.inline .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}.loading.inline.black .circle{border-color:#c9c9c9;border-top-color:#666}.loading.inline .circular{display:inline-block;height:24px;width:24px;animation:loading 2s linear infinite}.loading.inline .circular::after{content:'';display:block;width:100%;height:100%;border-radius:100%;border:3px solid transparent;box-sizing:border-box;animation:circular 2s ease infinite}.loading.inline .spinner{width:30px;height:30px;display:inline-block;position:relative;animation:loading 1s linear infinite;animation-timing-function:steps(12)}.loading.inline .spinner view{width:100%;height:100%;position:absolute;text-align:center;top:0;left:0}.loading.inline .spinner view::after{content:'';background:#fff;height:25%;display:block;width:2px;border-radius:2px;margin:0 auto}.loading.inline .spinner view:nth-child(1){transform:rotate(30deg);opacity:.78571}.loading.inline .spinner view:nth-child(2){transform:rotate(60deg);opacity:.71429}.loading.inline .spinner view:nth-child(3){transform:rotate(90deg);opacity:.64286}.loading.inline .spinner view:nth-child(4){transform:rotate(120deg);opacity:.57143}.loading.inline .spinner view:nth-child(5){transform:rotate(150deg);opacity:.5}.loading.inline .spinner view:nth-child(6){transform:rotate(180deg);opacity:.42857}.loading.inline .spinner view:nth-child(7){transform:rotate(210deg);opacity:.35714}.loading.inline .spinner view:nth-child(8){transform:rotate(240deg);opacity:.28571}.loading.inline .spinner view:nth-child(9){transform:rotate(270deg);opacity:.21429}.loading.inline .spinner view:nth-child(10){transform:rotate(300deg);opacity:.14286}.loading.inline .spinner view:nth-child(11){transform:rotate(330deg);opacity:.07143}.loading.inline .spinner view:nth-child(12){transform:rotate(360deg);opacity:0}.loading.inline.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}.loading.block .dot-spinner 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}.loading.block .dot-spinner view:nth-child(1){animation-delay:.5s}.loading.block .dot-spinner view:nth-child(2){animation-delay:.4s}.loading.block .dot-spinner view:nth-child(3){animation-delay:.3s}.loading.block .dot-spinner view:nth-child(4){animation-delay:.2s}.loading.block .dot-spinner view:nth-child(5){animation-delay:.1s}.loading.block .dot-spinner view:nth-child(6){animation-delay:0s}.loading.block .dot-spinner view:nth-child(6){display:none}.loading.block .dot-spinner view:nth-child(7){display:none}.loading.block .dot-spinner view:nth-child(8){display:none}.loading.block .dot-spinner view:nth-child(9){display:none}.loading.block .dot-spinner view:nth-child(10){display:none}.loading.block .dot-spinner view:nth-child(11){display:none}.loading.block .dot-spinner view:nth-child(12){display:none}.loading.block.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(0)}100%{transform:rotate(360deg)}}
				`@ -1 +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,.7);display:none}.zan-popup__container{position:fixed;left:50%;top:50%;background:#fff;transform:translate3d(-50%,-50%,0);transform-origin:center;transition:all .4s ease;z-index:11;opacity:0}.zan-popup--show .zan-popup__container{opacity:1}.zan-popup--show .zan-popup__mask{display:block}.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)}.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)}.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)}.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)}
				`@ -0,0 +1 @@`
				`<view class="row-class zan-row"><slot></slot></view>`