use zanui name

components.json

@@ -7,5 +7,6 @@
   "icon": "./packages/icon/index.js",
   "cell-group": "./packages/cell-group/index.js",
   "popup": "./packages/popup/index.js",
-  "dialog": "./packages/dialog/index.js"
+  "dialog": "./packages/dialog/index.js",
+  "picker": "./packages/picker/index.js"
 }

docs/build/0.js

@@ -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"

docs/examples/button.md

@@ -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>
 ```

docs/examples/cell.md

@@ -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>
 ```
 :::
 

docs/examples/dialog.md

@@ -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>
 ```
 :::
 

docs/examples/field.md

@@ -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>
 ```
 :::
 

docs/examples/picker.md

@@ -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`为一个数组，设置所有列中被选中的值 |

docs/examples/popup.md

@@ -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>
 ```
 :::
 

docs/examples/radio.md

@@ -14,7 +14,7 @@ export default {
 
 :::demo
 ```html
-<o2-radio v-model="radio"></o2-radio>
+<z-radio v-model="radio"></z-radio>
 ```
 :::
 

docs/examples/switch.md

@@ -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>
 ```
 

packages/button/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/o2-button",
+  "name": "@youzan/z-button",
   "version": "0.0.1",
   "description": "button component",
   "main": "./lib/index.js",

packages/button/src/button.vue

@@ -2,9 +2,9 @@
   <button
     :type="nativeType"
     :class="[
-      'o2-button',
-      'o2-button--' + type,
-      'o2-button--' + size,
+      'z-button',
+      'z-button--' + type,
+      'z-button--' + size,
       {
         'is-disabled': disabled,
         'is-loading': loading
@@ -13,14 +13,14 @@
     :disabled="disabled"
     @click="handleClick"
   >
-    <i v-if="loading" class="o2-icon-loading"></i>
-    <span class="o2-button-text"><slot></slot></span>
+    <i v-if="loading" class="z-icon-loading"></i>
+    <span class="z-button-text"><slot></slot></span>
   </button>
 </template>
 
 <script>
 /**
- * o2-header
+ * z-header
  * @module components/button
  * @desc 按钮
  * @param {string} [type=default] - 显示类型，接受 default, primary, danger
@@ -30,10 +30,10 @@
  * @param {slot} - 显示文本
  *
  * @example
- * <o2-button size="large" type="primary">按钮</o2-button>
+ * <z-button size="large" type="primary">按钮</z-button>
  */
 export default {
-  name: 'o2-button',
+  name: 'z-button',
 
   methods: {
     handleClick(e) {

packages/cell/src/cell-group.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="o2-cell-group">
+  <div class="z-cell-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'o2-cell-group'
+  name: 'z-cell-group'
 };
 </script>

packages/cell/src/cell.vue

@@ -1,15 +1,15 @@
 <template>
-  <a class="o2-cell" :href="url" @click="handleClick">
-    <div class="o2-cell-title">
+  <a class="z-cell" :href="url" @click="handleClick">
+    <div class="z-cell-title">
       <slot name="icon">
         <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
       </slot>
       <slot name="title">
-        <span class="o2-cell-text" v-text="title"></span>
-        <span class="o2-cell-label" v-if="label" v-text="label"></span>
+        <span class="z-cell-text" v-text="title"></span>
+        <span class="z-cell-label" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="o2-cell-value" :class="{ 'is-link' : isLink }">
+    <div class="z-cell-value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>
@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  name: 'o2-cell',
+  name: 'z-cell',
 
   props: {
     icon: String,

packages/dialog/src/dialog.vue

@@ -1,16 +1,16 @@
 <template>
   <transition name="dialog-bounce">
-    <div class="o2-dialog-wrapper">
-      <div class="o2-dialog" v-show="value">
-        <div class="o2-dialog-header" v-if="title">
-          <div class="o2-dialog-title" v-text="title"></div>
+    <div class="z-dialog-wrapper">
+      <div class="z-dialog" v-show="value">
+        <div class="z-dialog-header" v-if="title">
+          <div class="z-dialog-title" v-text="title"></div>
         </div>
-        <div class="o2-dialog-content" v-if="message">
-          <div class="o2-dialog-message" v-html="message"></div>
+        <div class="z-dialog-content" v-if="message">
+          <div class="z-dialog-message" v-html="message"></div>
         </div>
-        <div class="o2-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="o2-dialog-btn o2-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="o2-dialog-btn o2-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
         </div>
       </div>
     </div>
@@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';
 
 export default {
-  name: 'o2-dialog',
+  name: 'z-dialog',
 
   mixins: [Popup],
 

packages/field/package.json

@@ -1,3 +1,3 @@
 {
-  "name": "o2-field"
+  "name": "z-field"
 }

packages/field/src/field.vue

@@ -1,6 +1,6 @@
 <template>
-  <o2-cell
-    class="o2-field"
+  <z-cell
+    class="z-field"
     :title="label"
     :class="{
       'is-textarea': type === 'textarea',
@@ -8,7 +8,7 @@
     }">
     <textarea
       v-if="type === 'textarea'"
-      class="o2-field-control"
+      class="z-field-control"
       v-model="currentValue"
       @change="$emit('change', currentValue)"
       :placeholder="placeholder"
@@ -18,7 +18,7 @@
     </textarea>
     <input
       v-else
-      class="o2-field-control"
+      class="z-field-control"
       :value="currentValue"
       @change="$emit('change', currentValue)"
       @input="handleInput"
@@ -27,17 +27,17 @@
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
-  </o2-cell>
+  </z-cell>
 </template>
 
 <script>
-import O2Cell from 'packages/cell';
+import zCell from 'packages/cell';
 
 export default {
-  name: 'o2-field',
+  name: 'z-field',
 
   components: {
-    O2Cell
+    zCell
   },
 
   props: {

packages/icon/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "o2-icon",
+  "name": "z-icon",
   "version": "0.0.1",
-  "description": "o2-icon",
+  "description": "z-icon",
   "main": "index.js",
   "author": "zhangmin <zhangmin@youzan.com>",
   "devDependencies": {},

packages/icon/src/icon.vue

@@ -4,7 +4,7 @@
 
 <script>
   export default {
-    name: 'o2-icon',
+    name: 'z-icon',
 
     props: {
       name: String

packages/picker/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/picker/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/picker/index.js

@@ -0,0 +1,3 @@
+import Picker from './src/picker';
+
+export default Picker;

packages/picker/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/picker/src/picker-column.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="z-picker-column">
+    
+  </div>
+</template>
+
+<script>
+const DEFAULT_ITEM_HEIGHT = 44;
+
+export default {
+  name: 'z-picker-column',
+
+  props: {
+    /**
+     * 每一列可见备选元素的个数
+     */
+    visibileColumnCount: {
+      type: Number,
+      default: 5
+    },
+    values: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    className: {},
+    itemHeight: {
+      type: Number,
+      default: DEFAULT_ITEM_HEIGHT
+    },
+    value: {}
+  },
+
+  data() {
+    return {
+      currentValue: this.value,
+      dragging: false
+    };
+  },
+
+  watch: {
+    values(val) {
+
+    },
+
+    currentValue(val) {
+      this.$emit('change');
+    }
+  },
+
+  computed: {
+    /**
+     * picker可见备选元素总高度
+     */
+    visibleContentHeight() {
+      return this.itemHeight * this.visibileColumnCount;
+    }
+  },
+
+  methods: {
+
+  }
+};
+</script>

packages/picker/src/picker.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="z-picker">
+    <div class="z-picker-toolbar">
+      <slot>
+      </slot>
+    </div>
+    <div class="z-picker-columns">
+      <picker-column
+        v-for="(item, index) in columns"
+        v-model="values[index]"
+        :values="item.values"
+        :class-name="item.className"
+        :itemHeight="itemHeight"
+        :visible-item-count="visibleItemCount"
+        @change="columnValueChange">
+      </picker-column>
+    </div>
+  </div>
+</template>
+
+<script>
+import PickerColumn from './picker-column';
+
+const DEFAULT_ITEM_HEIGHT = 44;
+
+export default {
+  name: 'z-picker',
+
+  components: {
+    PickerColumn
+  },
+
+  props: {
+    /**
+     * 每一列可见备选元素的个数
+     */
+    visibileColumnCount: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * 选中元素区高度
+     */
+    itemHeight: {
+      type: Number,
+      default: DEFAULT_ITEM_HEIGHT
+    },
+    /**
+     * 对象数组，配置每一列显示的数据
+     */
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * 否在组件顶部显示一个toolbar
+     */
+    showToolbar: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    values() {
+      let columns = this.columns || [];
+      let values = [];
+
+      columns.forEach(column => {
+        values.push(column.value || column[column.defaultIndex || 0]);
+      });
+
+      return values;
+    }
+  },
+
+  methods: {
+    /**
+     * 处理列`change`事件
+     */
+    columnValueChange() {
+      this.$emit('change', this, this.values);
+    },
+
+    /**
+     * 获取对应索引的列的实例
+     */
+    getColumn(index) {
+      let children = this.$children.filter(child => child.$options.name === 'z-picker-column');
+      return children[index];
+    },
+
+    /**
+     * 获取对应列中选中的值
+     */
+    getColumnValue(index) {
+      let column = this.getColumn(index);
+      return column && column.value;
+    },
+
+    /**
+     * 设置对应列中选中的值
+     */
+    setColumnValue(index, value) {
+      let column = this.getColumn(index);
+      if (column) {
+        column.currentValue = value;
+      }
+    },
+
+    /**
+     * 获取对应列中所有的备选值
+     */
+    getColumnValues(index) {
+      let column = this.getColumn(index);
+    },
+
+    /**
+     * 设置对应列中所有的备选值
+     */
+    setColumnValues(index, values) {
+      let column = this.getColumn(index);
+      if (column) {
+
+      }
+    },
+
+    /**
+     * 获取所有列中被选中的值，返回一个数组
+     */
+    getValues() {
+      return this.values;
+    },
+
+    /**
+     * `values`为一个数组，设置所有列中被选中的值
+     */
+    setValues(values) {
+      values.forEach((value, index) => {
+        this.setColumnValue(index, value);
+      });
+    }
+  }
+};
+</script>

packages/popup/src/popup.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
+    <div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
       <slot></slot>
     </div>
   </transition>
@@ -10,7 +10,7 @@
 import Popup from 'src/mixins/popup';
 
 export default {
-  name: 'o2-popup',
+  name: 'z-popup',
 
   mixins: [Popup],
 

packages/radio/src/radio-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="o2-radio-group">
+  <div class="z-radio-group">
     <slot></slot>
   </div>
 </template>

packages/radio/src/radio.vue

@@ -1,20 +1,20 @@
 <template>
-  <o2-cell
-    class="o2-radio"
+  <z-cell
+    class="z-radio"
     :class="{
       'is-disabled': disabled
     }">
-  </o2-cell>
+  </z-cell>
 </template>
 
 <script>
-import O2Cell from 'packages/cell';
+import zCell from 'packages/cell';
 
 export default {
-  name: 'o2-radio',
+  name: 'z-radio',
 
   components: {
-    O2Cell
+    zCell
   },
 
   props: {

packages/switch/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/o2-switch",
+  "name": "@youzan/z-switch",
   "version": "0.0.1",
   "description": "switch component",
   "main": "./lib/index.js",

packages/switch/src/switch.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
-    <div class="o2-switch-node"></div>
+  <div class="z-switch" :class="['is-' + switchState]" @click="toggleState">
+    <div class="z-switch-node"></div>
   </div>
 </template>
 
 <script>
 /**
- * o2-switch
+ * z-switch
  * @module components/switch
  * @desc 开关
  * @param {boolean} [checked=false] - 开关状态
@@ -15,10 +15,10 @@
  * @param {callback} [onChange] - 开关状态改变回调函数。
  *
  * @example
- * <o2-switch checked="true" disabled="false"></o2-switch>
+ * <z-switch checked="true" disabled="false"></z-switch>
  */
 export default {
-  name: 'o2-switch',
+  name: 'z-switch',
   props: {
     checked: {
       type: Boolean,

packages/zanui/src/button.pcss

@@ -1,6 +1,6 @@
 @import "./common/var.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component button {
     position: relative;
     display: block;

packages/zanui/src/cell.pcss

@@ -1,7 +1,7 @@
 @import "./common/var.pcss";
 @import "./mixins/border_retina.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component cell-group {
     padding-left: 10px;
     position: relative;

packages/zanui/src/dialog.pcss

@@ -1,6 +1,6 @@
 @import "./mixins/border_retina.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component dialog-wrapper {
     position: absolute;
   }
@@ -53,11 +53,11 @@
     }
 
     .is-twobtn {
-      .o2-dialog-btn {
+      .z-dialog-btn {
         width: 50%;
       }
 
-      .o2-dialog-cancel {
+      .z-dialog-cancel {
         &::after {
           @mixin border-retina (right);
         }

packages/zanui/src/field.pcss

@@ -1,42 +1,42 @@
 @import "./common/var.pcss";
 @import "./mixins/border_retina.pcss";
 
-@component-namespace o2 {
+@component-namespace z {
   @component field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .o2-field-control {
+      .z-field-control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .o2-cell-title {
+      .z-cell-title {
         display: none;
       }
 
-      .o2-cell-value {
+      .z-cell-value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .o2-cell-title,
-    .o2-cell-value {
+    .z-cell-title,
+    .z-cell-value {
       float: none;
       box-sizing: border-box;
     }
 
-    .o2-cell-title {
+    .z-cell-title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .o2-cell-value {
+    .z-cell-value {
       width: 100%;
       padding-left: 90px;
     }

packages/zanui/src/popup.pcss

@@ -7,7 +7,7 @@
   background-color: rgba(0, 0, 0, 0.701961);
 }
 
-@component-namespace o2 {
+@component-namespace z {
   @component popup {
     position: fixed;
     background-color: #fff;

packages/zanui/src/switch.pcss

@@ -1,4 +1,4 @@
-@component-namespace o2 {
+@component-namespace z {
   @component switch { 
     height: 29px;
     width: 49px;

src/index.js

@@ -7,6 +7,7 @@ import Icon from '../packages/icon/index.js';
 import CellGroup from '../packages/cell-group/index.js';
 import Popup from '../packages/popup/index.js';
 import Dialog from '../packages/dialog/index.js';
+import Picker from '../packages/picker/index.js';
 // zanui
 import '../packages/zanui/src/index.pcss';
 
@@ -21,7 +22,7 @@ const install = function(Vue) {
   Vue.component(Icon.name, Icon);
   Vue.component(CellGroup.name, CellGroup);
   Vue.component(Popup.name, Popup);
-  // Vue.component(Dialog.name, Dialog);
+  Vue.component(Picker.name, Picker);
 };
 
 // auto install
@@ -40,5 +41,6 @@ module.exports = {
   Icon,
   CellGroup,
   Popup,
-  Dialog
+  Dialog,
+  Picker
 };