use zanui name

2017-02-17 16:04:37 +08:00
parent 3bed02995d
commit c786235977
40 changed files with 833 additions and 536 deletions
@@ -394,60 +394,60 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "page-title"
  }, [_vm._v("Button")]), _vm._v(" "), _c('div', {
    staticClass: "page-button-group"
-  }, [_c('o2-button', {
+  }, [_c('z-button', {
    attrs: {
      "size": "large"
    }
-  }, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "size": "large",
      "type": "primary"
    }
-  }, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "size": "large",
      "type": "danger"
    }
  }, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
    staticClass: "page-button-group"
-  }, [_c('o2-button', [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
+  }, [_c('z-button', [_vm._v("default")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "type": "primary"
    }
-  }, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "type": "danger"
    }
  }, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
    staticClass: "page-button-group"
-  }, [_c('o2-button', {
+  }, [_c('z-button', {
    attrs: {
      "size": "small"
    }
-  }, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "size": "small",
      "type": "primary"
    }
-  }, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "size": "small",
      "type": "danger"
    }
  }, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
    staticClass: "page-button-group"
-  }, [_c('o2-button', {
+  }, [_c('z-button', {
    attrs: {
      "disabled": "",
      "size": "large"
    }
-  }, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
    attrs: {
      "disabled": "",
      "size": "large",
      "type": "primary"
    }
-  }, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
+  }, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
    staticClass: "aaa",
    attrs: {
      "disabled": "",
@@ -491,7 +491,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("size")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -499,11 +499,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("size")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -515,11 +515,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("size")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -531,7 +531,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
@@ -547,15 +547,15 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("default"), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("default"), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("type")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -563,11 +563,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("type")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -575,7 +575,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
@@ -591,7 +591,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("size")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -599,11 +599,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("size")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -615,11 +615,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("size")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -631,7 +631,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
@@ -647,7 +647,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
@@ -657,11 +657,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
@@ -675,11 +675,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n    "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
@@ -697,7 +697,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
+  }, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
@@ -763,13 +763,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "page-switch"
  }, [_c('span', {
    staticClass: "page-switch-text"
-  }, [_vm._v("Switch state: " + _vm._s(_vm.switchStateText))]), _vm._v(" "), _c('o2-switch', {
+  }, [_vm._v("Switch state: " + _vm._s(_vm.switchStateText))]), _vm._v(" "), _c('z-switch', {
    staticClass: "page-switch-sample",
    attrs: {
      "checked": _vm.switchState,
      "onchange": _vm.updateState
    }
-  }), _vm._v(" "), _c('o2-switch', {
+  }), _vm._v(" "), _c('z-switch', {
    staticClass: "page-switch-sample",
    attrs: {
      "checked": false,
@@ -804,7 +804,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-switch")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-switch")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("class")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -820,11 +820,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-switch")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
+  }, [_vm._v("z-switch")]), _vm._v(">")]), _vm._v("\n  "), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("<"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-switch")]), _vm._v(" "), _c('span', {
+  }, [_vm._v("z-switch")]), _vm._v(" "), _c('span', {
    staticClass: "hljs-attr"
  }, [_vm._v("class")]), _vm._v("="), _c('span', {
    staticClass: "hljs-string"
@@ -840,7 +840,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
-  }, [_vm._v("o2-switch")]), _vm._v(">")]), _vm._v("\n"), _c('span', {
+  }, [_vm._v("z-switch")]), _vm._v(">")]), _vm._v("\n"), _c('span', {
    staticClass: "hljs-tag"
  }, [_vm._v("</"), _c('span', {
    staticClass: "hljs-name"
@@ -23,27 +23,27 @@
 <div class="page-button">
  <h1 class="page-title">Button</h1>
  <div class="page-button-group">
-    <o2-button size="large">default</o2-button>
-    <o2-button size="large" type="primary">primary</o2-button>
-    <o2-button size="large" type="danger">danger</o2-button>
+    <z-button size="large">default</z-button>
+    <z-button size="large" type="primary">primary</z-button>
+    <z-button size="large" type="danger">danger</z-button>
  </div>

  <div class="page-button-group">
-    <o2-button>default</o2-button>
-    <o2-button type="primary">primary</o2-button>
-    <o2-button type="danger">danger</o2-button>
+    <z-button>default</z-button>
+    <z-button type="primary">primary</z-button>
+    <z-button type="danger">danger</z-button>
  </div>

  <div class="page-button-group">
-    <o2-button size="small">default</o2-button>
-    <o2-button size="small" type="primary">primary</o2-button>
-    <o2-button size="small" type="danger">danger</o2-button>
+    <z-button size="small">default</z-button>
+    <z-button size="small" type="primary">primary</z-button>
+    <z-button size="small" type="danger">danger</z-button>
  </div>

  <div class="page-button-group">
-    <o2-button disabled size="large">default</o2-button>
-    <o2-button disabled size="large" type="primary">primary</o2-button>
-    <o2-button disabled size="large" type="danger" class="aaa">danger</o2-button>
+    <z-button disabled size="large">default</z-button>
+    <z-button disabled size="large" type="primary">primary</z-button>
+    <z-button disabled size="large" type="danger" class="aaa">danger</z-button>
  </div>
 </div>
 ```
@@ -22,10 +22,10 @@ export default {

 :::demo 样例代码
 ```html
-<o2-cell-group>
-  <o2-cell title="单元格1" value="单元格1内容"></o2-cell>
-  <o2-cell title="单元格2" value="单元格2内容"></o2-cell>
-</o2-cell-group>
+<z-cell-group>
+  <z-cell title="单元格1" value="单元格1内容"></z-cell>
+  <z-cell title="单元格2" value="单元格2内容"></z-cell>
+</z-cell-group>
 ```
 :::

@@ -33,10 +33,10 @@ export default {

 :::demo 传入`label`属性，属性值为描述信息的值。
 ```html
-<o2-cell-group>
-  <o2-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></o2-cell>
-  <o2-cell title="单元格2" label="描述信息"></o2-cell>
-</o2-cell-group>
+<z-cell-group>
+  <z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
+  <z-cell title="单元格2" label="描述信息"></z-cell>
+</z-cell-group>
 ```
 :::

@@ -44,10 +44,10 @@ export default {

 :::demo 传入`icon`属性
 ```html
-<o2-cell-group>
-  <o2-cell title="起码运动馆" icon="home"></o2-cell>
-  <o2-cell title="线下门店" icon="location"></o2-cell>
-</o2-cell-group>
+<z-cell-group>
+  <z-cell title="起码运动馆" icon="home"></z-cell>
+  <z-cell title="线下门店" icon="location"></z-cell>
+</z-cell-group>
 ```
 :::

@@ -55,10 +55,10 @@ export default {

 :::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
 ```html
-<o2-cell-group>
-  <o2-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></o2-cell>
-  <o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
-</o2-cell-group>
+<z-cell-group>
+  <z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
+  <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
+</z-cell-group>
 ```
 :::

@@ -68,15 +68,15 @@ export default {

 :::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 ```html
-<o2-cell-group>
-  <o2-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+<z-cell-group>
+  <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
    <template slot="title">
-      <span class="o2-cell-text">起码运动馆</span>
+      <span class="z-cell-text">起码运动馆</span>
      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
    </template>
-  </o2-cell>
-  <o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
-</o2-cell-group>
+  </z-cell>
+  <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
+</z-cell-group>
 ```
 :::

@@ -32,9 +32,9 @@ export default {

 :::demo
 ```html
-<o2-button @click="handleAlertClick">alert</o2-button>
+<z-button @click="handleAlertClick">alert</z-button>

-<o2-button @click="handleConfirmClick">confirm</o2-button>
+<z-button @click="handleConfirmClick">confirm</z-button>
 ```
 :::

@@ -22,11 +22,11 @@ export default {

 :::demo 根据`type`属性显示不同的输入框。
 ```html
-<o2-cell-group>
-  <o2-field type="text" label="用户名：" placeholder="请输入用户名"></o2-field>
-  <o2-field type="password" label="密码：" placeholder="请输入密码"></o2-field>
-  <o2-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></o2-field>
-</o2-cell-group>
+<z-cell-group>
+  <z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
+  <z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
+  <z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
+</z-cell-group>
 ```
 :::

@@ -34,9 +34,9 @@ export default {

 :::demo 不传入`label`属性即可。
 ```html
-<o2-cell-group>
-  <o2-field type="text" placeholder="请输入用户名"></o2-field>
-</o2-cell-group>
+<z-cell-group>
+  <z-field type="text" placeholder="请输入用户名"></z-field>
+</z-cell-group>
 ```
 :::

@@ -44,9 +44,9 @@ export default {

 :::demo 监听组件的`change`事件。
 ```html
-<o2-cell-group>
-  <o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>
-</o2-cell-group>
+<z-cell-group>
+  <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
+</z-cell-group>
 ```
 :::

@@ -0,0 +1,35 @@
+## Picker组件
+
+模仿iOS中的`UIPickerView`。
+
+### 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`为一个数组，设置所有列中被选中的值 |
@@ -22,12 +22,12 @@ export default {
 </script>

 <style>
-.o2-popup-1 {
+.z-popup-1 {
  width: 100%;
  height: 200px;
 }

-.o2-popup-2 {
+.z-popup-2 {
  width: 100%;
  line-height: 44px;
  background-color: rgba(0, 0, 0, 0.701961);
@@ -35,13 +35,13 @@ export default {
  color: #fff;
 }

-.o2-popup-3 {
+.z-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
 }

-.o2-popup-4 {
+.z-popup-4 {
  width: 50%;
  height: 200px;
  background: #fff;
@@ -55,25 +55,25 @@ export default {

 :::demo
 ```html
-<o2-button @click="popupShow1 = true">从下方弹出popup</o2-button>
-<o2-popup v-model="popupShow1" position="bottom" class="o2-popup-1">
+<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
+<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
  xxxx
-</o2-popup>
+</z-popup>

-<o2-button @click="popupShow2 = true">从上方方弹出popup</o2-button>
-<o2-popup v-model="popupShow2" position="top" class="o2-popup-2" :overlay="false">
+<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
+<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
  更新成功
-</o2-popup>
+</z-popup>

-<o2-button @click="popupShow3 = true">从右方弹出popup</o2-button>
-<o2-popup v-model="popupShow3" position="right" class="o2-popup-3" :overlay="false">
-  <o2-button @click.native="popupShow3 = false">关闭 popup</o2-button>
-</o2-popup>
+<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
+<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
+  <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
+</z-popup>

-<o2-button @click="popupShow4 = true">从中间弹出popup</o2-button>
-<o2-popup v-model="popupShow4" transition="popup-fade" class="o2-popup-4">
+<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
+<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
  一些内容
-</o2-popup>
+</z-popup>
 ```
 :::

@@ -14,7 +14,7 @@ export default {

 :::demo
 ```html
-<o2-radio v-model="radio"></o2-radio>
+<z-radio v-model="radio"></z-radio>
 ```
 :::

@@ -45,8 +45,8 @@ export default {
 ```html
 <div class="page-switch">
  <span class="page-switch-text">Switch state: {{switchStateText}}</span>
-  <o2-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></o2-switch>
-  <o2-switch class="page-switch-sample" :checked="false" :disabled="true"></o2-switch>
+  <z-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></z-switch>
+  <z-switch class="page-switch-sample" :checked="false" :disabled="true"></z-switch>
 </div>
 ```