merge: merge master

2025-10-19 18:14:13 +00:00 · 2017-03-22 17:08:28 +08:00
parent 6728837bb2 597d981f53
commit befabdcad1
50 changed files with 871 additions and 255 deletions
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -3,6 +3,7 @@
    <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
    <div class="page-content">
      <router-view></router-view>
+      <footer-nav></footer-nav>
    </div>
  </div>
 </template>
@@ -22,93 +23,4 @@ export default {

 <style lang="css">
  @import './assets/docs.css';
-
-  .page-container {
-    height: 100%;
-    overflow: scroll;
-
-    h2 {
-      font-size: 28px;
-      color: #1f2d3d;
-      margin: 20px 0;
-      line-height: 40px;
-    }
-
-    section > h3 {
-      font-size: 22px;
-      margin: 23px 0;
-    }
-
-    h2, h3, h4, h5 {
-      font-weight: normal;
-      color: #1f2f3d;
-
-      &:hover a {
-        opacity: .4;
-      }
-
-      a {
-        float: left;
-        margin-left: -20px;
-        opacity: 0;
-        cursor: pointer;
-
-        &:hover {
-          opacity: .4;
-        }
-      }
-    }
-  }
-
-  .page-content {
-    box-sizing: border-box;
-    overflow: auto;
-    height: inherit;
-    margin-left: 320px;
-    padding: 0 20px;
-
-    section > p {
-      font-size: 14px;
-      color: #5e6d82;
-      margin: 14px 0;
-    }
-
-     p > code {
-      background-color: #eee;
-      padding: 2px 4px;
-      color: #26a2ff;
-    }
-  }
-
-  .demo-page {
-    width: 100%;
-    border: 5px solid #f5f5f5;
-    height: 580px;
-  }
-
-  .table {
-    border-collapse: collapse;
-    width: 100%;
-    background-color: #fff;
-    color: #5e6d82;
-    font-size: 14px;
-    margin-bottom: 45px;
-
-    th {
-      text-align: left;
-      border-top: 1px solid #eaeefb;
-      border-bottom: 1px solid #eaeefb;
-      background-color: #eff2f7;
-      padding: 10px;
-
-      &:first-child {
-        padding-left: 10px;
-      }
-    }
-
-    td {
-      border-bottom: 1px solid #eaeefb;
-      padding: 10px;
-    }
-  }
 </style>
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -18,16 +18,10 @@ time, mark, audio, video {
  vertical-align: baseline;
 }

-html {
-  height: 100%;
-}
-
 body {
  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-  overflow: hidden;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
-  height: 100%;
 }

 a {
@@ -42,7 +36,7 @@ button, input, select, textarea {
  color: inherit;
 }

-ul {
+ul, ol {
  list-style: none;
 }

@@ -71,3 +65,115 @@ ul {
  }
 }

+.page-content {
+  box-sizing: border-box;
+  overflow: auto;
+  margin-left: 220px;
+  padding: 0 20px;
+  border-left: 1px solid #E5E5E5;
+
+  section {
+    > h2 {
+      font-size: 36px;
+      color: #333;
+      margin: 20px 0;
+      line-height: 1.5;
+    }
+
+    > h3 {
+      font-size: 30px;
+      color: #333;
+      margin: 23px 0;
+    }
+
+    > p {
+      font-size: 14px;
+      line-height: 20px;
+      color: #666;
+      margin: 14px 0;
+    }
+
+    > ul li,
+    > ol li {
+      color: #666;
+      font-size: 14px;
+      line-height: 20px;
+      margin: 10px 0 10px 20px;
+      padding-left: 20px;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        box-sizing: border-box;
+        border: 2px solid #999;
+        border-radius: 50%;
+        top: 6px;
+        left: 0;
+      }
+
+      li {
+        margin-left: 0;
+      }
+    }
+  }
+
+  h2, h3, h4, h5 {
+    font-weight: normal;
+    color: #1f2f3d;
+
+    &:hover a {
+      opacity: .4;
+    }
+
+    a {
+      float: left;
+      margin-left: -20px;
+      opacity: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .4;
+      }
+    }
+  }
+
+  p > code,
+  .table code,
+  li > code {
+    background-color: #F2F2F2;
+    display: inline-block;
+    border: 1px solid #E5E5E5;
+    padding: 2px 4px;
+    color: #333;
+    margin: 0 3px;
+  }
+}
+
+.table {
+  border-collapse: collapse;
+  width: 100%;
+  background-color: #fff;
+  color: #333;
+  font-size: 14px;
+  margin-bottom: 45px;
+
+  th {
+    text-align: left;
+    border: 1px solid #E5E5E5;
+    background-color: #F2F2F2;
+    padding: 10px;
+
+    &:first-child {
+      padding-left: 10px;
+    }
+  }
+
+  td {
+    border: 1px solid #E5E5E5;
+    padding: 10px;
+  }
+}
+
--- a/docs/components/footer-nav.vue
+++ b/docs/components/footer-nav.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="footer-nav">
+    <a
+      href="javascript:void(0)"
+      v-if="leftNav"
+      class="footer-nav__link footer-nav__left"
+      @click="handleNavClick('prev')">
+      <zan-icon name="arrow"></zan-icon>
+      {{ leftNav.title }}
+    </a>
+    <a
+      href="javascript:void(0)"
+      v-if="rightNav"
+      class="footer-nav__link footer-nav__right"
+      @click="handleNavClick('next')">
+      <zan-icon name="arrow"></zan-icon>
+      {{ rightNav.title }}
+    </a>
+  </div>
+</template>
+
+<script>
+import navConfig from '../nav.config.json';
+
+export default {
+  data() {
+    return {
+      currentPath: null,
+      nav: [],
+      leftNav: null,
+      rightNav: null
+    };
+  },
+
+  watch: {
+    '$route.path'() {
+      this.setNav();
+      this.updateNav();
+    }
+  },
+
+  methods: {
+    setNav() {
+      let nav = navConfig['zh-CN'];
+      for (let i = 0; i < nav.length; i++) {
+        let navItem = nav[i];
+        if (!navItem.groups) {
+          this.nav.push(nav[i]);
+        } else {
+          for (let j = 0; j < navItem.groups.length; j++) {
+            this.nav = this.nav.concat(navItem.groups[j].list);
+          }
+        }
+      }
+    },
+
+    updateNav() {
+      let baseUrl = '/component';
+      let currentIndex;
+
+      this.currentPath = this.$route.path.slice(baseUrl.length);
+
+      for (let i = 0, len = this.nav.length; i < len; i++) {
+        if (this.nav[i].path === this.currentPath) {
+          currentIndex = i;
+          break;
+        }
+      }
+      this.leftNav = this.nav[currentIndex - 1];
+      this.rightNav = this.nav[currentIndex + 1];
+    },
+
+    handleNavClick(direction) {
+      this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
+    }
+  },
+
+  created() {
+    this.setNav();
+    this.updateNav();
+  }
+};
+</script>
+
+<style>
+@component-namespace footer {
+  @b nav {
+    padding: 24px 0;
+    font-size: 30px;
+    overflow: hidden;
+
+    @e link {
+      color: #3388FF;
+      overflow: hidden;
+      padding-top: 35px;
+      position: relative;
+
+      .zan-icon {
+        width: 20px;
+        display: block;
+        font-size: 12px;
+        line-height: 20px;
+        border: 2px solid #3388FF;
+        border-radius: 50%;
+        text-align: center;
+        margin-bottom: 10px;
+        position: absolute;
+        top: 0;
+      }
+    }
+
+    @e left {
+      float: left;
+
+      .zan-icon {
+        transform: rotate(180deg);
+        left: 0;
+      }
+    }
+
+    @e right {
+      float: right;
+
+      .zan-icon {
+        right: 0;
+      }
+    }
+  }
+}
+</style>
--- a/docs/components/side-nav.vue
+++ b/docs/components/side-nav.vue
@@ -43,32 +43,24 @@
 </template>

 <script>
-  export default {
-    props: {
-      data: Array,
-      base: {
-        type: String,
-        default: ''
-      }
-    },
-    data() {
-      return {
-        highlights: [],
-        navState: []
-      };
+export default {
+  props: {
+    data: Array,
+    base: {
+      type: String,
+      default: ''
    }
-  };
+  }
+};
 </script>

 <style lang="css">
  .side-nav {
-    width: 320px;
+    width: 220px;
    box-sizing: border-box;
-    padding: 40px 20px;
+    padding: 40px 0;
    float: left;
-    background: #f9fafb;
-    height: inherit;
-    overflow: auto;
+    background-color: #fff;

    li {
      list-style: none;
@@ -82,7 +74,7 @@
    .nav-item {
      a {
        font-size: 16px;
-        color: #5e6d82;
+        color: #333;
        line-height: 40px;
        height: 40px;
        margin: 0;
@@ -91,9 +83,11 @@
        display: block;
        position: relative;
        transition: all .3s;
+        padding: 0 20px;

        &.active {
-          color: #20a0ff;
+          color: #3388FF;
+          background-color: #F2F2F2;
        }
      }
      .nav-item {
@@ -101,20 +95,19 @@
          display: block;
          height: 40px;
          line-height: 40px;
-          font-size: 13px;
-          padding-left: 24px;
-
+          font-size: 14px;
+          padding-left: 44px;

          &:hover {
-            color: #20a0ff;
+            color: #3388FF;
          }
        }
      }
    }
    .nav-group__title {
      font-size: 12px;
-      color: #99a9bf;
-      padding-left: 8px;
+      color: #666;
+      padding-left: 28px;
      line-height: 26px;
      margin-top: 10px;
    }
--- a/docs/examples-docs/actionsheet.md
+++ b/docs/examples-docs/actionsheet.md
@@ -100,11 +100,11 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| actions | 行动按钮数组 | Array  | [] |    |
-| title | 标题 | String  |  |    |
-| cancelText | 取消按钮文案 | String  |  |    |
-| overlay | 是否显示遮罩 | Boolean  |  |    |
-| closeOnClickOverlay | 点击遮罩是否关闭ActionSheet | Boolean  |  |    |
+| actions | 行动按钮数组 | `Array`  | `[]` |    |
+| title | 标题 | `String`  |  |    |
+| cancelText | 取消按钮文案 | `String`  |  |    |
+| overlay | 是否显示遮罩 | `Boolean`  |  |    |
+| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean`  |  |    |

 ### actions

@@ -115,4 +115,4 @@ export default {
 | name | 标题 |
 | subname | 二级标题 |
 | className | 为对应列添加特殊的`class` |
-| loading | 是否是loading状态 |
+| loading | 是否是`loading`状态 |
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -1,4 +1,4 @@
-## Badge 组件
+## Badge

 ### 基础用法

@@ -17,13 +17,13 @@

 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
-| active-key | 激活的badge的索引 | string  | '0'但必须子badge里的mark是有0位索引 |           |
+| active-key | 激活的`badge`的索引 | `string`  | `0`但必须子badge里的mark是有`0`位索引 |           |


 ### z-badge API
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| mark | badge的唯一key值 | string  | ''          | required         |
-| title | badge的文案标题 | string  | ''          | required          |
-| info | 当前badge的提示消息数量 | string  | ''          |           |
-| url | 跳转链接 | string  | 全连接直接跳转或者hash          |           |
+| mark | badge的唯一key值 | `string`  | `''`          | `required`         |
+| title | badge的文案标题 | `string`  | `''`          | `required`          |
+| info | 当前badge的提示消息数量 | `string`  | `''`         |           |
+| url | 跳转链接 | `string`  | 全连接直接跳转或者hash          |           |
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -15,11 +15,11 @@
 }
 </style>

-## Button组件
+## Button 按钮

 ### 按钮功能

-只接受primary, default, danger三种类型，默认default。
+只接受`primary`, `default`, `danger`三种类型，默认`default`。

 :::demo 按钮功能
 ```html
@@ -51,7 +51,7 @@

 ### 按钮尺寸

-只接受large, normal, small, mini四种尺寸，默认normal。
+只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。

 :::demo 按钮尺寸
 ```html 
@@ -76,7 +76,7 @@

 ### 自定义按钮标签

-按钮默认是button标签，可以使用tag属性修改为一个a标签。
+按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。

 :::demo 自定义按钮标签
 ```html 
@@ -90,7 +90,7 @@

 ### loading按钮

-表示loading状态
+表示`loading`状态

 :::demo loading按钮
 ```html 
@@ -123,9 +123,9 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 按钮类型 | string  | 'default'          | 'primary', 'danger'   |
-| size | 按钮尺寸 | string  | 'normal'          | 'large', 'small', 'mini'  |
-| tag | 按钮标签 | string  | 'button'          | 'a', 'span', ...  |
-| diabled | 按钮是否禁用 | Boolean  |           |      |
-| block | 按钮是否显示为块级元素 | Boolean  |           |      |
+| type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
+| size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
+| tag | 按钮标签 | `string`  | `button`          | `a`, `span`, ...  |
+| diabled | 按钮是否禁用 | `boolean`  |           |      |
+| block | 按钮是否显示为块级元素 | `boolean`  |           |      |

--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -41,9 +41,9 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| thumb | 左侧图片 | string  | ''          | ''          |
-| title | 标题 | string  | ''          | ''          |
-| desc | 描述 | string  | ''          | ''          |
+| thumb | 左侧图片 | `string`  |          |          |
+| title | 标题 | `string`  |          |          |
+| desc | 描述 | `string`  |          |          |


 ### Slot
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -16,7 +16,7 @@ export default {
 };
 </script>

-## Cell 组件
+## Cell

 ### 基础用法

@@ -102,17 +102,17 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| icon | 左侧图标 | string  | ''          | ''          |
-| title | 左侧标题 | string  | ''          | ''          |
-| value | 右侧内容 | string  | ''          | ''          |
-| isLink | 是否为链接，链接会在右侧出现箭头 | boolean  | ''          | ''          |
-| url | 跳转链接 | string  | ''          | ''          |
-| label | 描述信息，显示在标题下方 | string  | ''          | ''          |
+| icon | 左侧图标 | `string`  |           |           |
+| title | 左侧标题 | `string`  |           |           |
+| value | 右侧内容 | `string`  |           |           |
+| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean`  |           |           |
+| url | 跳转链接 | `string`  |           |           |
+| label | 描述信息，显示在标题下方 | `string`  |           |           |

 ### Slot

 | name       | 描述      |
 |-----------|-----------|
 | - | 自定义显示内容 |
-| icon | 自定义icon |
-| title | 自定义title |
+| icon | 自定义`icon` |
+| title | 自定义`title` |
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -170,14 +170,14 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
-| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |
+| name | 根据这个来判断radio是否选中 | `boolean`  | `false` |   |

 ### CheckboxGroup API

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |

 ### CheckboxGroup Event

--- a/docs/examples-docs/datetime-picker.md
+++ b/docs/examples-docs/datetime-picker.md
@@ -0,0 +1,94 @@
+<script>
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date()
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      // picker.setColumnValues(1, citys[values[0]]);
+      console.log(values);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
+    }
+  }
+};
+</script>
+
+## Picker组件
+
+模仿iOS中的`UIPickerView`。
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<zan-datetime-picker 
+  type="time" 
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  @change="handlePickerChange">  
+</zan-datetime-picker>
+
+<script>
+
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date()
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>
+```
+:::
+
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| visibileColumnCount | 每一列可见备选元素的个数 | Number  | 5 |   |
+| itemHeight | 选中元素区高度 | Number  | 44 |   |
+| columns | 对象数组，配置每一列显示的数据 | Array  |  |   |
+| showToolbar | 是否在组件顶部显示一个toolbar | Boolean  | true |   |
+
+### columns
+
+`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+
+| key       | 说明      |
+|-----------|-----------|
+| values | 列中对应的备选值 |
+| defaultIndex | 初始选中值的索引，默认为0 |
+| className | 为对应列添加特殊的`class` |
+
+### change事件
+
+在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
+
+| 函数       | 说明      |
+|-----------|-----------|
+| getColumnValue(index) | 获取对应列中选中的值 |
+| setColumnValue(index, value) | 设置对应列中选中的值 |
+| getColumnValues(index) | 获取对应列中所有的备选值 |
+| setColumnValues(index, values) | 设置对应列中所有的备选值 |
+| getValues() | 获取所有列中被选中的值，返回一个数组 |
+| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -89,5 +89,5 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | String  | '' |   |
-| message | 内容 | String  | '' |   |
+| title | 标题 | `string`  |  |   |
+| message | 内容 | `string`  |  |   |
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -84,16 +84,32 @@ export default {
 ```
 :::

+
+### Autosize的输入框(仅支持textarea)
+
+传入`autosize`属性, 且将`rows`设为1。
+
+:::demo 错误的输入框
+```html
+<zan-cell-group>
+  <zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
+</zan-cell-group>
+```
+:::
+
 ### API

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 输入框类型 | string  | text | text, number, email, url, tel, date, datetime, password, textarea  |
-| placeholder | 输入框placeholder | string  | '' |   |
-| value | 输入框的值 | string  | '' |   |
-| label | 输入框标签 | string  | '' |   |
-| disabled | 是否禁用输入框 | boolean  | false |   |
-| error | 输入框是否有错误 | boolean  | false |   |
-| readonly | 输入框是否只读 | boolean  | false |   |
-| maxlength | 输入框maxlength | [String, Number]  | '' |   |
+| type | 输入框类型 | `string`  | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea`  |
+| placeholder | 输入框placeholder | `string`  |  |   |
+| value | 输入框的值 | `string`  |  |   |
+| label | 输入框标签 | `string`  |  |   |
+| disabled | 是否禁用输入框 | `boolean`  | `false` |   |
+| error | 输入框是否有错误 | `boolean`  | `false` |   |
+| readonly | 输入框是否只读 | `boolean`  | `false` |   |
+| maxlength | 输入框maxlength | `string`, `number`  |  |   |
+| rows | textarea rows | `string`, `number`   |  |   |
+| cols | textarea cols | `string`, `number`  |  |   |
+| autosize | 自动调整高度(仅支持textarea) | `boolean`  | `false` |  `true`, `false` |

--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -49,4 +49,4 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| name | icon名称 | string  | '' |   |
+| name | icon名称 | `string`  | `''` |   |
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -17,7 +17,7 @@
 }
 </style>

-## Loading
+## Loading 加载中

 ### 基础用法

@@ -43,3 +43,10 @@
 </div>
 ```
 :::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| color | `loading`颜色 | `string`  | `black`          | `black`, `white`   |
+| type | `loading`类型 | `string`  | `gradient-circle`          | `gradient-circle`, `circle`   |
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -84,9 +84,9 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | string  | ''          | ''          |
-| desc | 描述 | string  | ''          | ''          |
-| status | 状态 | string  | ''          | ''          |
+| title | 标题 | `string`  |           |           |
+| desc | 描述 | `string`  |           |           |
+| status | 状态 | `string`  |           |           |


 ### Slot
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -127,10 +127,10 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| visibileColumnCount | 每一列可见备选元素的个数 | Number  | 5 |   |
-| itemHeight | 选中元素区高度 | Number  | 44 |   |
-| columns | 对象数组，配置每一列显示的数据 | Array  |  |   |
-| showToolbar | 是否在组件顶部显示一个toolbar | Boolean  | true |   |
+| visibileColumnCount | 每一列可见备选元素的个数 | `number`  | `5` |   |
+| itemHeight | 选中元素区高度 | `number`  | `44` |   |
+| columns | 对象数组，配置每一列显示的数据 | `Array`  |  |   |
+| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean`  | `true` |   |

 ### columns

--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -145,4 +145,4 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| value | 利用`v-model`绑定当前组件是否显示 | Boolean  | '' |   |
+| value | 利用`v-model`绑定当前组件是否显示 | `boolean`  | |   |
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -10,7 +10,7 @@
 </style>


-## Switch组件
+## Progress

 ### 基础用法

@@ -64,9 +64,9 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否只会 | boolean  | false          | true, false    |
-| percentage | 进度百分比 | number  | false          | 0-100    |
-| pivotText | 文字显示 | string  | 百分比文字          | -   |
-| color | 进度条颜色 | string  | #38f    | hexvalue   |
-| textColor | 进度条文字颜色 | string  | #fff    | hexvalue   |
+| inactive | 是否只会 | `boolean`  | `false`          | `true`, `false`    |
+| percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
+| pivotText | 文字显示 | `string`  | 百分比文字          | -   |
+| color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
+| textColor | 进度条文字颜色 | `string`  | `#fff`    | hexvalue   |

--- a/docs/examples-docs/quantity.md
+++ b/docs/examples-docs/quantity.md
@@ -57,9 +57,9 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| min | 最小值 | string/number | 1          | ''          |
-| max | 最大值 | string/number  | ''          | ''          |
-| step | 步数 | string/number  | 1         | ''          |
-| disabled | 是否被禁用了 | boolean  | false      | ''          |
-| defaultValue | 默认值 | string/number  | 1      | ''          |
+| min | 最小值 | `string`, `number` | `1`         |           |
+| max | 最大值 | `string`, `number`  |           |           |
+| step | 步数 | `string`, `number`  | `1`         |           |
+| disabled | 是否被禁用了 | `boolean`  | `false`      |           |
+| defaultValue | 默认值 | `string`, `number`  | `1`      |           |

--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -119,14 +119,14 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
-| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |
+| name | 根据这个来判断radio是否选中 | `boolean`  | `false` |   |

 ### RadioGroup API

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | Boolean  | false |   |
+| disabled | 是否禁用单选框 | `boolean`  | `false` |   |

 ### RadioGroup Event

--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -31,4 +31,4 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| placeholder | input的placeholder文案 | string  |           |     |
+| placeholder | `input`的`placeholder`文案 | `string`  |           |     |
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -79,11 +79,11 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| active | 当前激活的步骤，从0开始 | Number  | ''          | ''          |
-| icon | 当前步骤的icon | string  | ''          | ''          |
-| iconClass | 当前步骤栏为icon添加的类 | string  | ''          | ''          |
-| title | 当前步骤从标题 | string  | ''          | ''          |
-| description | 当前步骤描述 | string  | ''          | ''          |
+| active | 当前激活的步骤，从0开始 | `number`  |          |          |
+| icon | 当前步骤的icon | `string`  |          |          |
+| iconClass | 当前步骤栏为icon添加的类 | `string`  |          |          |
+| title | 当前步骤从标题 | `string`  |          |          |
+| description | 当前步骤描述 | `string`  |          |          |

 ### Steps Slot

--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -89,6 +89,6 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| checked | 开关状态 | boolean  | false          | true, false    |
-| loading | loading状态 | boolean  | false          | true, false    |
-| disabled | 禁用状态 | boolean  | false          | true, false    |
+| checked | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
+| loading | loading状态 | `boolean`  | `false`          | `true`, `false`    |
+| disabled | 禁用状态 | `boolean`  | `false`          | `true`, `false`    |
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -124,14 +124,14 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选      |
 |-----------|-----------|-----------|-------------|-------------|
-| classtype | 两种UI | string  | line |     card      |
-| active | 默认激活的tab | string || number  | 0 |           |
-| navclass | tabs的内部nav上的自定义classname | string  | '' |           |
+| classtype | 两种UI | `string`  | `line` |     `line`, `card`      |
+| active | 默认激活的tab | `string`, `number`  | `0` |           |
+| navclass | tabs的内部nav上的自定义classname | `string`  |  |           |


 ### zan-tab API
-| 参数       | 说明      | 类型       | 默认值       | 必须       |
+| 参数       | 说明      | 类型       | 默认值       | 可选       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | string  | ''          | required         |
-| disable | 是否禁用这个tab | Boolean  | false      |           |
+| title | tab的标题 | `string`  |         |          |
+| disable | 是否禁用这个tab | `boolean`  | `false`      |           |

--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -52,9 +52,9 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| plain | 是否是空心tag | boolean  | false          | ''          |
-| mark | 是否是标记 | boolean  | false          | ''          |
-| type | tag类型 | string  | ''          | 'primary', 'success', 'danger' |
+| plain | 是否是空心tag | `boolean`  | `false`          |           |
+| mark | 是否是标记 | `boolean`  | `false`          |           |
+| type | tag类型 | `string`  | `''`          | `primary`, `success`, `danger` |

 ### Slot

--- a/docs/examples-docs/toast.md
+++ b/docs/examples-docs/toast.md
@@ -52,6 +52,12 @@ export default {
    },
    closeToast() {
      this.toast.clear();
+    },
+    showHtmlToast() {
+      Toast({
+        type: 'html',
+        message: '<em>HTML<em>'
+      })
    }
  }
 };
@@ -140,28 +146,55 @@ export default {
 :::


+### 传入html
+
+:::demo 手动关闭
+```html
+<zan-button @click="showHtmlToast">打开</zan-button>
+
+<script>
+import { Toast } from 'src/index';
+
+export default {
+  methods: {
+    showHtmlToast() {
+      Toast({
+        type: 'html',
+        message: '<em>HTML<em>'
+      })
+    }
+  }
+};
+</script>
+```
+:::
+

 ### 基础用法
 ### Toast(options)

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
+| type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'fail', 'html'  |
 | message | 内容 | String  | '' | - |\| message | 内容 | String  | '' | - 
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|

 ### 快速用法
-### Toast(message)
+### Toast(message) || Toast(message, options)

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | message | 内容 | String  | '' | - |
+| forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|

 ### Toast.loading() || Toast.loading(message, options)

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|

 ### Toast.success(message) || Toast.success(message, options)

@@ -169,6 +202,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|

 ### Toast.fail(message) || Toast.fail(message, options)

@@ -176,6 +210,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
+| duration | 时长(ms) | Number  | 3000ms | -|

 ### instanceOfToast.clear()
 关闭toast。
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -42,10 +42,10 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | String  | 'dataUrl'          | 'dataUrl','text'          |
-| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | boolean  | false          |           |
-| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | Function  |           |  |
-| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | Function  |           |  |
+| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string`  | `dataUrl`          | `dataUrl`, `text`         |
+| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean`  | `false`          |           |
+| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function`  |           |  |
+| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function`  |           |  |

 ### Slot

--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -76,6 +76,6 @@ export default {

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | String  | - |  |
-| waterfall-offset | 触发瀑布流加载的阈值 | Number  | 300 |   |
+| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string`  | - |  |
+| waterfall-offset | 触发瀑布流加载的阈值 | `number`  | `300` |   |

--- a/docs/index.js
+++ b/docs/index.js
@@ -5,6 +5,7 @@ import navConfig from './nav.config.json';
 import routes from './router.config';
 import SideNav from './components/side-nav';
 import DemoBlock from './components/demo-block';
+import FooterNav from './components/footer-nav';
 import ZanUI from 'src/index.js';

 import 'packages/zanui-css/src/index.css';
@@ -19,6 +20,7 @@ Vue.use(VueRouter);
 Vue.use(ZanUI);
 Vue.component('side-nav', SideNav);
 Vue.component('demo-block', DemoBlock);
+Vue.component('footer-nav', FooterNav);

 let routesConfig = routes(navConfig);
 routesConfig.push({
@@ -27,15 +29,14 @@ routesConfig.push({
 });

 const router = new VueRouter({
-  mode: 'hash',
+  mode: 'history',
  base: __dirname,
  routes: routesConfig
 });

-let indexScrollTop = 0;
 router.beforeEach((route, redirect, next) => {
  if (route.path !== '/') {
-    indexScrollTop = document.body.scrollTop;
+    window.scrollTo(0, 0);
  }
  if (isMobile()) {
    window.location.replace(location.pathname + 'examples.html#' + route.path);
@@ -45,13 +46,11 @@ router.beforeEach((route, redirect, next) => {
  next();
 });

-router.afterEach(route => {
+router.afterEach((route) => {
  if (route.path !== '/') {
-    document.body.scrollTop = 0;
-  } else {
-    Vue.nextTick(() => {
-      document.body.scrollTop = indexScrollTop;
-    });
+    const sideNavBox = document.querySelector('.side-nav');
+    const pageContentBox = document.querySelector('.page-content');
+    pageContentBox.style.height = Math.max(sideNavBox && sideNavBox.clientHeight, pageContentBox && pageContentBox.clientHeight) + 'px';
  }
 });