Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen

2025-04-06 03:57:59 +08:00 · 2017-02-22 10:16:14 +08:00 · 2017-02-22 10:16:14 +08:00 · 0d3a0f1a88
commit 0d3a0f1a88
parent 89ecad5989 8782fe99cb
72 changed files with 2590 additions and 611 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,3 +1,4 @@
 lib/
 dist/
 node_modules/
+build/**/*.js
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@ -9,7 +9,7 @@ var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\'
 var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
 var MAIN_TEMPLATE = `{{include}}
 // zanui
-import '../packages/zanui/src/index.pcss';
+import '../packages/zanui-css/src/index.pcss';

 const install = function(Vue) {
  if (install.installed) return;
@ -51,7 +51,7 @@ ComponentNames.forEach(name => {
    'Lazyload',

      // services
-    'MessageBox',
+    'Dialog',
    'Toast',
    'Indicator'
  ].indexOf(componentName) === -1) {
--- a/build/utils/postcss_pipe.js
+++ b/build/utils/postcss_pipe.js
@ -4,8 +4,8 @@
 var config = {

    "bem": {
-        "shortcuts": {"component": "c", "modifier": "m", "descendent": "d"},
-        "separators": {"descendent": "-", "modifier": "--"}
+        "shortcuts": {"component": "b", "modifier": "m", "descendent": "e"},
+        "separators": {"descendent": "__", "modifier": "--"}
    }/*,
    "autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
    "rem": {"browsers": ["ie > 8", "last 2 versions"]}*/
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@ -109,7 +109,7 @@ if (process.env.NODE_ENV === 'production') {
        postcss: getPoastcssPlugin,
        babel: {
          presets: ['es2015'],
-          plugins: ['transform-runtime']
+          plugins: ['transform-runtime', 'transform-vue-jsx']
        },
        eslint: {
          formatter: require('eslint-friendly-formatter')
--- a/components.json
+++ b/components.json
@ -5,5 +5,9 @@
  "radio": "./packages/radio/index.js",
  "cell": "./packages/cell/index.js",
  "icon": "./packages/icon/index.js",
-  "cell-group": "./packages/cell-group/index.js"
+  "cell-group": "./packages/cell-group/index.js",
+  "popup": "./packages/popup/index.js",
+  "dialog": "./packages/dialog/index.js",
+  "picker": "./packages/picker/index.js",
+  "radio-group": "./packages/radio-group/index.js"
 }
--- a/docs/build/0.js
+++ b/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"
--- a/docs/build/0.js.map
+++ b/docs/build/0.js.map
--- a/docs/build/build-docs.js
+++ b/docs/build/build-docs.js
--- a/docs/build/build-docs.js.map
+++ b/docs/build/build-docs.js.map
--- a/docs/examples/button.md
+++ b/docs/examples/button.md
@ -1,14 +1,8 @@
 <style lang="css">
-  @component-namespace page {
-    @component button {
-      padding: 0 15px 15px;
-
-      @descendent group {
+  @component-namespace z {
+    @component button-group {
+      .z-button-1-1 {
        margin-bottom: 15px;
-
-        & > * {
-          margin-bottom: 15px;
-        }
      }
    }
  }
@ -16,34 +10,67 @@

 ## Button组件

-### 基础用法
+### 按钮功能

-:::demo 样例代码
+:::demo 只接受primary, default, danger三种类型，默认default
 ```html
-<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>
+<div class="z-button-group">
+  <div class="z-button-1-1">
+    <z-button>default</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>
+  <div class="z-button-1-1">
+    <z-button type="primary">primary</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>
+  <div class="z-button-1-1">
+    <z-button type="danger">danger</z-button>
  </div>
+</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>
+### 禁用状态
+
+:::demo 
+```html
+<div class="z-button-group">
+  <div class="z-button-1-1">
+    <z-button disabled>diabled</z-button>
+  </div>
+</div>
+```
+:::
+
+### 按钮尺寸
+
+:::demo 只接受large, normal, small, mini四种尺寸，默认normal
+```html 
+<div class="z-button-group">
+  <div class="z-button-1-1">
+    <z-button size="large">large</z-button>
+  </div>
+</div>
+<div class="z-button-group" :style="{ width: '50%' }">
+  <div class="z-button-3-1">
+    <z-button type="primary">normal</z-button>
+  </div>
+  <div class="z-button-3-1">
+    <z-button size="small">small</z-button>
+  </div>
+  <div class="z-button-3-1">
+    <z-button size="mini">mini</z-button>
+  </div>
+</div>
+
+```
+:::
+
+### 自定义按钮标签
+
+:::demo 有时按钮需要是一个a标签
+```html 
+<div class="z-button-group">
+  <div class="z-button-1-1">
+    <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
  </div>
 </div>
 ```
@ -54,4 +81,9 @@

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| className | 自定义额外类名 | string  | ''          | ''          |
+| type | 按钮类型 | string  | 'default'          | 'primary', 'danger'   |
+| size | 按钮尺寸 | string  | 'normal'          | 'large', 'small', 'mini'  |
+| tag | 按钮标签 | string  | 'button'          | 'a', 'span', ...  |
+| diabled | 按钮是否禁用 | Boolean  |           |      |
+| block | 按钮是否显示为块级元素 | Boolean  |           |      |
+
--- a/docs/examples/cell.md
+++ b/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>
 ```
 :::

--- a/docs/examples/dialog.md
+++ b/docs/examples/dialog.md
@ -0,0 +1,46 @@
+<script>
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
+
+## Dialog组件
+
+### 基础用法
+
+:::demo
+```html
+<z-button @click="handleAlertClick">alert</z-button>
+
+<z-button @click="handleConfirmClick">confirm</z-button>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | String  | '' |   |
+| message | 内容 | String  | '' |   |
--- a/docs/examples/field.md
+++ b/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>
 ```
 :::

--- a/docs/examples/picker.md
+++ b/docs/examples/picker.md
@ -0,0 +1,74 @@
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>
+
+## Picker组件
+
+模仿iOS中的`UIPickerView`。
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
+```
+:::
+
+### 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/popup.md
+++ b/docs/examples/popup.md
@ -0,0 +1,84 @@
+<script>
+export default {
+  data() {
+    return {
+      popupShow1: false,
+      popupShow2: false,
+      popupShow3: false,
+      popupShow4: false
+    }
+  },
+
+  watch: {
+    popupShow2(val) {
+      if (val) {
+        setTimeout(() => {
+          this.popupShow2 = false;
+        }, 2000);
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.z-popup-1 {
+  width: 100%;
+  height: 200px;
+}
+
+.z-popup-2 {
+  width: 100%;
+  line-height: 44px;
+  background-color: rgba(0, 0, 0, 0.701961);
+  text-align: center;
+  color: #fff;
+}
+
+.z-popup-3 {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.z-popup-4 {
+  width: 50%;
+  height: 200px;
+  background: #fff;
+  border-radius: 10px;
+}
+</style>
+
+## Popup组件
+
+### 基础用法
+
+:::demo
+```html
+<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
+<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
+  xxxx
+</z-popup>
+
+<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
+<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
+  更新成功
+</z-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>
+
+<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
+<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
+  一些内容
+</z-popup>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| value | 利用`v-model`绑定当前组件是否显示 | Boolean  | '' |   |
--- a/docs/examples/radio.md
+++ b/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>
 ```
 :::

--- a/docs/nav.config.json
+++ b/docs/nav.config.json
@ -77,8 +77,12 @@
              "title": "Lazyload"
            },
            {
-              "path": "/pop",
-              "title": "Pop"
+              "path": "/popup",
+              "title": "Popup"
+            },
+            {
+              "path": "/dialog",
+              "title": "Dialog"
            },
            {
              "path": "/swipe",
--- a/package.json
+++ b/package.json
@ -40,9 +40,10 @@
    "babel-cli": "^6.14.0",
    "babel-core": "^6.17.0",
    "babel-eslint": "^6.1.2",
+    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-module-resolver": "^2.2.0",
-    "babel-plugin-syntax-jsx": "^6.8.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-plugin-transform-vue-jsx": "^3.3.0",
    "babel-preset-es2015": "^6.16.0",
@ -97,7 +98,6 @@
    "rimraf": "^2.5.4",
    "run-sequence": "^1.2.2",
    "saladcss-bem": "^0.0.1",
-    "sass-loader": "^3.2.3",
    "style-loader": "^0.13.1",
    "theaterjs": "^3.0.0",
    "transliteration": "^1.1.11",
@ -118,4 +118,4 @@
    "webpack-node-externals": "^1.5.4",
    "webpack-vendor-chunk-plugin": "^1.0.0"
  }
-}
+}
--- a/packages/button/package.json
+++ b/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",
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@ -0,0 +1,71 @@
+/**
+ * @module components/button
+ * @desc 按钮
+ * @param {string} [type=default] - 显示类型，接受 default, primary, danger
+ * @param {boolean} [disabled=false] - 禁用
+ * @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
+ * @param {string} [native-type] - 原生 type 属性
+ * @param {slot} - 显示文本
+ *
+ * @example
+ * <z-button size="large" type="primary">按钮</z-button>
+ */
+
+const allowedSize = ['mini', 'small', 'normal', 'large'];
+const allowedType = ['default', 'danger', 'primary'];
+
+export default {
+  name: 'z-button',
+
+  props: {
+    disabled: Boolean,
+    loading: Boolean,
+    block: Boolean,
+    tag: {
+      type: String,
+      default: 'button'
+    },
+    nativeType: String,
+    type: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return allowedType.indexOf(value) > -1;
+      }
+    },
+    size: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        return allowedSize.indexOf(value) > -1;
+      }
+    }
+  },
+
+  render(h) {
+    let { type, nativeType, size, disabled, loading, block } = this;
+    let Tag = this.tag;
+
+    return (
+      <Tag
+        type={nativeType}
+        disabled={disabled}
+        class={[
+          'z-button',
+          'z-button--' + type,
+          'z-button--' + size,
+          {
+            'is-disabled': disabled,
+            'is-loading': loading,
+            'is-block': block
+          }
+        ]}
+      >
+        {
+          loading ? <i class="z-icon-loading"></i> : null
+        }
+        <span class="z-button-text">{this.$slots.default}</span>
+      </Tag>
+    );
+  }
+};
--- a/packages/button/src/button.vue
+++ b/packages/button/src/button.vue
@ -1,73 +0,0 @@
-<template>
-  <button
-    :type="nativeType"
-    :class="[
-      'o2-button',
-      'o2-button--' + type,
-      'o2-button--' + size,
-      {
-        'is-disabled': disabled,
-        'is-loading': loading
-      }
-    ]"
-    :disabled="disabled"
-    @click="handleClick"
-  >
-    <i v-if="loading" class="o2-icon-loading"></i>
-    <span class="o2-button-text"><slot></slot></span>
-  </button>
-</template>
-
-<script>
-/**
- * o2-header
- * @module components/button
- * @desc 按钮
- * @param {string} [type=default] - 显示类型，接受 default, primary, danger
- * @param {boolean} [disabled=false] - 禁用
- * @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
- * @param {string} [native-type] - 原生 type 属性
- * @param {slot} - 显示文本
- *
- * @example
- * <o2-button size="large" type="primary">按钮</o2-button>
- */
-export default {
-  name: 'o2-button',
-
-  methods: {
-    handleClick(e) {
-      this.$emit('click', e);
-    }
-  },
-
-  props: {
-    disabled: Boolean,
-    loading: Boolean,
-    nativeType: String,
-    type: {
-      type: String,
-      default: 'default',
-      validator(value) {
-        return [
-          'default',
-          'danger',
-          'primary'
-        ].indexOf(value) > -1;
-      }
-    },
-    size: {
-      type: String,
-      default: 'normal',
-      validator(value) {
-        return [
-          'mini',
-          'small',
-          'normal',
-          'large'
-        ].indexOf(value) > -1;
-      }
-    }
-  }
-};
-</script>
--- a/packages/cell/src/cell-group.vue
+++ b/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>
--- a/packages/cell/src/cell.vue
+++ b/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,
--- a/packages/dialog/CHANGELOG.md
+++ b/packages/dialog/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/dialog/README.md
+++ b/packages/dialog/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)
--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@ -0,0 +1,3 @@
+import Dialog from './src/dialog.js';
+
+export default Dialog;
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/dialog/src/dialog.js
+++ b/packages/dialog/src/dialog.js
@ -0,0 +1,98 @@
+import Vue from 'vue';
+import Dialog from './dialog.vue';
+import merge from 'src/utils/merge';
+
+const DialogConstructor = Vue.extend(Dialog);
+
+let currentDialog;
+let instance;
+let dialogQueue = [];
+
+const defaultCallback = action => {
+  if (currentDialog) {
+    let callback = currentDialog.callback;
+
+    if (typeof callback === 'function') {
+      callback(action);
+    }
+
+    if (currentDialog.resolve && action === 'confirm') {
+      currentDialog.resolve(action);
+    } else if (currentDialog.reject && action === 'cancel') {
+      currentDialog.reject(action);
+    }
+  }
+};
+
+const initInstance = () => {
+  instance = new DialogConstructor({
+    el: document.createElement('div')
+  });
+
+  instance.callback = defaultCallback;
+};
+
+const showNextDialog = () => {
+  if (!instance) {
+    initInstance();
+  }
+
+  if (!instance.value && dialogQueue.length > 0) {
+    currentDialog = dialogQueue.shift();
+
+    let options = currentDialog.options;
+
+    for (let prop in options) {
+      if (options.hasOwnProperty(prop)) {
+        instance[prop] = options[prop];
+      }
+    }
+
+    if (options.callback === undefined) {
+      instance.callback = defaultCallback;
+    }
+
+    document.body.appendChild(instance.$el);
+
+    Vue.nextTick(() => {
+      instance.value = true;
+    });
+  }
+};
+
+var DialogBox = options => {
+  return new Promise((resolve, reject) => { // eslint-disable-line
+    dialogQueue.push({
+      options: merge({}, options),
+      callback: options.callback,
+      resolve: resolve,
+      reject: reject
+    });
+
+    showNextDialog();
+  });
+};
+
+DialogBox.alert = function(options) {
+  return DialogBox(merge({
+    type: 'alert',
+    closeOnClickOverlay: false,
+    showCancelButton: false
+  }, options));
+};
+
+DialogBox.confirm = function(options) {
+  return DialogBox(merge({
+    type: 'confirm',
+    closeOnClickOverlay: true,
+    showCancelButton: true
+  }, options));
+};
+
+DialogBox.close = function() {
+  instance.value = false;
+  dialogQueue = [];
+  currentDialog = null;
+};
+
+export default DialogBox;
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@ -0,0 +1,85 @@
+<template>
+  <transition name="dialog-bounce">
+    <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="z-dialog-content" v-if="message">
+          <div class="z-dialog-message" v-html="message"></div>
+        </div>
+        <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>
+  </transition>
+</template>
+
+<script>
+import Popup from 'packages/popup';
+
+const CANCEL_TEXT = '取消';
+const CONFIRM_TEXT = '确认';
+
+export default {
+  name: 'z-dialog',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+    closeOnClickOverlay: {
+      default: true
+    },
+    lockOnScroll: {
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      title: '',
+      message: '',
+      type: '',
+      showConfirmButton: true,
+      showCancelButton: false,
+      confirmButtonText: CONFIRM_TEXT,
+      cancelButtonText: CANCEL_TEXT,
+      callback: null
+    };
+  },
+
+  methods: {
+    handleAction(action) {
+      this.value = false;
+      this.callback && this.callback(action);
+    },
+
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.value = false;
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+            document.body.style.paddingRight = this.bodyPaddingRight;
+          }
+          this.bodyOverflow = null;
+          this.bodyPaddingRight = null;
+        }, 200);
+      }
+
+      this.opened = false;
+      this.doAfterClose();
+    }
+  }
+};
+</script>
--- a/packages/field/package.json
+++ b/packages/field/package.json
@ -1,3 +1,3 @@
 {
-  "name": "o2-field"
+  "name": "z-field"
 }
--- a/packages/field/src/field.vue
+++ b/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: {
--- a/packages/icon/package.json
+++ b/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": {},
--- a/packages/icon/src/icon.vue
+++ b/packages/icon/src/icon.vue
@ -4,7 +4,7 @@

 <script>
  export default {
-    name: 'o2-icon',
+    name: 'z-icon',

    props: {
      name: String
--- a/packages/picker/CHANGELOG.md
+++ b/packages/picker/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/picker/README.md
+++ b/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)
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@ -0,0 +1,3 @@
+import Picker from './src/picker';
+
+export default Picker;
--- a/packages/picker/package.json
+++ b/packages/picker/package.json
@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/picker/src/draggable.js
+++ b/packages/picker/src/draggable.js
@ -0,0 +1,51 @@
+import Vue from 'vue';
+
+let isDragging = false;
+
+const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+
+export default function(element, options) {
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  const endFn = function(event) {
+    if (!supportTouch) {
+      document.removeEventListener('mousemove', moveFn);
+      document.removeEventListener('mouseup', endFn);
+    }
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
+    if (isDragging) return;
+    document.onselectstart = function() { return false; };
+    document.ondragstart = function() { return false; };
+
+    if (!supportTouch) {
+      document.addEventListener('mousemove', moveFn);
+      document.addEventListener('mouseup', endFn);
+    }
+    isDragging = true;
+
+    if (options.start) {
+      event.preventDefault();
+      options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  });
+
+  if (supportTouch) {
+    element.addEventListener('touchmove', moveFn);
+    element.addEventListener('touchend', endFn);
+    element.addEventListener('touchcancel', endFn);
+  }
+};
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@ -0,0 +1,239 @@
+<template>
+  <div class="z-picker-column" :class="classNames">
+    <div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
+      <div
+        v-for="item in currentValues"
+        class="z-picker-column__item"
+        :class="{ 'z-picker-column__item--selected': item === currentValue }"
+        :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
+        {{item}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import translateUtil from 'src/utils/transition';
+import draggable from './draggable';
+
+const DEFAULT_ITEM_HEIGHT = 44;
+
+export default {
+  name: 'z-picker-column',
+
+  props: {
+    /**
+     * 每一列可见备选元素的个数
+     */
+    visibileColumnCount: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * 该列所有的可选值
+     */
+    values: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * 每列添加额外的`className`
+     */
+    className: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 行高
+     */
+    itemHeight: {
+      type: Number,
+      default: DEFAULT_ITEM_HEIGHT
+    },
+    value: {}
+  },
+
+  data() {
+    return {
+      currentValue: this.value,
+      currentValues: this.values,
+      isDragging: false
+    };
+  },
+
+  watch: {
+    values(val) {
+      this.currentValues = val;
+    },
+
+    currentValues(val) {
+      if (this.valueIndex === -1) {
+        this.currentValue = (val || [])[0];
+      }
+    },
+
+    currentValue(val) {
+      this.doOnValueChange();
+
+      this.$emit('change', this);
+    }
+  },
+
+  computed: {
+    /**
+     * picker可见备选元素总高度
+     */
+    visibleContentHeight() {
+      return this.itemHeight * this.visibileColumnCount;
+    },
+
+    /**
+     * 当前选中值在`values`中的索引
+     */
+    valueIndex() {
+      return this.currentValues.indexOf(this.currentValue);
+    },
+
+    /**
+     * 计算picker的拖动范围
+     */
+    dragRange() {
+      var values = this.currentValues;
+      var visibileColumnCount = this.visibileColumnCount;
+      var itemHeight = this.itemHeight;
+
+      return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
+    },
+
+    /**
+     * 计算`classNames`
+     */
+    classNames() {
+      return this.className.split(' ');
+    }
+  },
+
+  mounted() {
+    this.initEvents();
+    this.doOnValueChange();
+  },
+
+  methods: {
+    /**
+     * 将当前`value`值转换成需要垂直方向需要`translate`的值
+     */
+    value2Translate(value) {
+      let values = this.currentValues;
+      let valueIndex = values.indexOf(value);
+      let offset = Math.floor(this.visibileColumnCount / 2);
+      let itemHeight = this.itemHeight;
+
+      if (valueIndex !== -1) {
+        return (valueIndex - offset) * (-itemHeight);
+      }
+    },
+
+    /**
+     * 根据当前`translate`的值转换成当前选中的`value`
+     */
+    translate2Value(translate) {
+      let itemHeight = this.itemHeight;
+      translate = Math.round(translate / itemHeight) * itemHeight;
+
+      let index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
+
+      return this.currentValues[index];
+    },
+
+    /**
+     * 初始化拖动事件
+     */
+    initEvents() {
+      var el = this.$refs.wrapper;
+      var dragState = {};
+
+      var velocityTranslate, prevTranslate, pickerItems;
+
+      draggable(el, {
+        start: (event) => {
+          // 存储当前状态
+          dragState = {
+            range: this.dragRange,
+            start: new Date(),
+            startLeft: event.pageX,
+            startTop: event.pageY,
+            startTranslateTop: translateUtil.getElementTranslate(el).top
+          };
+          pickerItems = el.querySelectorAll('.z-picker-item');
+        },
+
+        drag: (event) => {
+          this.isDragging = true;
+
+          dragState.left = event.pageX;
+          dragState.top = event.pageY;
+
+          let deltaY = dragState.top - dragState.startTop;
+          let translate = dragState.startTranslateTop + deltaY;
+
+          translateUtil.translateElement(el, null, translate);
+
+          velocityTranslate = translate - prevTranslate || translate;
+
+          prevTranslate = translate;
+        },
+
+        end: () => {
+          if (this.isDragging) {
+            this.isDragging = false;
+
+            var momentumRatio = 7;
+            var currentTranslate = translateUtil.getElementTranslate(el).top;
+            var duration = new Date() - dragState.start;
+
+            var momentumTranslate;
+            if (duration < 300) {
+              momentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
+            }
+
+            var dragRange = dragState.range;
+
+            this.$nextTick(() => {
+              var translate;
+              var itemHeight = this.itemHeight;
+
+              if (momentumTranslate) {
+                translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
+              } else {
+                translate = Math.round(currentTranslate / itemHeight) * itemHeight;
+              }
+
+              translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
+
+              translateUtil.translateElement(el, null, translate);
+
+              this.currentValue = this.translate2Value(translate);
+            });
+          }
+
+          dragState = {};
+        }
+      });
+    },
+
+    /**
+     * `value`改变时调用
+     */
+    doOnValueChange() {
+      let value = this.currentValue;
+      let wrapper = this.$refs.wrapper;
+
+      this.$emit('input', this.currentValue);
+
+      translateUtil.translateElement(wrapper, null, this.value2Translate(value));
+    }
+  }
+};
+</script>
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@ -0,0 +1,150 @@
+<template>
+  <div class="z-picker">
+    <div class="z-picker__toolbar">
+      <slot>
+      </slot>
+    </div>
+    <div class="z-picker__columns" :class="['z-picker__columns--' + columns.length]">
+      <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 class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
+    </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.values[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);
+      console.log(column)
+      return column && column.values[column.valueIndex];
+    },
+
+    /**
+     * 设置对应列中选中的值
+     */
+    setColumnValue(index, value) {
+      let column = this.getColumn(index);
+      if (column) {
+        column.currentValue = value;
+      }
+    },
+
+    /**
+     * 获取对应列中所有的备选值
+     */
+    getColumnValues(index) {
+      let column = this.getColumn(index);
+      return column && column.currentValues;
+    },
+
+    /**
+     * 设置对应列中所有的备选值
+     */
+    setColumnValues(index, values) {
+      let column = this.getColumn(index);
+      if (column) {
+        column.currentValues = values;
+      }
+    },
+
+    /**
+     * 获取所有列中被选中的值，返回一个数组
+     */
+    getValues() {
+      return this.values;
+    },
+
+    /**
+     * `values`为一个数组，设置所有列中被选中的值
+     */
+    setValues(values) {
+      values.forEach((value, index) => {
+        this.setColumnValue(index, value);
+      });
+    }
+  }
+};
+</script>
--- a/packages/popup/CHANGELOG.md
+++ b/packages/popup/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/popup/README.md
+++ b/packages/popup/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)
--- a/packages/popup/index.js
+++ b/packages/popup/index.js
@ -0,0 +1,3 @@
+import Popup from './src/popup';
+
+export default Popup;
--- a/packages/popup/package.json
+++ b/packages/popup/package.json
@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/popup/src/popup.vue
+++ b/packages/popup/src/popup.vue
@ -0,0 +1,71 @@
+<template>
+  <transition :name="currentTransition">
+    <div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'src/mixins/popup';
+
+export default {
+  name: 'z-popup',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+
+    lockOnScroll: {
+      default: false
+    },
+
+    closeOnClickOverlay: {
+      default: true
+    },
+
+    transition: {
+      type: String,
+      default: 'popup-slide'
+    },
+
+    position: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      currentValue: false,
+      currentTransition: this.transition
+    };
+  },
+
+  watch: {
+    currentValue(val) {
+      this.$emit('input', val);
+    },
+
+    value(val) {
+      this.currentValue = val;
+    }
+  },
+
+  beforeMount() {
+    if (this.transition !== 'popup-fade') {
+      this.currentTransition = `popup-slide-${this.position}`;
+    }
+  },
+
+  mounted() {
+    if (this.value) {
+      this.currentValue = true;
+      this.open();
+    }
+  }
+};
+</script>
--- a/packages/radio-group/CHANGELOG.md
+++ b/packages/radio-group/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/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)
--- a/packages/radio-group/index.js
+++ b/packages/radio-group/index.js
@ -0,0 +1,3 @@
+import RadioGroup from '../cell/src/radio-group';
+
+export default RadioGroup;
--- a/packages/radio-group/package.json
+++ b/packages/radio-group/package.json
@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/radio/src/radio-group.vue
+++ b/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>
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@ -1,20 +1,23 @@
 <template>
-  <o2-cell
-    class="o2-radio"
+  <z-cell
+    class="z-radio"
    :class="{
      'is-disabled': disabled
    }">
-  </o2-cell>
+    <span class="z-radio__label">
+      <slot></slot>
+    </span>
+  </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: {
--- a/packages/switch/package.json
+++ b/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",
--- a/packages/zanui-css/README.md
+++ b/packages/zanui-css/README.md
--- a/packages/zanui-css/package.json
+++ b/packages/zanui-css/package.json
--- a/packages/zanui-css/src/button.pcss
+++ b/packages/zanui-css/src/button.pcss
@ -1,10 +1,12 @@
@import "./common/var.pcss";

-@component-namespace o2 {
-  @component button {
+@component-namespace z {
+  @b button {
    position: relative;
-    display: block;
+    padding: 0;
+    display: inline-block;
    height: 45px;
+    line-height: 43px;
    border-radius: 4px;
    border: 0;
    box-sizing: border-box;
@ -25,40 +27,58 @@
      opacity: .3;
    }

-    @modifier default {
+    @m default {
      color: $button-default-color;
      background-color: $button-default-background-color;
+      border: 1px solid $button-default-border-color;
    }

-    @modifier primary {
+    @m primary {
      color: $button-primary-color;
      background-color: $button-primary-background-color;
+      border: 1px solid $button-primary-border-color;
    }

-    @modifier danger {
+    @m danger {
      color: $button-danger-color;
      background-color: $button-danger-background-color;
+      border: 1px solid $button-danger-border-color;
    }

-    @modifier large {
-      display: block;
+    @m large {
      width: 100%;
+      height: 50px;
+      line-height: 48px;
+      font-size: 16px;
    }

-    @modifier normal {
-      display: inline-block;
-      padding: 0 12px;
-    }
-
-    @modifier small {
-      display: inline-block;
+    @m normal {
      font-size: 14px;
-      padding: 0 12px;
-      height: 33px;
+    }
+
+    @m small {
+      min-width: 60px;
+      height: 30px;
+      line-height: 28px;
+      font-size: 12px;
+    }
+
+    @m mini {
+      display: inline-block;
+      width: 50px;
+      height: 22px;
+      line-height: 20px;
+      font-size: 10px;
    }

    @when disabled {
-      opacity: .6;
+      color: $button-disabled-color;
+      background-color: $button-disabled-background-color;
+      border: 1px solid $button-disabled-border-color;
+    }
+
+    @when block {
+      display: block;
    }
  }
 }
--- a/packages/zanui-css/src/button_group.pcss
+++ b/packages/zanui-css/src/button_group.pcss
@ -0,0 +1,29 @@
+@define-mixin button-wrap {
+  display: inline-block;
+  box-sizing: border-box;
+  padding-right: 10px;
+  &:last-child {
+    padding-right: 0;
+  }
+  .z-button {
+    width: 100%;
+  }
+}
+
+@component-namespace z {
+  @b button-group {
+    font-size: 0;
+  }
+  @b button-1-1 {
+    @mixin button-wrap;
+    width: 100%;
+  }
+  @b button-2-1 {
+    @mixin button-wrap;
+    width: 50%;
+  }
+  @b button-3-1 {
+    @mixin button-wrap;
+    width: 33.33%;
+  }
+}
--- a/packages/zanui-css/src/cell.pcss
+++ b/packages/zanui-css/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;
--- a/packages/zanui-css/src/common/var.pcss
+++ b/packages/zanui-css/src/common/var.pcss
@ -17,12 +17,19 @@ $c-blue: #38f;
 $c-background: #f8f8f8;

 /* 按钮颜色 */
-$button-default-color: $c-white;
-$button-default-background-color: $c-green-wx;
-$button-primary-color: $c-black;
-$button-primary-background-color: $c-white;
+$button-primary-color: $c-white;
+$button-primary-background-color: $c-green-wx;
+$button-primary-border-color: #0a0;
+$button-default-color: $c-black;
+$button-default-background-color: $c-white;
+$button-default-border-color: #bbb;
 $button-danger-color: $c-white;
 $button-danger-background-color: #f44;
+$button-danger-border-color: #e33;
+
+$button-disabled-color: $c-gray-dark;
+$button-disabled-background-color: $c-gray-light;
+$button-disabled-border-color: #cacaca;

 :root{

--- a/packages/zanui-css/src/dialog.pcss
+++ b/packages/zanui-css/src/dialog.pcss
@ -0,0 +1,95 @@
+@import "./mixins/border_retina.pcss";
+
+@component-namespace z {
+  @component dialog-wrapper {
+    position: absolute;
+  }
+
+  @component dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    background-color: #fff;
+    width: 85%;
+    border-radius: 4px;
+    font-size: 16px;
+    overflow: hidden;
+    backface-visibility: hidden;
+    transition: .2s;
+
+    @descendent header {
+      padding: 15px 0 0;
+    }
+
+    @descendent content {
+      padding: 15px 20px;
+      min-height: 36px;
+      position: relative;
+
+      &::after {
+        @mixin border-retina (bottom);
+      }
+    }
+
+    @descendent title {
+      text-align: center;
+      padding-left: 0;
+      margin-bottom: 0;
+      font-size: 16px;
+      color: #333;
+    }
+
+    @descendent message {
+      color: #999;
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    @descendent footer {
+      font-size: 14px;
+      overflow: hidden;
+    }
+
+    .is-twobtn {
+      .z-dialog-btn {
+        width: 50%;
+      }
+
+      .z-dialog-cancel {
+        &::after {
+          @mixin border-retina (right);
+        }
+      }
+    }
+
+    @descendent btn {
+      line-height: 40px;
+      border: 0;
+      background-color: #fff;
+      float: left;
+      box-sizing: border-box;
+      text-align: center;
+      position: relative;
+    }
+
+    @descendent cancel {
+      color: #333;
+    }
+
+    @descendent confirm {
+      color: #00C000;
+      width: 100%;
+    }
+  }
+}
+
+.dialog-bounce-enter {
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.7);
+}
+.dialog-bounce-leave-active {
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.9);
+}
--- a/packages/zanui-css/src/field.pcss
+++ b/packages/zanui-css/src/field.pcss
@ -1,47 +1,47 @@
@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;
    }

-    @descendent control {
+    .z-field-control {
      border: 0;
      font-size: 14px;
      line-height: 22px;
--- a/packages/zanui-css/src/icon.pcss
+++ b/packages/zanui-css/src/icon.pcss
--- a/packages/zanui-css/src/index.pcss
+++ b/packages/zanui-css/src/index.pcss
@ -2,7 +2,11 @@
  css组件库入口，组装成css组件库
 */
@import './button.pcss';
+@import './button_group.pcss';
@import './cell.pcss';
+@import './dialog.pcss';
@import './field.pcss';
@import './icon.pcss';
+@import './popup.pcss';
+@import './picker.pcss';
@import './switch.pcss';
--- a/packages/zanui-css/src/mixins/border_retina.pcss
+++ b/packages/zanui-css/src/mixins/border_retina.pcss
--- a/packages/zanui-css/src/picker.pcss
+++ b/packages/zanui-css/src/picker.pcss
@ -0,0 +1,110 @@
+@component-namespace z {
+  @b picker {
+    overflow: hidden;
+
+    @e toolbar {
+      height: 40px;
+    }
+
+    @e columns {
+      position: relative;
+      overflow: hidden;
+
+      @m 1 {
+        .z-picker-column {
+          width: 100%;
+        }
+      }
+
+      @m 2 {
+        .z-picker-column {
+          width: 50%;
+        }
+      }
+
+      @m 3 {
+        .z-picker-column {
+          width: 33.333%;
+        }
+      }
+    }
+  }
+
+  .z-picker-center-highlight {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 50%;
+    margin-top: -18px;
+    pointer-events: none;
+  }
+
+  .z-picker-center-highlight:before,
+  .z-picker-center-highlight:after {
+    content: '';
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    background-color: #eaeaea;
+    display: block;
+    z-index: 15;
+    transform: scaleY(0.5);
+  }
+
+  .z-picker-center-highlight:before {
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+  }
+
+  .z-picker-center-highlight:after {
+    left: 0;
+    bottom: 0;
+    right: auto;
+    top: auto;
+  }
+
+  @b picker-column {
+    font-size: 18px;
+    overflow: hidden;
+    position: relative;
+    max-height: 100%;
+    float: left;
+    text-align: center;
+
+    @e item {
+      height: 44px;
+      line-height: 44px;
+      padding: 0 10px;
+      white-space: nowrap;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #707274;
+      left: 0;
+      top: 0;
+      width: 100%;
+      box-sizing: border-box;
+      transition-duration: .3s;
+      backface-visibility: hidden;
+
+      @m selected {
+        color: #000;
+        transform: translate3d(0, 0, 0) rotateX(0);
+      }
+    }
+  }
+
+  .picker-column-wrapper {
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+    backface-visibility: hidden;
+  }
+
+  .picker-column-wrapper.dragging,
+  .picker-column-wrapper.dragging .picker-item {
+    transition-duration: 0s;
+  }
+}
--- a/packages/zanui-css/src/popup.pcss
+++ b/packages/zanui-css/src/popup.pcss
@ -0,0 +1,75 @@
+.v-modal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.701961);
+}
+
+@component-namespace z {
+  @component popup {
+    position: fixed;
+    background-color: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    backface-visibility: hidden;
+    transition: .2s ease-out;
+
+    @modifier top {
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier right {
+      top: 50%;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      transform: translate3d(0, -50%, 0);
+    }
+
+    @modifier bottom {
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier left {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-active {
+  transform: translate3d(-50%, -100%, 0);
+}
+
+.popup-slide-right-enter,
+.popup-slide-right-leave-active {
+  transform: translate3d(100%, -50%, 0);
+}
+
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.popup-slide-left-enter, .popup-slide-left-leave-active {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-fade-enter, .popup-fade-leave-active {
+  opacity: 0;
+}
--- a/packages/zanui-css/src/switch.pcss
+++ b/packages/zanui-css/src/switch.pcss
@ -1,4 +1,4 @@
-@component-namespace o2 {
+@component-namespace z {
  @component switch { 
    height: 29px;
    width: 49px;
--- a/src/index.js
+++ b/src/index.js
@ -5,8 +5,11 @@ import Radio from '../packages/radio/index.js';
 import Cell from '../packages/cell/index.js';
 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';
+import '../packages/zanui-css/src/index.pcss';

 const install = function(Vue) {
  if (install.installed) return;
@ -18,6 +21,8 @@ const install = function(Vue) {
  Vue.component(Cell.name, Cell);
  Vue.component(Icon.name, Icon);
  Vue.component(CellGroup.name, CellGroup);
+  Vue.component(Popup.name, Popup);
+  Vue.component(Picker.name, Picker);
 };

 // auto install
@ -34,5 +39,8 @@ module.exports = {
  Radio,
  Cell,
  Icon,
-  CellGroup
+  CellGroup,
+  Popup,
+  Dialog,
+  Picker
 };
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@ -0,0 +1,195 @@
+import Vue from 'vue';
+import merge from 'src/utils/merge';
+import PopupManager from './popup-manager';
+
+let idSeed = 1;
+
+const getDOM = function(dom) {
+  if (dom.nodeType === 3) {
+    dom = dom.nextElementSibling || dom.nextSibling;
+    getDOM(dom);
+  }
+  return dom;
+};
+
+let scrollBarWidth;
+const getScrollBarWidth = () => {
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+
+  return widthNoScroll - widthWithScroll;
+};
+
+export default {
+  props: {
+    /**
+     * popup当前显示状态
+     */
+    value: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否显示遮罩层
+     */
+    overlay: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 点击遮罩层是否关闭popup
+     */
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: [String, Number],
+    /**
+     * popup滚动时是否body内容也滚动
+     * 默认为不滚动
+     */
+    lockOnScroll: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    value(val) {
+      if (val) {
+        if (this.opening) return;
+        this.open();
+      } else {
+        if (this.closing) return;
+        this.close();
+      }
+    }
+  },
+
+  beforeMount() {
+    this._popupId = 'popup-' + idSeed++;
+    PopupManager.register(this._popupId, this);
+  },
+
+  data() {
+    return {
+      opening: false,
+      opened: false,
+      closing: false,
+      bodyOverflow: null,
+      bodyPaddingRight: null
+    };
+  },
+
+  methods: {
+    /**
+     * 显示popup
+     */
+    open(options) {
+      if (this.opened) return;
+
+      this.opening = true;
+
+      this.$emit('input', true);
+
+      const dom = getDOM(this.$el);
+      const props = merge({}, this, options);
+      const overlay = props.overlay;
+      const zIndex = props.zIndex;
+
+      // 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex`
+      if (zIndex) {
+        PopupManager.zIndex = zIndex;
+      }
+
+      // 如果显示遮罩层
+      if (overlay) {
+        if (this.closing) {
+          PopupManager.closeModal(this._popupId);
+          this.closing = false;
+        }
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
+
+        // 如果滚动时需要锁定
+        if (props.lockOnScroll) {
+          // 将原来的`bodyOverflow`和`bodyPaddingRight`存起来
+          if (!this.bodyOverflow) {
+            this.bodyPaddingRight = document.body.style.paddingRight;
+            this.bodyOverflow = document.body.style.overflow;
+          }
+
+          scrollBarWidth = getScrollBarWidth();
+
+          // 页面是否`overflow`
+          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
+          if (scrollBarWidth > 0 && bodyHasOverflow) {
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+          }
+          document.body.style.overlay = 'hidden';
+        }
+      }
+
+      dom.style.zIndex = PopupManager.nextZIndex();
+      this.opened = true;
+      this.opening = false;
+    },
+
+    /**
+     * 关闭popup
+     */
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.$emit('input', false);
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+            document.body.style.paddingRight = this.bodyPaddingRight;
+          }
+          this.bodyOverflow = null;
+          this.bodyPaddingRight = null;
+        }, 200);
+      }
+
+      this.opened = false;
+      this.doAfterClose();
+    },
+
+    doAfterClose() {
+      this.closing = false;
+      PopupManager.closeModal(this._popupId);
+    }
+  },
+
+  beforeDestroy() {
+    PopupManager.deregister(this._popupId);
+    PopupManager.closeModal(this._popupId);
+
+    if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
+      document.body.style.overflow = this.bodyOverflow;
+      document.body.style.paddingRight = this.bodyPaddingRight;
+    }
+    this.bodyOverflow = null;
+    this.bodyPaddingRight = null;
+  }
+};
--- a/src/mixins/popup/popup-manager.js
+++ b/src/mixins/popup/popup-manager.js
@ -0,0 +1,136 @@
+import { addClass, removeClass } from 'src/utils/dom';
+
+let hasModal = false;
+
+const getModal = function() {
+  let modalDom = PopupManager.modalDom;
+  if (modalDom) {
+    hasModal = true;
+  } else {
+    hasModal = false;
+    modalDom = document.createElement('div');
+    PopupManager.modalDom = modalDom;
+
+    modalDom.addEventListener('touchmove', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    modalDom.addEventListener('click', function() {
+      PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
+    });
+  }
+
+  return modalDom;
+};
+
+const instances = {};
+
+const PopupManager = {
+  zIndex: 2000,
+
+  modalStack: [],
+
+  nextZIndex() {
+    return this.zIndex++;
+  },
+
+  getInstance(id) {
+    return instances[id];
+  },
+
+  register(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+
+  deregister(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+
+  /**
+   * 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
+   */
+  handleOverlayClick() {
+    const topModal = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topModal) return;
+
+    const instance = PopupManager.getInstance(topModal.id);
+    if (instance && instance.closeOnClickOverlay) {
+      instance.close();
+    }
+  },
+
+  openModal(id, zIndex, dom) {
+    if (!id || zIndex === undefined) return;
+
+    const modalStack = this.modalStack;
+
+    for (let i = 0, j = modalStack.length; i < j; i++) {
+      const item = modalStack[i];
+      if (item.id === id) {
+        return;
+      }
+    }
+
+    const modalDom = getModal();
+
+    addClass(modalDom, 'v-modal');
+    setTimeout(() => {
+      removeClass(modalDom, 'v-modal-enter');
+    }, 200);
+
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      dom.parentNode.appendChild(modalDom);
+    } else {
+      document.body.appendChild(modalDom);
+    }
+
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex;
+    }
+    modalDom.style.display = '';
+
+    this.modalStack.push({ id: id, zIndex: zIndex });
+  },
+
+  closeModal(id) {
+    const modalStack = this.modalStack;
+    const modalDom = getModal();
+
+    if (modalStack.length > 0) {
+      const topItem = modalStack[modalStack.length - 1];
+      if (topItem.id === id) {
+        modalStack.pop();
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        }
+      } else {
+        for (let i = modalStack.length - 1; i >= 0; i--) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
+    if (modalStack.length === 0) {
+      setTimeout(() => {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+
+          modalDom.style.display = 'none';
+          this.modalDom = undefined;
+        }
+        removeClass(modalDom, 'v-modal-leave');
+      }, 200);
+    }
+  }
+};
+
+export default PopupManager;
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@ -0,0 +1,57 @@
+const trim = function(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+
+export function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+};
+
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else {
+      if (!hasClass(el, clsName)) {
+        curClass += ' ' + clsName;
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+};
+
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else {
+      if (hasClass(el, clsName)) {
+        curClass = curClass.replace(' ' + clsName + ' ', ' ');
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+};
--- a/src/utils/merge.js
+++ b/src/utils/merge.js
@ -0,0 +1,15 @@
+export default function(target, ...sources) {
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i] || {};
+    for (let prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        let value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+};
--- a/src/utils/transition.js
+++ b/src/utils/transition.js
@ -0,0 +1,100 @@
+import Vue from 'vue';
+
+var exportObj = {};
+
+if (!Vue.prototype.$isServer) {
+  var docStyle = document.documentElement.style;
+  var engine;
+  var translate3d = false;
+
+  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
+    engine = 'presto';
+  } else if ('MozAppearance' in docStyle) {
+    engine = 'gecko';
+  } else if ('WebkitAppearance' in docStyle) {
+    engine = 'webkit';
+  } else if (typeof navigator.cpuClass === 'string') {
+    engine = 'trident';
+  }
+
+  var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];
+
+  var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];
+
+  var helperElem = document.createElement('div');
+  var perspectiveProperty = vendorPrefix + 'Perspective';
+  var transformProperty = vendorPrefix + 'Transform';
+  var transformStyleName = cssPrefix + 'transform';
+  var transitionProperty = vendorPrefix + 'Transition';
+  var transitionStyleName = cssPrefix + 'transition';
+  var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
+
+  if (helperElem.style[perspectiveProperty] !== undefined) {
+    translate3d = true;
+  }
+
+  var getTranslate = function(element) {
+    var result = {left: 0, top: 0};
+    if (element === null || element.style === null) return result;
+
+    var transform = element.style[transformProperty];
+    var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
+    if (matches) {
+      result.left = +matches[1];
+      result.top = +matches[3];
+    }
+
+    return result;
+  };
+
+  var translateElement = function(element, x, y) {
+    if (x === null && y === null) return;
+
+    if (element === null || element === undefined || element.style === null) return;
+
+    if (!element.style[transformProperty] && x === 0 && y === 0) return;
+
+    if (x === null || y === null) {
+      var translate = getTranslate(element);
+      if (x === null) {
+        x = translate.left;
+      }
+      if (y === null) {
+        y = translate.top;
+      }
+    }
+
+    cancelTranslateElement(element);
+
+    if (translate3d) {
+      element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
+    } else {
+      element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')';
+    }
+  };
+
+  var cancelTranslateElement = function(element) {
+    if (element === null || element.style === null) return;
+
+    var transformValue = element.style[transformProperty];
+    
+    if (transformValue) {
+      transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
+      element.style[transformProperty] = transformValue;
+    }
+  };
+
+  exportObj = {
+    transformProperty: transformProperty,
+    transformStyleName: transformStyleName,
+    transitionProperty: transitionProperty,
+    transitionStyleName: transitionStyleName,
+    transitionEndProperty: transitionEndProperty,
+    getElementTranslate: getTranslate,
+    translateElement: translateElement,
+    cancelTranslateElement: cancelTranslateElement
+  };
+};
+
+export default exportObj;
+