[build] 3.0.2

2025-04-06 03:58:05 +08:00 · 2018-05-13 23:31:54 +08:00 · 2018-05-13 23:31:54 +08:00 · 1f3d0f01c2
commit 1f3d0f01c2
parent 3286da1706
14 changed files with 732 additions and 41 deletions
--- a/dist/badge/index.wxml
+++ b/dist/badge/index.wxml
@ -1,8 +1,8 @@
 <view class="zan-badge">
-  <text
+  <view
    class="zan-badge__text"
    style="color: {{ color }}; background-color: {{ backgroundColor }};font-size: {{ fontSize * 2 }}px; box-shadow: {{ boxShadow }};"
  >
    <slot></slot>
-  </text>
+  </view>
 </view>
--- a/dist/btn/index.js
+++ b/dist/btn/index.js
@ -1,5 +1,8 @@
+const nativeButtonBehavior = require('./native-button-behaviors');
+
 Component({
  externalClasses: ['custom-class'],
+  behaviors: [nativeButtonBehavior],
  relations: {
    '../btn-group/index': {
      type: 'parent',
@ -31,10 +34,6 @@ Component({
    loading: {
      type: Boolean,
      value: false,
-    },
-    openType: {
-      type: String,
-      value: ''
    }
  },

@ -45,6 +44,10 @@ Component({

  methods: {
    handleTap() {
+      if (this.data.disabled) {
+        this.triggerEvent('disabledclick')
+        return;
+      }
      this.triggerEvent('btnclick');
    },

--- a/dist/btn/index.wxml
+++ b/dist/btn/index.wxml
@ -1,8 +1,21 @@
 <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 }}"
+  app-parameter="{{ appParameter }}"
+  hover-stop-propagation="{{ hoverStopPropagation }}"
+  hover-start-time="{{ hoverStartTime }}"
+  hover-stay-time="{{ hoverStayTime }}"
+  lang="{{ lang }}"
+  session-from="{{ sessionFrom }}"
+  send-message-title="{{ sendMessageTitle }}"
+  send-message-path="{{ sendMessagePath }}"
+  send-message-img="{{ sendMessageImg }}"
+  show-message-card="{{ showMessageCard }}"
  bindtap="handleTap"
+  bindcontact="bindcontact"
+  bindgetuserinfo="bindgetuserinfo"
+  bindgetphonenumber="bindgetphonenumber"
+  binderror="binderror"
 >
  <slot></slot>
 </button>
--- a/dist/btn/native-button-behaviors.js
+++ b/dist/btn/native-button-behaviors.js
@ -0,0 +1,49 @@
+module.exports = Behavior({
+  properties: {
+    loading: Boolean,
+    // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
+    // formType: String,
+    openType: String,
+    appParameter: String,
+    // 暂时不开放，直接传入无法设置样式
+    // hoverClass: {
+    //   type: String,
+    //   value: 'button-hover'
+    // },
+    hoverStopPropagation: Boolean,
+    hoverStartTime: {
+      type: Number,
+      value: 20
+    },
+    hoverStayTime: {
+      type: Number,
+      value: 70
+    },
+    lang: {
+      type: String,
+      value: 'en'
+    },
+    sessionFrom: {
+      type: String,
+      value: ''
+    },
+    sendMessageTitle: String,
+    sendMessagePath: String,
+    sendMessageImg: String,
+    showMessageCard: String
+  },
+  methods: {
+    bindgetuserinfo({ detail = {} } = {}) {
+      this.triggerEvent('getuserinfo', detail);
+    },
+    bindcontact({ detail = {} } = {}) {
+      this.triggerEvent('contact', detail);
+    },
+    bindgetphonenumber({ detail = {} } = {}) {
+      this.triggerEvent('getphonenumber', detail);
+    },
+    binderror({ detail = {} } = {}) {
+      this.triggerEvent('error', detail);
+    }
+  }
+});
--- a/dist/cell-group/index.js
+++ b/dist/cell-group/index.js
@ -2,18 +2,43 @@ Component({
  relations: {
    '../cell/index': {
      type: 'child',
-      linked() {}
+      linked() {
+        this._updateIsLastCell();
+      },
+      linkChanged() {
+        this._updateIsLastCell();
+      },
+      unlinked() {
+        this._updateIsLastCell();
+      }
    }
  },
-  ready() {
-    let cells = this.getRelationNodes('../cell/index');

-    if (cells.length > 0) {
-      let lastIndex = cells.length - 1;
+  data: {
+    cellUpdateTimeout: 0
+  },

-      cells.forEach((cell, index) => {
-        if (index < lastIndex) cell.notLastCell();
+  methods: {
+    _updateIsLastCell() {
+      // 用 setTimeout 减少计算次数
+      if (this.data.cellUpdateTimeout > 0) {
+        return;
+      }
+
+      const cellUpdateTimeout = setTimeout(() => {
+        this.setData({ cellUpdateTimeout: 0 });
+        let cells = this.getRelationNodes('../cell/index');
+
+        if (cells.length > 0) {
+          let lastIndex = cells.length - 1;
+
+          cells.forEach((cell, index) => {
+            cell.updateIsLastCell(index === lastIndex);
+          });
+        }
      });
+
+      this.setData({ cellUpdateTimeout });
    }
  }
 });
--- a/dist/cell/index.js
+++ b/dist/cell/index.js
@ -72,8 +72,10 @@ Component({
        this.navigateTo();
      }
    },
-    notLastCell() {
-      this.setData({ isLastCell: false });
+
+    // 用于被 cell-group 更新，标志是否是最后一个 cell
+    updateIsLastCell(isLastCell) {
+      this.setData({ isLastCell });
    }
  }
 });
--- a/dist/datetime-picker/index.js
+++ b/dist/datetime-picker/index.js
@ -0,0 +1,313 @@
+function partStartWithZero(num, strlen) {
+  let zeros = '';
+  while (zeros.length < strlen) {
+    zeros += '0';
+  }
+  return (zeros + num).slice(-strlen);
+}
+
+function genNumber(begin, end, strlen) {
+  let nums = [];
+  while (begin <= end) {
+    nums.push(partStartWithZero(begin, strlen));
+    begin++;
+  }
+  return nums;
+}
+
+function moment(date, formatStr = 'YYYY:MM:DD') {
+  if (!date && date !== 0) date = new Date();
+
+  date = new Date(date);
+  if (date.toString() === 'Invalid Date') throw new Error('Invalid Date');
+
+  let getDateValue = (method, fn) => (fn ? fn(date[`get${method}`]()) : date[`get${method}`]());
+  let map = new Map();
+
+  map.set(/(Y+)/i, () => getDateValue('FullYear', year => (year + '').substr(4 - RegExp.$1.length)));
+  map.set(/(M+)/, () => getDateValue('Month', month => partStartWithZero(month + 1, RegExp.$1.length)));
+  map.set(/(D+)/i, () => getDateValue('Date', date => partStartWithZero(date, RegExp.$1.length)));
+  map.set(/(H+)/i, () => getDateValue('Hours', hour => partStartWithZero(hour, RegExp.$1.length)));
+  map.set(/(m+)/, () => getDateValue('Minutes', minute => partStartWithZero(minute, RegExp.$1.length)));
+  map.set(/(s+)/, () => getDateValue('Seconds', second => partStartWithZero(second, RegExp.$1.length)));
+
+  for (const [reg, fn] of map) {
+    if (reg.test(formatStr)) {
+      formatStr = formatStr.replace(RegExp.$1, fn.call(null));
+    }
+  }
+
+  return formatStr;
+}
+
+const LIMIT_YEAR_COUNT = 50;
+class DatePicker {
+  constructor(format, date = new Date(), cb) {
+    this.types = ['year', 'month', 'day', 'hour', 'minute', 'second'];
+    this.months = genNumber(1, 12, 2);
+    this.hours = genNumber(0, 23, 2);
+    this.seconds = genNumber(0, 59, 2);
+    this.minutes = genNumber(0, 59, 2);
+    // this.format(format);
+    this.init(date, cb);
+  }
+
+  getYears(year) {
+    let mid = Math.floor(LIMIT_YEAR_COUNT / 2);
+    let min = year - mid;
+    let max = year + (LIMIT_YEAR_COUNT - mid);
+    return genNumber(min, max, 4);
+  }
+
+  lastDay(year, month) {
+    return month !== 12 ? new Date(
+      new Date(`${year}/${month + 1}/1`).getTime() - (24 * 60 * 60 * 1000)
+    ).getDate() : 31;
+  }
+
+  init(date, cb) {
+    let d = new Date(date);
+    let y = d.getFullYear();
+    let m = d.getMonth() + 1;
+    let years = this.getYears(y);
+    let lastDay = this.lastDay(y, m);
+
+    let days = genNumber(1, lastDay, 2);
+
+    this._years = years;
+    this._dataList = [years, this.months, days, this.hours, this.minutes, this.seconds];
+    this._indexs = [25, m - 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
+    cb && cb({
+      dataList: this._dataList,
+      indexs: this._indexs
+    });
+  }
+
+  update(col, index, cb) {
+    let type = this.types[col];
+    switch (type) {
+      case 'year':
+        this._updateYear(col, index, cb);
+        break;
+      case 'month':
+        this._updateMonth(col, index, cb);
+        break;
+      default:
+        this._indexs[col] = index;
+        cb && cb({
+          dataList: this._dataList,
+          indexs: this._indexs,
+          updateColumn: col,
+          updateIndex: index
+        });
+    }
+  }
+
+  _updateYear(col, index, cb) {
+    let years = this._dataList[col];
+    let year = years[index];
+
+    this._dataList[col] = this.getYears(+year);
+
+    this._indexs[col] = Math.floor(LIMIT_YEAR_COUNT / 2);
+    cb && cb({
+      dataList: this._dataList,
+      indexs: this._indexs,
+      updateColumn: col
+    });
+  }
+
+  _updateMonth(col, index, cb) {
+    let month = this._dataList[col][index];
+    let year = this._dataList[0][this._indexs[0]];
+    let lastDay = this.lastDay(+year, +month);
+    this._indexs[col] = index;
+    this._dataList[2] = genNumber(1, lastDay, 2);
+    this._indexs[2] = this._indexs[2] >= this._dataList[2].length ? this._dataList[2].length - 1 : this._indexs[2];
+    cb && cb({
+      dataList: this._dataList,
+      indexs: this._indexs,
+      updateColumn: 2,
+      updateIndex: this._indexs[2]
+    });
+    cb && cb({
+      dataList: this._dataList,
+      indexs: this._indexs,
+      updateColumn: 1,
+      updateIndex: index
+    });
+  }
+}
+// 组件内使用 this.indexs 好像有问题
+let _indexs = [];
+Component({
+  properties: {
+    placeholder: {
+      type: String,
+      value: '请选择时间'
+    },
+    format: {
+      type: String,
+      value: 'YYYY-MM-DD HH:mm:ss'
+    },
+    native: {
+      type: Boolean
+    },
+    pickerView: {
+      type: Boolean
+    },
+    date: {
+      type: String,
+      value: new Date()
+    },
+    notUse: {
+      type: Array
+    }
+  },
+  externalClasses: ['placeholder-class'],
+  data: {
+    transPos: [0, 0, 0, 0, 0, 0]
+  },
+  attached() {
+    this.use = {}
+    ;['years', 'months', 'days', 'hours', 'minutes', 'seconds'].forEach((item) => {
+      if ((this.data.notUse || []).indexOf(item) === -1) { this.use[item] = true }
+    });
+    this.setData({ use: this.use });
+    this.data.pickerView && !this.data.native && this.showPicker();
+  },
+  ready() {
+    // 微信 bug，如果不先定义会导致不能选中
+    this.setData({
+      "dataList":[
+        [
+          "2018","2019","2020","2021","2022","2023","2024","2025","2026","2027","2028","2029","2030","2031","2032","2033","2034","2035","2036","2037","2038","2039","2040","2041","2042","2043"
+        ],
+        genNumber(1, 12, 2),
+        genNumber(0, 31, 2),
+        genNumber(0, 23, 2),
+        genNumber(0, 59, 2),
+        genNumber(0, 59, 2)
+      ]
+    })
+    this.picker = new DatePicker(this.data.format, this.data.date, this.updatePicker.bind(this));
+  },
+  methods: {
+    updatePicker({ dataList, indexs, updateColumn, updateIndex }) {
+      let updateData = {};
+      _indexs = indexs;
+      // 指定更新某列数据，表示某列数据更新
+      if (updateColumn) {
+        updateData[`transPos[${updateColumn}]`] = -36 * _indexs[updateColumn];
+        updateData[`dataList[${updateColumn}]`] = dataList[updateColumn];
+      }
+      // 指定更新某列索引，表示某列数据选中的索引已更新
+      if (typeof updateIndex !== 'undefined') {
+        updateData[`transPos[${updateColumn}]`] = -36 * _indexs[updateColumn];
+        updateData[`selected[${updateColumn}]`] = indexs[updateColumn];
+      }
+
+      // 只在初始化时设置全部的值，其他的都局部更新
+      if (!updateColumn && typeof updateIndex === 'undefined') {
+        updateData = { dataList, selected: indexs };
+        _indexs.forEach((item, index) => {
+          updateData[`transPos[${index}]`] = -item * 36;
+        });
+      }
+
+      this.setData(updateData);
+    },
+    touchmove(e) {
+      let { changedTouches, target } = e;
+      let col = target.dataset.col;
+      let { clientY } = changedTouches[0];
+      if (!col) return;
+
+      let updateData = {};
+      let itemLength = this.data.dataList[col].length;
+      updateData[`transPos[${col}]`] = this.startTransPos + (clientY - this.startY);
+      if (updateData[`transPos[${col}]`] >= 0) {
+        updateData[`transPos[${col}]`] = 0;
+      } else if (-(itemLength - 1) * 36 >= updateData[`transPos[${col}]`]) {
+        updateData[`transPos[${col}]`] = -(itemLength - 1) * 36;
+      }
+      this.setData(updateData);
+    },
+    touchStart(e) {
+      let { target, changedTouches } = e;
+      let col = target.dataset.col;
+      let touchData = changedTouches[0];
+      if (!col) return;
+
+      this.startY = touchData.clientY;
+      this.startTime = e.timeStamp;
+      this.startTransPos = this.data.transPos[col];
+    },
+    touchEnd(e) {
+      let { col } = e.target.dataset;
+      if (!col) return;
+      let pos = this.data.transPos[col];
+      let itemIndex = Math.round(pos / 36);
+
+      this.columnchange({ detail: { column: +col, value: -itemIndex } });
+    },
+    columnchange(e) {
+      let { column, value } = e.detail;
+      _indexs[column] = value;
+      this.picker.update(column, value, this.updatePicker.bind(this));
+      this.data.pickerView && !this.data.native && this.change({detail: {value: _indexs}})
+    },
+    getFormatStr() {
+      let date = new Date()
+      ;['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds'].forEach((key, index) => {
+        let value = this.data.dataList[index][_indexs[index]];
+        if (key === 'Month') {
+          value = +this.data.dataList[index][_indexs[index]] - 1;
+        }
+        date[`set${key}`](+value);
+      });
+
+      return moment(date, this.data.format);
+    },
+    showPicker() {
+      this.setData({ show: true });
+    },
+    hidePicker(e) {
+      let { action } = e.currentTarget.dataset;
+      this.setData({ show: false });
+      if (action === 'cancel') {
+        this.cancel({ detail: {} });
+      } else {
+        this.change({ detail: { value: _indexs } });
+      }
+    },
+    change(e) {
+      let { value } = e.detail;
+      
+      let data = this.data.dataList.map((item, index) => {
+        return +item[value[index]];
+      });
+
+      this.triggerEvent('change', { value: data });
+
+      // 为了支持原生 picker view，每次 change 都需要手动 columnchange
+      if (this.data.pickerView && this.data.native) {
+        for (let index = 0; index < value.length; index++) {
+          if (_indexs[index] !== value[index]) {
+            this.columnchange({
+              detail: {
+                column: index, value: value[index]
+              }
+            })
+            break // 这里每次只处理一列，否则会出现日期值为 undefined 的情况
+          }
+        }
+      }
+
+      this.setData({ text: this.getFormatStr() });
+    },
+    cancel(e) {
+      this.triggerEvent('cancel', e.detail);
+    }
+  }
+});
--- a/dist/datetime-picker/index.json
+++ b/dist/datetime-picker/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/datetime-picker/index.wxml
+++ b/dist/datetime-picker/index.wxml
@ -0,0 +1,111 @@
+<block wx:if="{{ pickerView }}">
+  <picker-view
+    wx:if="{{ native }}"
+    value="{{ selected }}"
+    bindchange="change"
+    indicator-style="height: 50px;"
+    class="picker-visible">
+    <picker-view-column>
+      <view wx:for="{{dataList[0]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+    </picker-view-column>
+
+    <picker-view-column>
+      <view wx:for="{{dataList[1]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+    </picker-view-column>
+
+    <picker-view-column>
+      <view wx:for="{{dataList[2]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+    </picker-view-column>
+
+    <picker-view-column>
+      <view wx:for="{{dataList[3]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+    </picker-view-column>
+
+    <picker-view-column>
+      <view wx:for="{{dataList[4]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+    </picker-view-column>
+
+    <picker-view-column>
+      <view wx:for="{{dataList[5]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+    </picker-view-column>
+  </picker-view>
+</block>
+<block wx:else>
+  <picker
+    wx:if="{{native}}"
+    mode="multiSelector" 
+    range="{{ dataList }}" 
+    value="{{ selected }}"
+    bindchange="change"
+    bindcolumnchange="columnchange"
+    bindcancel="cancel" >
+    <view class="placeholder-class">
+      {{text || placeholder}}
+    </view>
+  </picker>
+</block>
+<view data-action="cancel" bindtap="hidePicker" class="picker-mask {{show && !pickerView ? 'show' : ''}}"></view>
+<view wx:if="{{ !native }}" class="data-time-picker {{ pickerView && 'picker-view' }}">
+  <view bindtap="showPicker" wx:if="{{ !pickerView }}" class="placeholder-class">{{text || placeholder}}</view>
+  <view class="picker {{show ? 'picker-visible' : ''}}">
+    <view wx:if="{{!pickerView}}" class="picker-action">
+      <view data-action="cancel" bindtap="hidePicker">取消</view>
+      <view data-action="change" bindtap="hidePicker">确认</view>
+    </view>
+    <view 
+      catchtouchstart="touchStart" 
+      catchtouchend="touchEnd" 
+      catchtouchmove="touchmove" class="picker-cols">
+
+      <view wx:if="{{use['years']}}" data-col="0" class="col">
+        <view data-col="0" style="transform: translateY({{ transPos[0] }}px)">
+          <view data-col="0" class="{{ index === selected[0] ? 'select-item' : '' }} cell" 
+            wx:for-index="index" 
+            wx:for="{{dataList[0]}}" wx:key="*this">{{item}}</view>
+        </view>
+      </view>
+      <view wx:if="{{use['years']}}" data-col="0" class="fixed-col">年</view>
+
+      <view wx:if="{{use['months']}}" data-col="1" class="col">
+        <view data-col="1" style="transform: translateY({{ transPos[1] }}px)">
+          <view data-col="1" class="{{ index === selected[1] ? 'select-item' : '' }} cell" 
+            wx:for-index="index"
+            wx:for="{{dataList[1]}}" wx:key="*this">{{item}}</view>
+        </view>
+      </view>
+      <view wx:if="{{use['months']}}" data-col="1" class="fixed-col">月</view>
+
+      <view wx:if="{{use['days']}}" data-col="2" class="col">
+        <view data-col="2" style="transform: translateY({{ transPos[2] }}px)">
+          <view data-col="2" class="{{ index === selected[2] ? 'select-item' : '' }} cell" 
+            wx:for-index="index" wx:for="{{dataList[2]}}" wx:key="*this">{{item}}</view>
+        </view>
+      </view>
+      <view wx:if="{{use['days']}}" data-col="2" class="fixed-col">日</view>
+
+      <view wx:if="{{use['hours']}}" data-col="3" class="col">
+        <view data-col="3" style="transform: translateY({{ transPos[3] }}px)">
+          <view data-col="3" class="{{ index === selected[3] ? 'select-item' : '' }} cell" 
+            wx:for-index="index" wx:for="{{dataList[3]}}" wx:key="*this">{{item}}</view>
+        </view>
+      </view>
+      <view wx:if="{{use['hours']}}" data-col="3" class="fixed-col">时</view>
+
+      <view wx:if="{{use['minutes']}}" data-col="4" class="col">
+        <view data-col="4" style="transform: translateY({{ transPos[4] }}px)">
+          <view data-col="4" class="{{ index === selected[4] ? 'select-item' : '' }} cell" 
+            wx:for-index="index" wx:for="{{dataList[4]}}" wx:key="*this">{{item}}</view>
+        </view>
+      </view>
+      <view wx:if="{{use['minutes']}}" data-col="4" class="fixed-col">分</view>
+
+      <view wx:if="{{use['seconds']}}" data-col="5" class="col">
+        <view data-col="5" style="transform: translateY({{ transPos[5] }}px)">
+          <view data-col="5" class="{{ index === selected[5] ? 'select-item' : '' }} cell" 
+            wx:for-index="index" wx:for="{{dataList[5]}}" wx:key="*this">{{item}}</view>
+        </view>
+      </view>
+      <view wx:if="{{use['seconds']}}" data-col="5" class="fixed-col">秒</view>
+    </view>
+  </view>
+</view>
--- a/dist/datetime-picker/index.wxss
+++ b/dist/datetime-picker/index.wxss
@ -0,0 +1,110 @@
+.picker-view-column {
+  font-size: 14px;
+}
+.placeholder-class {
+  width: 100%;
+}
+
+.picker {
+  position: fixed;
+  bottom: -100px;
+  width: 100vw;
+  left: 0;
+  background: #fff;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  transition: height ease-in 0.3s;
+}
+.picker-view .picker {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  width: 100%;
+  z-index: auto;
+}
+.picker-visible {
+  height: 236px;
+  bottom: 0;
+}
+.picker-view .picker-visible {
+  height: 200px;
+}
+.picker-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: -1;
+}
+.picker-mask.show {
+  bottom: 0;  
+  z-index: 998; 
+}
+.picker .picker-action {
+  height: 36px;
+  border-bottom: 1rpx solid #e5e5e5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+}
+.picker-action view:last-child {
+  color: #1aad16;
+}
+.picker .picker-cols {
+  display: flex;
+  flex: 1;
+  margin: 10px 5px;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  height: 180px;
+  font-size: 16px;
+}
+.picker-cols .fixed-col {
+  color: #999;
+  margin-left: 5px;
+  height:100%;
+  line-height:180px;
+}
+.picker-cols .col {
+  transform-origin: center;
+  font-size: 14px;
+}
+.picker-cols .col .select-item {
+  color: #333;
+  font-size: 16px;
+}
+.picker-cols .col {
+  flex: 1;
+  text-align: right;
+  color: #aaa;
+  height: 180px;
+  position: relative;
+  padding-top: 79px;
+}
+.picker-cols .col > view {
+  transition: transform 0.0003s;
+}
+.picker-cols .col .cell {
+  height: 36px;
+}
+.picker-cols::after, .picker-cols::before {
+  content: '';
+  position: absolute;
+  height: 72px;
+  width: calc(100% - 10px);
+  pointer-events: none;
+}
+.picker-cols::before {
+  top: 0;
+  border-bottom: 1rpx solid #e5e5e5;
+}
+.picker-cols::after {
+  bottom: 0;
+  border-top: 1rpx solid #e5e5e5;  
+}
--- a/dist/field/index.js
+++ b/dist/field/index.js
@ -1,13 +1,12 @@
 Component({
+  behaviors: ['wx://form-field'],
+
  properties: {
    title: String,
-    name: String,
    type: {
      type: String,
      value: 'input'
    },
-    name: String,
-    value: String,
    disabled: Boolean,
    inputType: {
      type: String,
@ -28,20 +27,19 @@ Component({
  },

  methods: {
-    handleZanFieldChange(event) {
-      
+    handleFieldChange(event) {
+      const { detail = {} } = event;
+      const { value = '' } = detail;
+      this.setData({ value });
+
      this.triggerEvent('change', event);
    },

-    handleZanFieldFocus(event) {
-      
-
+    handleFieldFocus(event) {
      this.triggerEvent('focus', event);
    },

-    handleZanFieldBlur(event) {
-      
-
+    handleFieldBlur(event) {
      this.triggerEvent('blur', event);
    }
  }
--- a/dist/field/index.wxml
+++ b/dist/field/index.wxml
@ -7,7 +7,6 @@
  <textarea
    wx:if="{{ type === 'textarea' }}"
    auto-height
-    name="{{ name || '' }}"
    disabled="{{ disabled }}"
    focus="{{ focus }}"
    value="{{ value }}"
@ -15,14 +14,13 @@
    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>
+    bindinput="handleFieldChange"
+    bindfocus="handleFieldFocus"
+    bindblur="handleFieldBlur"
+  ></textarea>
  <input
    wx:else
    type="{{ inputType || 'text' }}"
-    name="{{ name || '' }}"
    disabled="{{ disabled }}"
    focus="{{ focus }}"
    value="{{ value }}"
@ -30,8 +28,8 @@
    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"
+    bindinput="handleFieldChange"
+    bindfocus="handleFieldFocus"
+    bindblur="handleFieldBlur"
  />
 </view>
--- a/dist/icon/index.wxss
+++ b/dist/icon/index.wxss
@ -1 +1 @@
-@font-face{font-family:zanui-weapp-icon;src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.eot);src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.eot?#iefix) format('embedded-opentype'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.woff2) format('woff2'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.woff) format('woff'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.ttf) format('truetype')}.zan-icon{display:inline-block}.zan-icon::before{font-family:zanui-weapp-icon!important;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;-webkit-font-smoothing:antialiased}.zan-icon-qr-invalid:before{content:'\e800'}.zan-icon-qr:before{content:'\e801'}.zan-icon-exchange:before{content:'\e802'}.zan-icon-close:before{content:'\e803'}.zan-icon-location:before{content:'\e804'}.zan-icon-upgrade:before{content:'\e805'}.zan-icon-check:before{content:'\e806'}.zan-icon-checked:before{content:'\e807'}.zan-icon-like-o:before{content:'\e808'}.zan-icon-like:before{content:'\e809'}.zan-icon-chat:before{content:'\e80a'}.zan-icon-shop:before{content:'\e80b'}.zan-icon-photograph:before{content:'\e80c'}.zan-icon-add:before{content:'\e80d'}.zan-icon-add2:before{content:'\e80e'}.zan-icon-photo:before{content:'\e80f'}.zan-icon-logistics:before{content:'\e810'}.zan-icon-edit:before{content:'\e811'}.zan-icon-passed:before{content:'\e812'}.zan-icon-cart:before{content:'\e813'}.zan-icon-shopping-cart:before{content:'\e814'}.zan-icon-arrow:before{content:'\e815'}.zan-icon-gift:before{content:'\e816'}.zan-icon-search:before{content:'\e817'}.zan-icon-clear:before{content:'\e818'}.zan-icon-success:before{content:'\e819'}.zan-icon-fail:before{content:'\e81a'}.zan-icon-contact:before{content:'\e81b'}.zan-icon-wechat:before{content:'\e81c'}.zan-icon-alipay:before{content:'\e81d'}.zan-icon-password-view:before{content:'\e81e'}.zan-icon-password-not-view:before{content:'\e81f'}.zan-icon-wap-nav:before{content:'\e820'}.zan-icon-wap-home:before{content:'\e821'}.zan-icon-ecard-pay:before{content:'\e822'}.zan-icon-balance-pay:before{content:'\e823'}.zan-icon-peer-pay:before{content:'\e824'}.zan-icon-credit-pay:before{content:'\e825'}.zan-icon-debit-pay:before{content:'\e826'}.zan-icon-other-pay:before{content:'\e827'}.zan-icon-browsing-history:before{content:'\e828'}.zan-icon-goods-collect:before{content:'\e829'}.zan-icon-shop-collect:before{content:'\e82a'}.zan-icon-receive-gift:before{content:'\e82b'}.zan-icon-send-gift:before{content:'\e82c'}.zan-icon-setting:before{content:'\e82d'}.zan-icon-points:before{content:'\e82e'}.zan-icon-coupon:before{content:'\e82f'}.zan-icon-free-postage:before{content:'\e830'}.zan-icon-discount:before{content:'\e831'}.zan-icon-birthday-privilege:before{content:'\e832'}.zan-icon-member-day-privilege:before{content:'\e833'}.zan-icon-balance-details:before{content:'\e834'}.zan-icon-cash-back-record:before{content:'\e835'}.zan-icon-points-mall:before{content:'\e836'}.zan-icon-exchange-record:before{content:'\e837'}.zan-icon-pending-payment:before{content:'\e838'}.zan-icon-pending-orders:before{content:'\e839'}.zan-icon-pending-deliver:before{content:'\e83a'}.zan-icon-pending-evaluate:before{content:'\e83b'}.zan-icon-gift-card-pay:before{content:'\e83c'}.zan-icon-cash-on-deliver:before{content:'\e83d'}.zan-icon-underway:before{content:'\e83e'}.zan-icon-point-gift:before{content:'\e83f'}.zan-icon-after-sale:before{content:'\e840'}.zan-icon-edit-data:before{content:'\e841'}.zan-icon-question:before{content:'\e842'}.zan-icon-delete:before{content:'\e843'}.zan-icon-records:before{content:'\e844'}.zan-icon-description:before{content:'\e845'}.zan-icon-card:before{content:'\e846'}.zan-icon-gift-card:before{content:'\e847'}.zan-icon-clock:before{content:'\e848'}.zan-icon-gold-coin:before{content:'\e849'}.zan-icon-completed:before{content:'\e84a'}.zan-icon-value-card:before{content:'\e84b'}.zan-icon-certificate:before{content:'\e84c'}.zan-icon-tosend:before{content:'\e84d'}.zan-icon-sign:before{content:'\e84e'}.zan-icon-home:before{content:'\e84f'}.zan-icon-phone:before{content:'\e850'}.zan-icon-add-o:before{content:'\e851'}.zan-icon-play:before{content:'\e852'}.zan-icon-pause:before{content:'\e853'}.zan-icon-stop:before{content:'\e854'}.zan-icon-hot:before{content:'\e855'}.zan-icon-new:before{content:'\e856'}.zan-icon-new-arrival:before{content:'\e857'}.zan-icon-hot-sale:before{content:'\e858'}
+@font-face{font-family:zanui-weapp-icon;src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-eeb0d3c52a.eot);src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-eeb0d3c52a.eot?#iefix) format('embedded-opentype'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-eeb0d3c52a.woff2) format('woff2'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-eeb0d3c52a.woff) format('woff'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-eeb0d3c52a.ttf) format('truetype')}.zan-icon{display:inline-block}.zan-icon::before{font-family:zanui-weapp-icon!important;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;-webkit-font-smoothing:antialiased}.zan-icon-qr-invalid:before{content:'\e800'}.zan-icon-qr:before{content:'\e801'}.zan-icon-exchange:before{content:'\e802'}.zan-icon-close:before{content:'\e803'}.zan-icon-location:before{content:'\e804'}.zan-icon-upgrade:before{content:'\e805'}.zan-icon-check:before{content:'\e806'}.zan-icon-checked:before{content:'\e807'}.zan-icon-like-o:before{content:'\e808'}.zan-icon-like:before{content:'\e809'}.zan-icon-chat:before{content:'\e80a'}.zan-icon-shop:before{content:'\e80b'}.zan-icon-photograph:before{content:'\e80c'}.zan-icon-add:before{content:'\e80d'}.zan-icon-minus:before{content:'\e80e'}.zan-icon-add2:before{content:'\e80f'}.zan-icon-photo:before{content:'\e810'}.zan-icon-logistics:before{content:'\e811'}.zan-icon-edit:before{content:'\e812'}.zan-icon-passed:before{content:'\e813'}.zan-icon-cart:before{content:'\e814'}.zan-icon-shopping-cart:before{content:'\e815'}.zan-icon-arrow:before{content:'\e816'}.zan-icon-gift:before{content:'\e817'}.zan-icon-search:before{content:'\e818'}.zan-icon-clear:before{content:'\e819'}.zan-icon-success:before{content:'\e81a'}.zan-icon-fail:before{content:'\e81b'}.zan-icon-contact:before{content:'\e81c'}.zan-icon-wechat:before{content:'\e81d'}.zan-icon-alipay:before{content:'\e81e'}.zan-icon-password-view:before{content:'\e81f'}.zan-icon-password-not-view:before{content:'\e820'}.zan-icon-wap-nav:before{content:'\e821'}.zan-icon-wap-home:before{content:'\e822'}.zan-icon-ecard-pay:before{content:'\e823'}.zan-icon-balance-pay:before{content:'\e824'}.zan-icon-peer-pay:before{content:'\e825'}.zan-icon-credit-pay:before{content:'\e826'}.zan-icon-debit-pay:before{content:'\e827'}.zan-icon-other-pay:before{content:'\e828'}.zan-icon-browsing-history:before{content:'\e829'}.zan-icon-goods-collect:before{content:'\e82a'}.zan-icon-shop-collect:before{content:'\e82b'}.zan-icon-receive-gift:before{content:'\e82c'}.zan-icon-send-gift:before{content:'\e82d'}.zan-icon-setting:before{content:'\e82e'}.zan-icon-points:before{content:'\e82f'}.zan-icon-coupon:before{content:'\e830'}.zan-icon-free-postage:before{content:'\e831'}.zan-icon-discount:before{content:'\e832'}.zan-icon-birthday-privilege:before{content:'\e833'}.zan-icon-member-day-privilege:before{content:'\e834'}.zan-icon-balance-details:before{content:'\e835'}.zan-icon-cash-back-record:before{content:'\e836'}.zan-icon-points-mall:before{content:'\e837'}.zan-icon-exchange-record:before{content:'\e838'}.zan-icon-pending-payment:before{content:'\e839'}.zan-icon-pending-orders:before{content:'\e83a'}.zan-icon-pending-deliver:before{content:'\e83b'}.zan-icon-pending-evaluate:before{content:'\e83c'}.zan-icon-gift-card-pay:before{content:'\e83d'}.zan-icon-cash-on-deliver:before{content:'\e83e'}.zan-icon-underway:before{content:'\e83f'}.zan-icon-point-gift:before{content:'\e840'}.zan-icon-after-sale:before{content:'\e841'}.zan-icon-edit-data:before{content:'\e842'}.zan-icon-question:before{content:'\e843'}.zan-icon-delete:before{content:'\e844'}.zan-icon-records:before{content:'\e845'}.zan-icon-description:before{content:'\e846'}.zan-icon-card:before{content:'\e847'}.zan-icon-gift-card:before{content:'\e848'}.zan-icon-clock:before{content:'\e849'}.zan-icon-gold-coin:before{content:'\e84a'}.zan-icon-completed:before{content:'\e84b'}.zan-icon-value-card:before{content:'\e84c'}.zan-icon-certificate:before{content:'\e84d'}.zan-icon-tosend:before{content:'\e84e'}.zan-icon-sign:before{content:'\e84f'}.zan-icon-home:before{content:'\e850'}.zan-icon-phone:before{content:'\e851'}.zan-icon-add-o:before{content:'\e852'}.zan-icon-minus-o:before{content:'\e853'}.zan-icon-play:before{content:'\e854'}.zan-icon-pause:before{content:'\e855'}.zan-icon-stop:before{content:'\e856'}.zan-icon-hot:before{content:'\e857'}.zan-icon-new:before{content:'\e858'}.zan-icon-new-arrival:before{content:'\e859'}.zan-icon-hot-sale:before{content:'\e85a'}
--- a/dist/toast/toast.js
+++ b/dist/toast/toast.js
@ -1,15 +1,47 @@
+const TOAST_CONFIG_KEY = 'zanui.__zanToastPageConfig';
+
 let timeoutData = {
  timeoutId: 0,
  toastCtx: null
 };

-function Toast(options = {}, pageCtx) {
+let globalToastUserConfig = {};
+
+// 获取页面上下文
+function getPageCtx(pageCtx) {
  let ctx = pageCtx;
+
  if (!ctx) {
    const pages = getCurrentPages();
    ctx = pages[pages.length - 1];
  }
-  const toastCtx = ctx.selectComponent(options.selector);
+
+  return ctx;
+}
+
+// 获取当前页面的 toast 配置数据
+function getPageToastConfig(pageCtx) {
+  const zanuiData = pageCtx.data.zanui || {};
+  return zanuiData.__zanToastPageConfig || {};
+}
+
+// Toast 显示函数
+function Toast(optionsOrMsg, pageCtx) {
+  // 参数格式化处理
+  // 如果是文字，默认为 message
+  let options = optionsOrMsg || {};
+  if (typeof optionsOrMsg === 'string') {
+    options = { message: optionsOrMsg };
+  }
+
+  let ctx = getPageCtx(pageCtx);
+  const pageToastUserSetting = getPageToastConfig(ctx);
+  const parsedOptions = {
+    ...globalToastUserConfig,
+    ...pageToastUserSetting,
+    ...options
+  };
+  const toastCtx = ctx.selectComponent(parsedOptions.selector);

  if (!toastCtx) {
    console.error('无法找到对应的toast组件，请于页面中注册并在 wxml 中声明 toast 自定义组件');
@ -21,13 +53,13 @@ function Toast(options = {}, pageCtx) {
  }

  toastCtx.show({
-    ...options,
+    ...parsedOptions,
    show: true
  });

  const timeoutId = setTimeout(() => {
    toastCtx.clear();
-  }, options.timeout || 3000);
+  }, parsedOptions.timeout || 3000);

  timeoutData = {
    timeoutId,
@ -35,6 +67,40 @@ function Toast(options = {}, pageCtx) {
  };
 }

+// 设置 toast 基础属性
+Toast.setDefaultOptions = function (options = {}, type = 'page') {
+  const parsedDefaultOptions = {
+    selector: options.selector || '',
+    type: options.type || '',
+    icon: options.icon || '',
+    image: options.image || '',
+    timeout: options.timeout || 3000
+  };
+
+  if (type === 'global') {
+    globalToastUserConfig = {
+      ...parsedDefaultOptions
+    };
+  } else if (type === 'page') {
+    let ctx = getPageCtx();
+    ctx.setData({
+      [`${TOAST_CONFIG_KEY}`]: parsedDefaultOptions
+    });
+  }
+};
+
+// 重置 toast 基础属性
+Toast.resetDefaultOptions = function (type = 'page') {
+  if (type === 'global') {
+    globalToastUserConfig = {};
+  } else {
+    let ctx = getPageCtx();
+    ctx.setData({
+      [`${TOAST_CONFIG_KEY}`]: {}
+    });
+  }
+};
+
 // 清理所有 toast
 Toast.clear = function () {
  clearTimeout(timeoutData.timeoutId);