diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index a6f33857f..16f7f1ae3 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -5,15 +5,15 @@
 只接受primary, default, danger三种类型，默认default。
 
 ```html
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button>default</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button>default</zan-button>
   </div>
-  <div class="z-button-1">
-    <z-button type="primary">primary</z-button>
+  <div class="zan-button-1">
+    <zan-button type="primary">primary</zan-button>
   </div>
-  <div class="z-button-1">
-    <z-button type="danger">danger</z-button>
+  <div class="zan-button-1">
+    <zan-button type="danger">danger</zan-button>
   </div>
 </div>
 ```
@@ -21,9 +21,9 @@
 ### 禁用状态
 
 ```html
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button disabled>diabled</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button disabled>diabled</zan-button>
   </div>
 </div>
 ```
@@ -33,20 +33,20 @@
 只接受large, normal, small, mini四种尺寸，默认normal。
 
 ```html 
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button size="large">large</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button size="large">large</zan-button>
   </div>
 </div>
-<div class="z-button-group" :style="{ width: '50%' }">
-  <div class="z-button-3">
-    <z-button type="primary">normal</z-button>
+<div class="zan-button-group" :style="{ width: '50%' }">
+  <div class="zan-button-3">
+    <zan-button type="primary">normal</zan-button>
   </div>
-  <div class="z-button-3">
-    <z-button size="small">small</z-button>
+  <div class="zan-button-3">
+    <zan-button size="small">small</zan-button>
   </div>
-  <div class="z-button-3">
-    <z-button size="mini">mini</z-button>
+  <div class="zan-button-3">
+    <zan-button size="mini">mini</zan-button>
   </div>
 </div>
 
@@ -57,9 +57,9 @@
 按钮默认是button标签，可以使用tag属性修改为一个a标签。
 
 ```html 
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
   </div>
 </div>
 ```
@@ -69,10 +69,10 @@
 一组按钮。
 
 ```html 
-<div class="z-button-group">
-  <z-button type="primary" size="small">确认付款</z-button>
-  <z-button size="small">确认收货</z-button>
-  <z-button size="small">取消订单</z-button>
+<div class="zan-button-group">
+  <zan-button type="primary" size="small">确认付款</zan-button>
+  <zan-button size="small">确认收货</zan-button>
+  <zan-button size="small">取消订单</zan-button>
 </div>
 ```
 
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 0796791ce..2e173c6a1 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -5,11 +5,11 @@
 当没有底部按钮时，右侧内容会居中显示。
 
 ```html
-<z-card
+<zan-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
   desc="描述"
   thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-</z-card>
+</zan-card>
 
 ```
 
@@ -18,23 +18,23 @@
 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 
 ```html
-<z-card
+<zan-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
   desc="商品SKU1，商品SKU2"
   thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-  <div class="z-card__row" slot="title">
-    <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-    <span class="z-card__price">¥ 2.00</span>
+  <div class="zan-card__row" slot="title">
+    <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="zan-card__price">¥ 2.00</span>
   </div>
-  <div class="z-card__row" slot="desc">
-    <h4 class="z-card__desc">商品sku</h4>
-    <span class="z-card__num">x 2</span>
+  <div class="zan-card__row" slot="desc">
+    <h4 class="zan-card__desc">商品sku</h4>
+    <span class="zan-card__num">x 2</span>
   </div>
-  <div class="z-card__footer" slot="footer">
-    <z-button size="mini">按钮一</z-button>
-    <z-button size="mini">按钮二</z-button>
+  <div class="zan-card__footer" slot="footer">
+    <zan-button size="mini">按钮一</zan-button>
+    <zan-button size="mini">按钮二</zan-button>
   </div>
-</z-card>
+</zan-card>
 ```
 
 ### API
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index 52a33786f..c18178a2b 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -21,10 +21,10 @@ export default {
 ### 基础用法
 
 ```html
-<z-cell-group>
-  <z-cell title="单元格1" value="单元格1内容"></z-cell>
-  <z-cell title="单元格2" value="单元格2内容"></z-cell>
-</z-cell-group>
+<zan-cell-group>
+  <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+  <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
+</zan-cell-group>
 ```
 
 ### 标题带描述信息
@@ -32,10 +32,10 @@ export default {
 传入`label`属性，属性值为描述信息的值。
 
 ```html
-<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>
+<zan-cell-group>
+  <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
+  <zan-cell title="单元格2" label="描述信息"></zan-cell>
+</zan-cell-group>
 ```
 
 ### 带图标
@@ -43,10 +43,10 @@ export default {
 传入`icon`属性。
 
 ```html
-<z-cell-group>
-  <z-cell title="起码运动馆" icon="home"></z-cell>
-  <z-cell title="线下门店" icon="location"></z-cell>
-</z-cell-group>
+<zan-cell-group>
+  <zan-cell title="起码运动馆" icon="home"></zan-cell>
+  <zan-cell title="线下门店" icon="location"></zan-cell>
+</zan-cell-group>
 ```
 
 ### 可点击的链接
@@ -54,10 +54,10 @@ export default {
 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
 
 ```html
-<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>
+<zan-cell-group>
+  <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+</zan-cell-group>
 ```
 
 ### 高级用法
@@ -65,15 +65,15 @@ export default {
 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 
 ```html
-<z-cell-group>
-  <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+<zan-cell-group>
+  <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
     <template slot="title">
-      <span class="z-cell-text">起码运动馆</span>
+      <span class="zan-cell-text">起码运动馆</span>
       <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
     </template>
-  </z-cell>
-  <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
-</z-cell-group>
+  </zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+</zan-cell-group>
 ```
 
 ### API
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index 9a592ef0f..53c8de4a4 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -31,9 +31,9 @@ export default {
 ### 基础用法
 
 ```html
-<z-button @click="handleAlertClick">alert</z-button>
+<zan-button @click="handleAlertClick">alert</zan-button>
 
-<z-button @click="handleConfirmClick">confirm</z-button>
+<zan-button @click="handleConfirmClick">confirm</zan-button>
 
 <script>
 import { Dialog } from 'src/index';
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index 6b879b5f8..c9f572471 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -7,11 +7,11 @@
 根据`type`属性显示不同的输入框。
 
 ```html
-<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>
+<zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+  <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
+  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
+</zan-cell-group>
 ```
 
 ### 无label的输入框
@@ -19,9 +19,9 @@
 不传入`label`属性即可。
 
 ```html
-<z-cell-group>
-  <z-field type="text" placeholder="请输入用户名"></z-field>
-</z-cell-group>
+<zan-cell-group>
+  <zan-field type="text" placeholder="请输入用户名"></zan-field>
+</zan-cell-group>
 ```
 
 ### 监听change事件
@@ -29,9 +29,9 @@
 监听组件的`change`事件。
 
 ```html
-<z-cell-group>
-  <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
-</z-cell-group>
+<zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+</zan-cell-group>
 ```
 
 ### API
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index 559699dab..947509b44 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -5,28 +5,28 @@
 ### 基础用法
 
 ```html
-<z-panel title="标题" desc="标题描述" status="状态">
-  <z-card
+<zan-panel title="标题" desc="标题描述" status="状态">
+  <zan-card
     title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
     desc="商品SKU1，商品SKU2"
     thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="z-card__row" slot="title">
-      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="z-card__price">¥ 2.00</span>
+    <div class="zan-card__row" slot="title">
+      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="zan-card__price">¥ 2.00</span>
     </div>
-    <div class="z-card__row" slot="desc">
-      <h4 class="z-card__desc">商品sku</h4>
-      <span class="z-card__num">x 2</span>
+    <div class="zan-card__row" slot="desc">
+      <h4 class="zan-card__desc">商品sku</h4>
+      <span class="zan-card__num">x 2</span>
     </div>
-    <div class="z-card__footer" slot="footer">
-      <z-button size="mini">按钮一</z-button>
-      <z-button size="mini">按钮二</z-button>
+    <div class="zan-card__footer" slot="footer">
+      <zan-button size="mini">按钮一</zan-button>
+      <zan-button size="mini">按钮二</zan-button>
     </div>
-  </z-card>
-  <div class="z-panel-sum">
+  </zan-card>
+  <div class="zan-panel-sum">
     合计：<span>¥ 1999.90</span>
   </div>
-</z-panel>
+</zan-panel>
 ```
 
 ### 高级用法
@@ -34,32 +34,32 @@
 使用具名`slot`自定义内容。
 
 ```html
-<z-panel title="标题" desc="标题描述" status="状态">
-  <z-card
+<zan-panel title="标题" desc="标题描述" status="状态">
+  <zan-card
     title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
     desc="商品SKU1，商品SKU2"
     thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="z-card__row" slot="title">
-      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="z-card__price">¥ 2.00</span>
+    <div class="zan-card__row" slot="title">
+      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="zan-card__price">¥ 2.00</span>
     </div>
-    <div class="z-card__row" slot="desc">
-      <h4 class="z-card__desc">商品sku</h4>
-      <span class="z-card__num">x 2</span>
+    <div class="zan-card__row" slot="desc">
+      <h4 class="zan-card__desc">商品sku</h4>
+      <span class="zan-card__num">x 2</span>
     </div>
-    <div class="z-card__footer" slot="footer">
-      <z-button size="mini">按钮一</z-button>
-      <z-button size="mini">按钮二</z-button>
+    <div class="zan-card__footer" slot="footer">
+      <zan-button size="mini">按钮一</zan-button>
+      <zan-button size="mini">按钮二</zan-button>
     </div>
-  </z-card>
-  <div class="z-panel-sum">
+  </zan-card>
+  <div class="zan-panel-sum">
     合计：<span>¥ 1999.90</span>
   </div>
-  <div class="z-panel-buttons" slot="footer">
-    <z-button size="small">按钮一</z-button>
-    <z-button size="small" type="danger">按钮二</z-button>
+  <div class="zan-panel-buttons" slot="footer">
+    <zan-button size="small">按钮一</zan-button>
+    <zan-button size="small" type="danger">按钮二</zan-button>
   </div>
-</z-panel>
+</zan-panel>
 ```
 
 ### API
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index 1e72ad062..e635b8492 100644
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -5,7 +5,7 @@
 ### 基础用法
 
 ```html
-<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
+<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 ```
 
 ### API
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 2b481fd3b..110ba3150 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -3,33 +3,33 @@
 ### 基础用法
 
 ```html
-<div class="z-button-1">
-  <z-button @click="popupShow1 = true">从下方弹出popup</z-button>
+<div class="zan-button-1">
+  <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
 </div>
-<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
+<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
   xxxx
-</z-popup>
+</zan-popup>
 
-<div class="z-button-1">
-  <z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
+<div class="zan-button-1">
+  <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
 </div>
-<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
+<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
   更新成功
-</z-popup>
+</zan-popup>
 
-<div class="z-button-1">
-  <z-button @click="popupShow3 = true">从右方弹出popup</z-button>
+<div class="zan-button-1">
+  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
 </div>
-<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
-  <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
-</z-popup>
+<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
+  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+</zan-popup>
 
-<div class="z-button-1">
-  <z-button @click="popupShow4 = true">从中间弹出popup</z-button>
+<div class="zan-button-1">
+  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
 </div>
-<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
+<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
   一些内容
-</z-popup>
+</zan-popup>
 
 <script>
 export default {
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index b3f1a8304..f1e92de89 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -13,8 +13,8 @@ export default {
 ### 基础用法
 
 ```html
-<z-radio name="1" v-model="radio1">单选框1</z-radio>
-<z-radio name="2" v-model="radio1">单选框2</z-radio>
+<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
 
 <script>
 export default {
@@ -30,8 +30,8 @@ export default {
 ### 禁用状态
 
 ```html
-<z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
-<z-radio name="2" v-model="radio2" disabled>选中且禁用</z-radio>
+<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
 
 <script>
 export default {
@@ -47,10 +47,10 @@ export default {
 ### radio组
 
 ```html
-<z-radio-group v-model="radio3">
-  <z-radio name="1">单选框1</z-radio>
-  <z-radio name="2">单选框2</z-radio>
-</z-radio-group>
+<zan-radio-group v-model="radio3">
+  <zan-radio name="1">单选框1</zan-radio>
+  <zan-radio name="2">单选框2</zan-radio>
+</zan-radio-group>
 
 <script>
 export default {
@@ -66,12 +66,12 @@ export default {
 ### 与Cell组件一起使用
 
 ```html
-<z-radio-group v-model="radio4">
-  <z-cell-group>
-    <z-cell><z-radio name="1">单选框1</z-radio></z-cell>
-    <z-cell><z-radio name="2">单选框2</z-radio></z-cell>
-  </z-cell-group>
-</z-radio-group>
+<zan-radio-group v-model="radio4">
+  <zan-cell-group>
+    <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
+    <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
+  </zan-cell-group>
+</zan-radio-group>
 
 <script>
 export default {
diff --git a/docs/examples/button.vue b/docs/examples/button.vue
index c39de71a5..52afdb499 100644
--- a/docs/examples/button.vue
+++ b/docs/examples/button.vue
@@ -2,55 +2,55 @@
   <div class="page-button">
     <h1 class="page-title">Button</h1>
     <h2 class="page-sub-title">按钮功能</h2>
-    <div class="z-button-group">
-      <div class="z-button-1">
-        <z-button>default</z-button>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button>default</zan-button>
       </div>
-      <div class="z-button-1">
-        <z-button type="primary">primary</z-button>
+      <div class="zan-button-1">
+        <zan-button type="primary">primary</zan-button>
       </div>
-      <div class="z-button-1">
-        <z-button type="danger">danger</z-button>
+      <div class="zan-button-1">
+        <zan-button type="danger">danger</zan-button>
       </div>
     </div>
 
     <h2 class="page-sub-title">禁用状态</h2>
-    <div class="z-button-group">
-      <div class="z-button-1">
-        <z-button disabled>diabled</z-button>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button disabled>diabled</zan-button>
       </div>
     </div>
 
     <h2 class="page-sub-title">按钮尺寸</h2>
-    <div class="z-button-group">
-      <div class="z-button-1">
-        <z-button size="large">large</z-button>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button size="large">large</zan-button>
       </div>
     </div>
-    <div class="z-button-group">
-      <div class="z-button-3">
-        <z-button type="primary">normal</z-button>
+    <div class="zan-button-group">
+      <div class="zan-button-3">
+        <zan-button type="primary">normal</zan-button>
       </div>
-      <div class="z-button-3">
-        <z-button size="small">small</z-button>
+      <div class="zan-button-3">
+        <zan-button size="small">small</zan-button>
       </div>
-      <div class="z-button-3">
-        <z-button size="mini">mini</z-button>
+      <div class="zan-button-3">
+        <zan-button size="mini">mini</zan-button>
       </div>
     </div>
 
     <h2 class="page-sub-title">自定义按钮标签</h2>
-    <div class="z-button-group">
-      <div class="z-button-1">
-        <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
       </div>
     </div>
 
     <h2 class="page-sub-title">button group</h2>
-    <div class="z-button-group">
-      <z-button type="primary" size="small">确认付款</z-button>
-      <z-button size="small">确认收货</z-button>
-      <z-button size="small">取消订单</z-button>
+    <div class="zan-button-group">
+      <zan-button type="primary" size="small">确认付款</zan-button>
+      <zan-button size="small">确认收货</zan-button>
+      <zan-button size="small">取消订单</zan-button>
     </div>
   </div>
 </template>
@@ -63,7 +63,7 @@
   }
   @component-namespace z {
     @b button-group {
-      .z-button-1 {
+      .zan-button-1 {
         margin-bottom: 10px;
       }
     }
diff --git a/docs/examples/card.vue b/docs/examples/card.vue
index e4b99abf0..8dbe6a4f0 100644
--- a/docs/examples/card.vue
+++ b/docs/examples/card.vue
@@ -3,30 +3,30 @@
     <h1 class="page-title">Card</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <z-card
+    <zan-card
       title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
       desc="描述"
       thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    </z-card>
+    </zan-card>
 
     <h2 class="page-sub-title">高级用法</h2>
-    <z-card
+    <zan-card
       title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
       desc="商品SKU1，商品SKU2"
       thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-      <div class="z-card__row" slot="title">
-        <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-        <span class="z-card__price">¥ 2.00</span>
+      <div class="zan-card__row" slot="title">
+        <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+        <span class="zan-card__price">¥ 2.00</span>
       </div>
-      <div class="z-card__row" slot="desc">
-        <h4 class="z-card__desc">商品sku</h4>
-        <span class="z-card__num">x 2</span>
+      <div class="zan-card__row" slot="desc">
+        <h4 class="zan-card__desc">商品sku</h4>
+        <span class="zan-card__num">x 2</span>
       </div>
-      <div class="z-card__footer" slot="footer">
-        <z-button size="mini">按钮一</z-button>
-        <z-button size="mini">按钮二</z-button>
+      <div class="zan-card__footer" slot="footer">
+        <zan-button size="mini">按钮一</zan-button>
+        <zan-button size="mini">按钮二</zan-button>
       </div>
-    </z-card>
+    </zan-card>
   </div>
 </template>
 
diff --git a/docs/examples/cell.vue b/docs/examples/cell.vue
index c9f823609..5180d5ccb 100644
--- a/docs/examples/cell.vue
+++ b/docs/examples/cell.vue
@@ -3,39 +3,39 @@
     <h1 class="page-title">Cell</h1>
     
     <h2 class="page-sub-title">基础用法</h2>
-    <z-cell-group>
-      <z-cell title="单元格1" value="单元格1内容"></z-cell>
-      <z-cell title="单元格2" value="单元格2内容"></z-cell>
-    </z-cell-group>
+    <zan-cell-group>
+      <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+      <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
+    </zan-cell-group>
 
     <h2 class="page-sub-title">标题带描述信息</h2>
-    <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>
+    <zan-cell-group>
+      <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
+      <zan-cell title="单元格2" label="描述信息"></zan-cell>
+    </zan-cell-group>
 
     <h2 class="page-sub-title">带图标</h2>
-    <z-cell-group>
-      <z-cell title="起码运动馆" icon="home"></z-cell>
-      <z-cell title="线下门店" icon="location"></z-cell>
-    </z-cell-group>
+    <zan-cell-group>
+      <zan-cell title="起码运动馆" icon="home"></zan-cell>
+      <zan-cell title="线下门店" icon="location"></zan-cell>
+    </zan-cell-group>
 
     <h2 class="page-sub-title">可点击的链接</h2>
-    <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>
+    <zan-cell-group>
+      <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
+      <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+    </zan-cell-group>
 
     <h2 class="page-sub-title">高级用法</h2>
-    <z-cell-group>
-      <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+    <zan-cell-group>
+      <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
         <template slot="title">
-          <span class="z-cell-text">起码运动馆</span>
+          <span class="zan-cell-text">起码运动馆</span>
           <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
         </template>
-      </z-cell>
-      <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
-    </z-cell-group>
+      </zan-cell>
+      <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+    </zan-cell-group>
   </div>
 </template>
 
diff --git a/docs/examples/dialog.vue b/docs/examples/dialog.vue
index c17c07476..317e66b99 100644
--- a/docs/examples/dialog.vue
+++ b/docs/examples/dialog.vue
@@ -2,12 +2,12 @@
   <div class="page-dialog">
     <h1 class="page-title">Dialog</h1>
 
-    <div class="z-button-1">
-      <z-button @click="handleAlertClick">点击我打开alert提示框</z-button>
+    <div class="zan-button-1">
+      <zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
     </div>
 
-    <div class="z-button-1">
-      <z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button>
+    <div class="zan-button-1">
+      <zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
     </div>
 
   </div>
@@ -47,7 +47,7 @@ export default {
   @b dialog {
     padding: 0 15px;
 
-    .z-button-1 {
+    .zan-button-1 {
       margin-bottom: 10px;
     }
   }
diff --git a/docs/examples/field.vue b/docs/examples/field.vue
index 15ab52a08..265090b22 100644
--- a/docs/examples/field.vue
+++ b/docs/examples/field.vue
@@ -3,21 +3,21 @@
     <h1 class="page-title">Field</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <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>
+    <zan-cell-group>
+      <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+      <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
+      <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
+    </zan-cell-group>
 
     <h2 class="page-sub-title">无label的输入框</h2>
-    <z-cell-group>
-      <z-field type="text" placeholder="请输入用户名"></z-field>
-    </z-cell-group>
+    <zan-cell-group>
+      <zan-field type="text" placeholder="请输入用户名"></zan-field>
+    </zan-cell-group>
 
     <h2 class="page-sub-title">监听change事件</h2>
-    <z-cell-group>
-      <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
-    </z-cell-group>
+    <zan-cell-group>
+      <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+    </zan-cell-group>
   </div>
 </template>
 
diff --git a/docs/examples/panel.vue b/docs/examples/panel.vue
index 6f1e1c270..f3bb9a73e 100644
--- a/docs/examples/panel.vue
+++ b/docs/examples/panel.vue
@@ -3,61 +3,61 @@
     <h1 class="page-title">Panel</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <z-panel title="标题" desc="标题描述" status="状态">
-      <z-card
+    <zan-panel title="标题" desc="标题描述" status="状态">
+      <zan-card
         title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
         desc="商品SKU1，商品SKU2"
         thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-        <div class="z-card__row" slot="title">
-          <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-          <span class="z-card__price">¥ 2.00</span>
+        <div class="zan-card__row" slot="title">
+          <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+          <span class="zan-card__price">¥ 2.00</span>
         </div>
-        <div class="z-card__row" slot="desc">
-          <h4 class="z-card__desc">商品sku</h4>
-          <span class="z-card__num">x 2</span>
+        <div class="zan-card__row" slot="desc">
+          <h4 class="zan-card__desc">商品sku</h4>
+          <span class="zan-card__num">x 2</span>
         </div>
-        <div class="z-card__footer" slot="footer">
-          <z-button size="mini">按钮一</z-button>
-          <z-button size="mini">按钮二</z-button>
+        <div class="zan-card__footer" slot="footer">
+          <zan-button size="mini">按钮一</zan-button>
+          <zan-button size="mini">按钮二</zan-button>
         </div>
-      </z-card>
-      <div class="z-panel-sum">
+      </zan-card>
+      <div class="zan-panel-sum">
         合计：<span>¥ 1999.90</span>
       </div>
-    </z-panel>
+    </zan-panel>
 
     <h2 class="page-sub-title">高级用法</h2>
-    <z-panel title="标题" desc="标题描述" status="状态">
-      <z-card
+    <zan-panel title="标题" desc="标题描述" status="状态">
+      <zan-card
         title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
         desc="商品SKU1，商品SKU2"
         thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-        <div class="z-card__row" slot="title">
-          <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-          <span class="z-card__price">¥ 2.00</span>
+        <div class="zan-card__row" slot="title">
+          <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+          <span class="zan-card__price">¥ 2.00</span>
         </div>
-        <div class="z-card__row" slot="desc">
-          <h4 class="z-card__desc">商品sku</h4>
-          <span class="z-card__num">x 2</span>
+        <div class="zan-card__row" slot="desc">
+          <h4 class="zan-card__desc">商品sku</h4>
+          <span class="zan-card__num">x 2</span>
         </div>
-        <div class="z-card__footer" slot="footer">
-          <z-button size="mini">按钮一</z-button>
-          <z-button size="mini">按钮二</z-button>
+        <div class="zan-card__footer" slot="footer">
+          <zan-button size="mini">按钮一</zan-button>
+          <zan-button size="mini">按钮二</zan-button>
         </div>
-      </z-card>
-      <div class="z-panel-sum">
+      </zan-card>
+      <div class="zan-panel-sum">
         合计：<span>¥ 1999.90</span>
       </div>
-      <div class="z-panel-buttons" slot="footer">
-        <z-button size="small">按钮一</z-button>
-        <z-button size="small" type="danger">按钮二</z-button>
+      <div class="zan-panel-buttons" slot="footer">
+        <zan-button size="small">按钮一</zan-button>
+        <zan-button size="small" type="danger">按钮二</zan-button>
       </div>
-    </z-panel>
+    </zan-panel>
   </div>  
 </template>
 
 <style>
-.z-panel-sum {
+.zan-panel-sum {
   background: #fff;
   text-align: right;
   font-size: 14px;
@@ -70,10 +70,10 @@
   }
 }
 
-.z-panel-buttons {
+.zan-panel-buttons {
   text-align: right;
 
-  .z-button {
+  .zan-button {
     margin-left: 5px;
   }
 }
diff --git a/docs/examples/picker.vue b/docs/examples/picker.vue
index a4fa84148..d9d41f34b 100644
--- a/docs/examples/picker.vue
+++ b/docs/examples/picker.vue
@@ -3,7 +3,7 @@
     <h1 class="page-title">Picker</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
+    <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
   </div>  
 </template>
 
diff --git a/docs/examples/popup.vue b/docs/examples/popup.vue
index 063276627..5fce33dd5 100644
--- a/docs/examples/popup.vue
+++ b/docs/examples/popup.vue
@@ -3,33 +3,33 @@
     <h1 class="page-title">Popup</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <div class="z-button-1">
-      <z-button @click="popupShow1 = true">从下方弹出popup</z-button>
+    <div class="zan-button-1">
+      <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
     </div>
-    <z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
+    <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
       xxxx
-    </z-popup>
+    </zan-popup>
 
-    <div class="z-button-1">
-      <z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
+    <div class="zan-button-1">
+      <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
     </div>
-    <z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
+    <zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
       更新成功
-    </z-popup>
+    </zan-popup>
 
-    <div class="z-button-1">
-      <z-button @click="popupShow3 = true">从右方弹出popup</z-button>
+    <div class="zan-button-1">
+      <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
     </div>
-    <z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
-      <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
-    </z-popup>
+    <zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
+      <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+    </zan-popup>
 
-    <div class="z-button-1">
-      <z-button @click="popupShow4 = true">从中间弹出popup</z-button>
+    <div class="zan-button-1">
+      <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
     </div>
-    <z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
+    <zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
       一些内容
-    </z-popup>
+    </zan-popup>
   </div>
 </template>
 
@@ -57,12 +57,12 @@ export default {
 </script>
 
 <style>
-.z-popup-1 {
+.zan-popup-1 {
   width: 100%;
   height: 200px;
 }
 
-.z-popup-2 {
+.zan-popup-2 {
   width: 100%;
   line-height: 44px;
   background-color: rgba(0, 0, 0, 0.701961);
@@ -70,20 +70,20 @@ export default {
   color: #fff;
 }
 
-.z-popup-3 {
+.zan-popup-3 {
   width: 100%;
   height: 100%;
   background-color: #fff;
 }
 
-.z-popup-4 {
+.zan-popup-4 {
   width: 50%;
   height: 200px;
   background: #fff;
   border-radius: 10px;
 }
 
-.page-popup .z-button-1 {
+.page-popup .zan-button-1 {
   margin-bottom: 10px;
 }
 
diff --git a/docs/examples/radio.vue b/docs/examples/radio.vue
index 4ca5504d4..c6e394595 100644
--- a/docs/examples/radio.vue
+++ b/docs/examples/radio.vue
@@ -4,28 +4,28 @@
 
     <div class="demo-wrapper">
       <h2 class="page-sub-title">基础用法</h2>
-      <z-radio name="1" v-model="radio1">单选框1</z-radio>
-      <z-radio name="2" v-model="radio1">单选框2</z-radio>
+      <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+      <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
 
       <h2 class="page-sub-title">禁用状态</h2>
-      <z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
-      <z-radio name="2" v-model="radio2" disabled>选中且禁用</z-radio>
+      <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+      <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
 
       <h2 class="page-sub-title">radio组</h2>
-      <z-radio-group v-model="radio3">
-        <z-radio name="1">单选框1</z-radio>
-        <z-radio name="2">单选框2</z-radio>
-      </z-radio-group>
+      <zan-radio-group v-model="radio3">
+        <zan-radio name="1">单选框1</zan-radio>
+        <zan-radio name="2">单选框2</zan-radio>
+      </zan-radio-group>
 
       <h2 class="page-sub-title">与Cell组件一起使用</h2>
     </div>
 
-    <z-radio-group v-model="radio4">
-      <z-cell-group>
-        <z-cell><z-radio name="1">单选框1</z-radio></z-cell>
-        <z-cell><z-radio name="2">单选框2</z-radio></z-cell>
-      </z-cell-group>
-    </z-radio-group>
+    <zan-radio-group v-model="radio4">
+      <zan-cell-group>
+        <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
+        <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
+      </zan-cell-group>
+    </zan-radio-group>
   </div>
 </template>
 
@@ -46,7 +46,7 @@ export default {
 .demo-wrapper {
   padding: 0 15px;
 
-  .z-radio {
+  .zan-radio {
     margin: 10px 0;
   }
 }
diff --git a/docs/examples/switch.vue b/docs/examples/switch.vue
index 131518236..23bccd006 100644
--- a/docs/examples/switch.vue
+++ b/docs/examples/switch.vue
@@ -5,15 +5,15 @@
     <h2 class="page-sub-title">基础用法</h2>
     <div class="page-switch">
       <div class="page-switch__wrapper">
-        <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
+        <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
         <div class="page-switch__text">{{switchStateText}}</div>
       </div>
       <div class="page-switch__wrapper">
-        <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
+        <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
         <div class="page-switch__text">ON, DISABLED</div>
       </div>
       <div class="page-switch__wrapper">
-        <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+        <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
         <div class="page-switch__text">OFF, DISABLED</div>
       </div>
     </div>
diff --git a/docs/examples/waterfall.vue b/docs/examples/waterfall.vue
index 4a0909d43..71b84f287 100644
--- a/docs/examples/waterfall.vue
+++ b/docs/examples/waterfall.vue
@@ -10,8 +10,8 @@
         waterfall-disabled="isWaterfallDisabled"
         waterfall-offset="400"
       >
-        <div v-for="item in list" class="z-cell" style="text-align: center;">{{ item }}</div>
-        <!-- <z-loading v-if="loading" style="text-align: center;"></z-loading> -->
+        <div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
+        <!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
         <div style="text-align: center;">loading</div>
       </div>
     </div>
diff --git a/packages/button/package.json b/packages/button/package.json
index c9dfa4dc9..f69339a6b 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-button",
+  "name": "@youzan/zan-button",
   "version": "0.0.1",
   "description": "button component",
   "main": "./index.js",
diff --git a/packages/button/src/button.js b/packages/button/src/button.js
index fa62244c4..382f58b16 100644
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@@ -8,14 +8,14 @@
  * @param {slot} - 显示文本
  *
  * @example
- * <z-button size="large" type="primary">按钮</z-button>
+ * <zan-button size="large" type="primary">按钮</zan-button>
  */
 
 const allowedSize = ['mini', 'small', 'normal', 'large'];
 const allowedType = ['default', 'danger', 'primary'];
 
 export default {
-  name: 'z-button',
+  name: 'zan-button',
 
   props: {
     disabled: Boolean,
@@ -57,9 +57,9 @@ export default {
         type={nativeType}
         disabled={disabled}
         class={[
-          'z-button',
-          'z-button--' + type,
-          'z-button--' + size,
+          'zan-button',
+          'zan-button--' + type,
+          'zan-button--' + size,
           {
             'is-disabled': disabled,
             'is-loading': loading,
@@ -69,9 +69,9 @@ export default {
         onClick={this.handleClick}
       >
         {
-          loading ? <i class="z-icon-loading"></i> : null
+          loading ? <i class="zan-icon-loading"></i> : null
         }
-        <span class="z-button-text">{this.$slots.default}</span>
+        <span class="zan-button-text">{this.$slots.default}</span>
       </Tag>
     );
   }
diff --git a/packages/card/package.json b/packages/card/package.json
index 79afd27c5..17af764ff 100644
--- a/packages/card/package.json
+++ b/packages/card/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-card",
+  "name": "@youzan/zan-card",
   "version": "0.0.1",
   "description": "card component",
   "main": "./index.js",
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index 90732293f..e50f1fbd5 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="z-card">
-    <img :src="thumb" alt="" class="z-card__img">
-    <div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
-      <div class="z-card__info">
+  <div class="zan-card">
+    <img :src="thumb" alt="" class="zan-card__img">
+    <div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
+      <div class="zan-card__info">
         <slot name="title">
-          <h4 v-text="title" class="z-card__title"></h4>
+          <h4 v-text="title" class="zan-card__title"></h4>
         </slot>
         <slot name="desc">
-          <p v-if="desc" v-text="desc" class="z-card__title"></p>
+          <p v-if="desc" v-text="desc" class="zan-card__title"></p>
         </slot>
         <slot name="tags"></slot>
       </div>
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'z-card',
+  name: 'zan-card',
   props: {
     thumb: {
       type: String,
diff --git a/packages/cell/package.json b/packages/cell/package.json
index b812f955d..789b15f79 100644
--- a/packages/cell/package.json
+++ b/packages/cell/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-cell",
+  "name": "@youzan/zan-cell",
   "version": "0.0.1",
   "description": "cell component",
   "main": "./index.js",
diff --git a/packages/cell/src/cell-group.vue b/packages/cell/src/cell-group.vue
index b7360abc3..bcbf2ffa2 100644
--- a/packages/cell/src/cell-group.vue
+++ b/packages/cell/src/cell-group.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="z-cell-group">
+  <div class="zan-cell-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'z-cell-group'
+  name: 'zan-cell-group'
 };
 </script>
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index 6585e8131..03c0f8986 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -1,15 +1,15 @@
 <template>
-  <a class="z-cell" :href="url" @click="handleClick">
-    <div class="z-cell__title">
+  <a class="zan-cell" :href="url" @click="handleClick">
+    <div class="zan-cell__title">
       <slot name="icon">
         <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
       </slot>
       <slot name="title">
-        <span class="z-cell__text" v-text="title"></span>
-        <span class="z-cell__label" v-if="label" v-text="label"></span>
+        <span class="zan-cell__text" v-text="title"></span>
+        <span class="zan-cell__label" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="z-cell__value" :class="{
+    <div class="zan-cell__value" :class="{
       'is-link': isLink,
       'is-alone': !title && !label
     }">
@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: 'z-cell',
+  name: 'zan-cell',
 
   props: {
     icon: String,
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index df90452d8..7ebe9e408 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-dialog",
+  "name": "@youzan/zan-dialog",
   "version": "0.0.1",
   "description": "dialog component",
   "main": "./index.js",
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index 45190f49a..ca6b55ed7 100644
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@@ -1,16 +1,16 @@
 <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 class="zan-dialog-wrapper">
+      <div class="zan-dialog" v-show="value">
+        <div class="zan-dialog__header" v-if="title">
+          <div class="zan-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 class="zan-dialog__content" v-if="message">
+          <div class="zan-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 class="zan-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="zan-dialog__btn zan-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="zan-dialog__btn zan-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: 'z-dialog',
+  name: 'zan-dialog',
 
   mixins: [Popup],
 
diff --git a/packages/field/package.json b/packages/field/package.json
index d1ac98bab..e182578d5 100644
--- a/packages/field/package.json
+++ b/packages/field/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-field",
+  "name": "@youzan/zan-field",
   "version": "0.0.1",
   "description": "form field component",
   "main": "./index.js",
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index 43041684d..a0d8bc534 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -1,6 +1,6 @@
 <template>
-  <z-cell
-    class="z-field"
+  <zan-cell
+    class="zan-field"
     :title="label"
     :class="{
       'is-textarea': type === 'textarea',
@@ -8,7 +8,7 @@
     }">
     <textarea
       v-if="type === 'textarea'"
-      class="z-field__control"
+      class="zan-field__control"
       v-model="currentValue"
       @change="$emit('change', currentValue)"
       :placeholder="placeholder"
@@ -18,7 +18,7 @@
     </textarea>
     <input
       v-else
-      class="z-field__control"
+      class="zan-field__control"
       :value="currentValue"
       @change="$emit('change', currentValue)"
       @input="handleInput"
@@ -27,14 +27,14 @@
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
-  </z-cell>
+  </zan-cell>
 </template>
 
 <script>
 import zCell from 'packages/cell';
 
 export default {
-  name: 'z-field',
+  name: 'zan-field',
 
   components: {
     zCell
diff --git a/packages/icon/package.json b/packages/icon/package.json
index 85ea45b31..f36773fbe 100644
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@youzan/z-icon",
+  "name": "@youzan/zan-icon",
   "version": "0.0.1",
-  "description": "z-icon",
+  "description": "zan-icon",
   "main": "index.js",
   "author": "zhangmin <zhangmin@youzan.com>",
   "devDependencies": {},
diff --git a/packages/icon/src/icon.vue b/packages/icon/src/icon.vue
index b00649a1f..51d940c3e 100644
--- a/packages/icon/src/icon.vue
+++ b/packages/icon/src/icon.vue
@@ -1,10 +1,10 @@
 <template>
-  <i :class="'zenui-icon-' + name"></i>
+  <i class="zanui-icon" :class="'zan-icon-' + name"></i>
 </template>
 
 <script>
   export default {
-    name: 'z-icon',
+    name: 'zan-icon',
 
     props: {
       name: String
diff --git a/packages/loading/package.json b/packages/loading/package.json
index 215b9a83c..608f1ec75 100644
--- a/packages/loading/package.json
+++ b/packages/loading/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-loading",
+  "name": "@youzan/zan-loading",
   "version": "0.0.1",
   "description": "loading component",
   "main": "./lib/index.js",
diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue
index cf6f05464..9048ad8d7 100644
--- a/packages/loading/src/loading.vue
+++ b/packages/loading/src/loading.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="z-loading"></div>
+  <div class="zan-loading"></div>
 </template>
 
 <script>
 export default {
-  name: 'z-loading'
+  name: 'zan-loading'
 };
 </script>
diff --git a/packages/panel/package.json b/packages/panel/package.json
index 1c9bb7c54..b04c76142 100644
--- a/packages/panel/package.json
+++ b/packages/panel/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-panel",
+  "name": "@youzan/zan-panel",
   "version": "0.0.1",
   "description": "panel component",
   "main": "./index.js",
diff --git a/packages/panel/src/panel.vue b/packages/panel/src/panel.vue
index c82d273b9..741342650 100644
--- a/packages/panel/src/panel.vue
+++ b/packages/panel/src/panel.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="z-panel">
-    <div class="z-panel__header">
+  <div class="zan-panel">
+    <div class="zan-panel__header">
       <slot name="header">
-        <h4 class="z-panel__title" v-text="title"></h4>
-        <span class="z-panel__desc" v-if="desc" v-text="desc"></span>
-        <span class="z-panel__status" v-if="status" v-text="status"></span>
+        <h4 class="zan-panel__title" v-text="title"></h4>
+        <span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
+        <span class="zan-panel__status" v-if="status" v-text="status"></span>
       </slot>
     </div>
-    <div class="z-panel__content">
+    <div class="zan-panel__content">
       <slot></slot>
     </div>
-    <div class="z-panel__footer" v-if="this.$slots.footer">
+    <div class="zan-panel__footer" v-if="this.$slots.footer">
       <slot name="footer"></slot>
     </div>
   </div>
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'z-panel',
+  name: 'zan-panel',
   props: {
     title: String,
     desc: String,
diff --git a/packages/picker/package.json b/packages/picker/package.json
index b4162fbf9..666316070 100644
--- a/packages/picker/package.json
+++ b/packages/picker/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-picker",
+  "name": "@youzan/zan-picker",
   "version": "0.0.1",
   "description": "picker component",
   "main": "./index.js",
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index 19c83e984..45efc0d0b 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="z-picker-column" :class="classNames">
-    <div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
+  <div class="zan-picker-column" :class="classNames">
+    <div class="zan-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 }"
+        class="zan-picker-column__item"
+        :class="{ 'zan-picker-column__item--selected': item === currentValue }"
         :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
         {{item}}
       </div>
@@ -19,7 +19,7 @@ import draggable from './draggable';
 const DEFAULT_ITEM_HEIGHT = 44;
 
 export default {
-  name: 'z-picker-column',
+  name: 'zan-picker-column',
 
   props: {
     /**
@@ -168,7 +168,7 @@ export default {
             startTop: event.pageY,
             startTranslateTop: translateUtil.getElementTranslate(el).top
           };
-          pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
+          pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line
         },
 
         drag: (event) => {
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index 0a9f6b9c0..47670f5c6 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="z-picker">
-    <div class="z-picker__toolbar">
+  <div class="zan-picker">
+    <div class="zan-picker__toolbar">
       <slot>
       </slot>
     </div>
-    <div class="z-picker__columns" :class="['z-picker__columns--' + columns.length]">
+    <div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
       <picker-column
         v-for="(item, index) in columns"
         v-model="values[index]"
@@ -14,7 +14,7 @@
         :visible-item-count="visibleItemCount"
         @change="columnValueChange">
       </picker-column>
-      <div class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
+      <div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
   </div>
 </template>
@@ -25,7 +25,7 @@ import PickerColumn from './picker-column';
 const DEFAULT_ITEM_HEIGHT = 44;
 
 export default {
-  name: 'z-picker',
+  name: 'zan-picker',
 
   components: {
     PickerColumn
@@ -89,7 +89,7 @@ export default {
      * 获取对应索引的列的实例
      */
     getColumn(index) {
-      let children = this.$children.filter(child => child.$options.name === 'z-picker-column');
+      let children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
       return children[index];
     },
 
diff --git a/packages/popup/package.json b/packages/popup/package.json
index af6b57711..34c950297 100644
--- a/packages/popup/package.json
+++ b/packages/popup/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-popup",
+  "name": "@youzan/zan-popup",
   "version": "0.0.1",
   "description": "popup component",
   "main": "./index.js",
diff --git a/packages/popup/src/popup.vue b/packages/popup/src/popup.vue
index 72063832e..602b45cef 100644
--- a/packages/popup/src/popup.vue
+++ b/packages/popup/src/popup.vue
@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
+    <div v-show="currentValue" class="zan-popup" :class="[position ? 'zan-popup--' + position : '']">
       <slot></slot>
     </div>
   </transition>
@@ -10,7 +10,7 @@
 import Popup from 'src/mixins/popup';
 
 export default {
-  name: 'z-popup',
+  name: 'zan-popup',
 
   mixins: [Popup],
 
diff --git a/packages/radio/package.json b/packages/radio/package.json
index 92e6a4320..1b9071190 100644
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-radio",
+  "name": "@youzan/zan-radio",
   "version": "0.0.1",
   "description": "radio component",
   "main": "./index.js",
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 6e6b774c6..66ee3b549 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="z-radio-group">
+  <div class="zan-radio-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'z-radio-group',
+  name: 'zan-radio-group',
 
   props: {
     value: {},
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 35bb49049..7f3be2da4 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -1,15 +1,15 @@
 <template>
   <div
-    class="z-radio"
+    class="zan-radio"
     :class="{
       'is-disabled': isDisabled
     }">
-    <span class="z-radio__input">
+    <span class="zan-radio__input">
       <input
         :value="name"
         v-model="currentValue"
         type="radio"
-        class="z-radio__control"
+        class="zan-radio__control"
         :disabled="isDisabled">
       <span class="zui-icon" :class="{
         'zui-icon-checked': currentValue === name,
@@ -17,7 +17,7 @@
       }">
       </span>
     </span>
-    <span class="z-radio__label">
+    <span class="zan-radio__label">
       <slot></slot>
     </span>
   </div>
@@ -25,7 +25,7 @@
 
 <script>
 export default {
-  name: 'z-radio',
+  name: 'zan-radio',
 
   props: {
     disabled: Boolean,
@@ -40,12 +40,12 @@ export default {
 
     currentValue: {
       get() {
-        return this.isGroup ? this.parentGroup.value : this.value;
+        return this.isGroup ? (this.parentGroup && this.parentGroup.value) : this.value;
       },
 
       set(val) {
         if (this.isGroup) {
-          this.parentGroup.$emit('input', val);
+          this.parentGroup && this.parentGroup.$emit('input', val);
         } else {
           this.$emit('input', val);
         }
@@ -54,7 +54,7 @@ export default {
 
     isDisabled() {
       return this.isGroup
-          ? this.parentGroup.disabled || this.disabled
+          ? (this.parentGroup && this.parentGroup.disabled) || this.disabled
           : this.disabled;
     }
   },
@@ -65,7 +65,7 @@ export default {
 
       let parent = this.$parent;
       while (parent) {
-        if (parent.$options.name === 'z-radio-group') {
+        if (parent.$options.name === 'zan-radio-group') {
           this.parentGroup = parent;
           break;
         } else {
diff --git a/packages/switch/package.json b/packages/switch/package.json
index 97203471b..eb5900ca3 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-switch",
+  "name": "@youzan/zan-switch",
   "version": "0.0.1",
   "description": "switch component",
   "main": "./index.js",
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index d10f30faa..e889b7ade 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="z-switch" :class="switchState" @click="toggleState">
-    <div class="z-switch__node" :class="switchState"></div>
+  <div class="zan-switch" :class="switchState" @click="toggleState">
+    <div class="zan-switch__node" :class="switchState"></div>
   </div>
 </template>
 
@@ -18,7 +18,7 @@
  * <o2-switch checked="true" disabled="false"></o2-switch>
  */
 export default {
-  name: 'o2-switch',
+  name: 'zan-switch',
   props: {
     checked: {
       type: Boolean,
diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css
index 80a471c1f..fa4448687 100644
--- a/packages/zanui-css/src/button.css
+++ b/packages/zanui-css/src/button.css
@@ -1,6 +1,6 @@
 @import "./common/var.css";
 
-@component-namespace z {
+@component-namespace zan {
   @b button {
     position: relative;
     padding: 0;
diff --git a/packages/zanui-css/src/button_group.css b/packages/zanui-css/src/button_group.css
index f061727d3..0585ab70b 100644
--- a/packages/zanui-css/src/button_group.css
+++ b/packages/zanui-css/src/button_group.css
@@ -5,16 +5,16 @@
   &:last-child {
     padding-right: 0;
   }
-  .z-button {
+  .zan-button {
     width: 100%;
   }
 }
 
-@component-namespace z {
+@component-namespace zan {
   @b button-group {
     font-size: 0;
 
-    > .z-button {
+    > .zan-button {
       margin-right: 10px;
       &::last-child {
         margin-right: 0;
diff --git a/packages/zanui-css/src/card.css b/packages/zanui-css/src/card.css
index 564e4ca68..2cc36085e 100644
--- a/packages/zanui-css/src/card.css
+++ b/packages/zanui-css/src/card.css
@@ -1,6 +1,6 @@
 @import "./mixins/ellipsis.css";
 
-@component-namespace z {
+@component-namespace zan {
   @b card {
     padding: 5px 15px;
     background: #FAFAFA;
@@ -27,7 +27,7 @@
         display: table;
         height: 90px;
 
-        .z-card__info {
+        .zan-card__info {
           display: table-cell;
           vertical-align: middle;
         }
@@ -80,7 +80,7 @@
       right: 15px;
       bottom: 5px;
 
-      .z-button {
+      .zan-button {
         margin-left: 5px;
       }
     }
diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css
index 06a00c6e9..350c5026a 100644
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -1,7 +1,7 @@
 @import "./common/var.css";
 @import "./mixins/border_retina.css";
 
-@component-namespace z {
+@component-namespace zan {
   @b cell-group {
     padding-left: 10px;
     position: relative;
diff --git a/packages/zanui-css/src/common/var.css b/packages/zanui-css/src/common/var.css
index be5f36a74..2b9eb4803 100644
--- a/packages/zanui-css/src/common/var.css
+++ b/packages/zanui-css/src/common/var.css
@@ -33,7 +33,7 @@ $button-disabled-border-color: #cacaca;
 
 :root{
 
-  /* z-index
+  /* zan-index
  -------------------------- */
   --index-normal: 1;
   --index-top: 1000;
diff --git a/packages/zanui-css/src/dialog.css b/packages/zanui-css/src/dialog.css
index ad3ab3ffc..8f0012cb9 100644
--- a/packages/zanui-css/src/dialog.css
+++ b/packages/zanui-css/src/dialog.css
@@ -1,6 +1,6 @@
 @import "./mixins/border_retina.css";
 
-@component-namespace z {
+@component-namespace zan {
   @b dialog-wrapper {
     position: absolute;
   }
@@ -52,11 +52,11 @@
       overflow: hidden;
 
       @when twobtn {
-        .z-dialog__btn {
+        .zan-dialog__btn {
           width: 50%;
         }
 
-        .z-dialog__cancel {
+        .zan-dialog__cancel {
           &::after {
             @mixin border-retina (right);
           }
diff --git a/packages/zanui-css/src/field.css b/packages/zanui-css/src/field.css
index 4b82672b3..a6ade3130 100644
--- a/packages/zanui-css/src/field.css
+++ b/packages/zanui-css/src/field.css
@@ -1,42 +1,42 @@
 @import "./common/var.css";
 @import "./mixins/border_retina.css";
 
-@component-namespace z {
+@component-namespace zan {
   @b field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .z-field__control {
+      .zan-field__control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .z-cell__title {
+      .zan-cell__title {
         display: none;
       }
 
-      .z-cell__value {
+      .zan-cell__value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .z-cell__title,
-    .z-cell__value {
+    .zan-cell__title,
+    .zan-cell__value {
       float: none;
       box-sizing: border-box;
     }
 
-    .z-cell__title {
+    .zan-cell__title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .z-cell__value {
+    .zan-cell__value {
       width: 100%;
       padding-left: 90px;
     }
diff --git a/packages/zanui-css/src/icon.css b/packages/zanui-css/src/icon.css
index afdc91bc2..7d5daddb7 100644
--- a/packages/zanui-css/src/icon.css
+++ b/packages/zanui-css/src/icon.css
@@ -9,10 +9,10 @@
        url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
 }
 
-.zui-icon {
+.zan-icon {
     display: inline-block;
 }
-.zui-icon::before {
+.zan-icon::before {
   font-family: "zuiicon" !important;
   font-style: normal;
   font-weight: normal;
@@ -39,7 +39,7 @@
 
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  -mozan-osx-font-smoothing: grayscale;
 
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
@@ -47,20 +47,20 @@
 /* DO NOT EDIT! Generated by fount */
 
 
-.zui-icon-album:before { content: '\e800'; } /* '' */
-.zui-icon-arrow:before { content: '\e801'; } /* '' */
-.zui-icon-camera:before { content: '\e802'; } /* '' */
-.zui-icon-certificate:before { content: '\e803'; } /* '' */
-.zui-icon-check:before { content: '\e804'; } /* '' */
-.zui-icon-checked:before { content: '\e805'; } /* '' */
-.zui-icon-close:before { content: '\e806'; } /* '' */
-.zui-icon-gift:before { content: '\e807'; } /* '' */
-.zui-icon-home:before { content: '\e808'; } /* '' */
-.zui-icon-location:before { content: '\e809'; } /* '' */
-.zui-icon-message:before { content: '\e80a'; } /* '' */
-.zui-icon-send:before { content: '\e80b'; } /* '' */
-.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */
-.zui-icon-sign:before { content: '\e80d'; } /* '' */
-.zui-icon-store:before { content: '\e80e'; } /* '' */
-.zui-icon-topay:before { content: '\e80f'; } /* '' */
-.zui-icon-tosend:before { content: '\e810'; } /* '' */
\ No newline at end of file
+.zan-icon-album:before { content: '\e800'; } /* '' */
+.zan-icon-arrow:before { content: '\e801'; } /* '' */
+.zan-icon-camera:before { content: '\e802'; } /* '' */
+.zan-icon-certificate:before { content: '\e803'; } /* '' */
+.zan-icon-check:before { content: '\e804'; } /* '' */
+.zan-icon-checked:before { content: '\e805'; } /* '' */
+.zan-icon-close:before { content: '\e806'; } /* '' */
+.zan-icon-gift:before { content: '\e807'; } /* '' */
+.zan-icon-home:before { content: '\e808'; } /* '' */
+.zan-icon-location:before { content: '\e809'; } /* '' */
+.zan-icon-message:before { content: '\e80a'; } /* '' */
+.zan-icon-send:before { content: '\e80b'; } /* '' */
+.zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
+.zan-icon-sign:before { content: '\e80d'; } /* '' */
+.zan-icon-store:before { content: '\e80e'; } /* '' */
+.zan-icon-topay:before { content: '\e80f'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */
\ No newline at end of file
diff --git a/packages/zanui-css/src/loading.css b/packages/zanui-css/src/loading.css
index b4b4a4f4b..f9fad8428 100644
--- a/packages/zanui-css/src/loading.css
+++ b/packages/zanui-css/src/loading.css
@@ -19,7 +19,7 @@
   }
 }
 
-@component-namespace z {
+@component-namespace zan {
   @b loading { 
     height: 30px;
     width: 30px;
diff --git a/packages/zanui-css/src/panel.css b/packages/zanui-css/src/panel.css
index 1baa903c7..9bea2ef7f 100644
--- a/packages/zanui-css/src/panel.css
+++ b/packages/zanui-css/src/panel.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
   @b panel {
     background: #fff;
     border-top: 1px solid #E5E5E5;
diff --git a/packages/zanui-css/src/picker.css b/packages/zanui-css/src/picker.css
index 05aa9d123..93ad8a1da 100644
--- a/packages/zanui-css/src/picker.css
+++ b/packages/zanui-css/src/picker.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
   @b picker {
     overflow: hidden;
 
@@ -11,26 +11,26 @@
       overflow: hidden;
 
       @m 1 {
-        .z-picker-column {
+        .zan-picker-column {
           width: 100%;
         }
       }
 
       @m 2 {
-        .z-picker-column {
+        .zan-picker-column {
           width: 50%;
         }
       }
 
       @m 3 {
-        .z-picker-column {
+        .zan-picker-column {
           width: 33.333%;
         }
       }
     }
   }
 
-  .z-picker-center-highlight {
+  .zan-picker-center-highlight {
     box-sizing: border-box;
     position: absolute;
     left: 0;
@@ -40,26 +40,26 @@
     pointer-events: none;
   }
 
-  .z-picker-center-highlight:before,
-  .z-picker-center-highlight:after {
+  .zan-picker-center-highlight:before,
+  .zan-picker-center-highlight:after {
     content: '';
     position: absolute;
     height: 1px;
     width: 100%;
     background-color: #eaeaea;
     display: block;
-    z-index: 15;
+    zan-index: 15;
     transform: scaleY(0.5);
   }
 
-  .z-picker-center-highlight:before {
+  .zan-picker-center-highlight:before {
     left: 0;
     top: 0;
     bottom: auto;
     right: auto;
   }
 
-  .z-picker-center-highlight:after {
+  .zan-picker-center-highlight:after {
     left: 0;
     bottom: 0;
     right: auto;
diff --git a/packages/zanui-css/src/popup.css b/packages/zanui-css/src/popup.css
index cb42d8dcd..6f478f087 100644
--- a/packages/zanui-css/src/popup.css
+++ b/packages/zanui-css/src/popup.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
   @b modal {
     position: fixed;
     width: 100%;
diff --git a/packages/zanui-css/src/radio.css b/packages/zanui-css/src/radio.css
index a7816fd89..9e84d7269 100644
--- a/packages/zanui-css/src/radio.css
+++ b/packages/zanui-css/src/radio.css
@@ -1,6 +1,6 @@
 @import "./common/var.css";
 
-@component-namespace z {
+@component-namespace zan {
   @b radio {
     @when disabled {
       .zui-icon {
diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css
index 9f35d5f79..8ad4d1937 100644
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
   @b steps {
     color: red;
   }
diff --git a/packages/zanui-css/src/switch.css b/packages/zanui-css/src/switch.css
index 7802cb39a..ba9ffd8de 100644
--- a/packages/zanui-css/src/switch.css
+++ b/packages/zanui-css/src/switch.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
   @component switch { 
     height: 29px;
     width: 49px;