diff --git a/docs/examples-dist/badge.vue b/docs/examples-dist/badge.vue
index 842d0937c..7e89ec325 100644
--- a/docs/examples-dist/badge.vue
+++ b/docs/examples-dist/badge.vue
@@ -1,9 +1,17 @@
 <template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
-                <zan-badge-group :active-key="activeKey">
-  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+                <zan-badge-group>
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+</zan-badge-group>
+
+              </example-block><example-block title="选中某个badge">
+                <zan-badge-group :active-key="2">
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
 </zan-badge-group>
 
               </example-block></section></template>
diff --git a/docs/examples-dist/cell.vue b/docs/examples-dist/cell.vue
index c0649e6a0..a7dd6798d 100644
--- a/docs/examples-dist/cell.vue
+++ b/docs/examples-dist/cell.vue
@@ -4,11 +4,6 @@
   <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
 </zan-cell-group>
 
-              </example-block><example-block title="带*号，标明必填">
-                <zan-cell-group>
-  <zan-cell title="单元格1" required></zan-cell>
-</zan-cell-group>
-
               </example-block><example-block title="标题带描述信息">
                 <zan-cell-group>
   <zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
@@ -40,10 +35,18 @@
 
               </example-block></section></template>
 <style>
-.official-img {
-  width: 31px;
-  vertical-align: middle;
-  border: 0;
+@component-namespace demo {
+  @b card {
+    .official-img {
+      width: 31px;
+      vertical-align: middle;
+      border: 0;
+    }
+
+    .examples {
+      background-color: #fff;
+    }
+  }
 }
 </style>
 <script>
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
index ff83d7b07..d6a92785a 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -1,40 +1,32 @@
-<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
-                <div class="demo-loading">
-  <h2 class="demo-sub-title">渐变深色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">渐变浅色spinner</h2>
-  <div class="demo-loading__example demo-loading__example--with-bg">
-    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
-  </div>
+<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="渐变深色spinner">
+                <zan-loading class="some-customized-class"></zan-loading>
+
+              </example-block><example-block title="">
+                <div class="demo-loading__example demo-loading__example--with-bg">
+  <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
 </div>
 
+              </example-block><example-block title="">
+                <zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
+<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
+
               </example-block></section></template>
 <style>
-.demo-loading__example{
-  width: 30px;
-  height: 30px;
-  padding: 20px;
-  margin: auto;
-  border-radius: 5px;
-  border: 1px solid transparent;
-}
+@component-namespace demo {
+  @b loading {
+    .zan-loading {
+      margin: 0 auto;
+    }
 
-.demo-loading__example--with-bg {
-  background-color: rgba(0, 0, 0, 0.5);
-}
+    .circle-loading {
+      margin: 20px auto;
+    }
 
-.demo-loading {
-  padding: 0 20px;
+    .demo-loading__example--with-bg {
+      background-color: rgba(0, 0, 0, 0.5);
+      margin-bottom: 10px;
+    }
+  }
 }
 </style>
 <script>
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index 678d1d2c5..4d1a8b88c 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -20,7 +20,7 @@
   <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
 </div>
 
-              </example-block><example-block title="自定义颜色">
+              </example-block><example-block title="自定义颜色和文字">
                 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
 </div>
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
index 0debad168..a94a4eb5a 100644
--- a/docs/examples-dist/search.vue
+++ b/docs/examples-dist/search.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
-                <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+                <zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
 
 
               </example-block></section></template>
@@ -10,6 +10,9 @@ export default {
   methods: {
     goSearch(value) {
       alert(value)
+    },
+    handleChange(value) {
+      console.log(value);
     }
   }
 };
diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue
index 8c4bde264..7d18a79e1 100644
--- a/docs/examples-dist/steps.vue
+++ b/docs/examples-dist/steps.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
-                <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+                <zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
   <zan-step>商家接单</zan-step>
   <zan-step>买家提货</zan-step>
diff --git a/docs/examples-dist/tag.vue b/docs/examples-dist/tag.vue
index 717c19bdc..4f9b86bc6 100644
--- a/docs/examples-dist/tag.vue
+++ b/docs/examples-dist/tag.vue
@@ -1,7 +1,7 @@
 <template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
                 <div class="tags-container">
   <zan-tag>返现</zan-tag>
-  <zan-tag :plain="true">返现</zan-tag>
+  <zan-tag plain="">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
@@ -12,18 +12,18 @@
               </example-block><example-block title="高级用法">
                 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
-  <zan-tag :plain="true" type="danger">返现</zan-tag>
+  <zan-tag plain="" type="danger">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="primary">返现</zan-tag>
-  <zan-tag :plain="true" type="primary">返现</zan-tag>
+  <zan-tag plain="" type="primary">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="success">返现</zan-tag>
-  <zan-tag :plain="true" type="success">返现</zan-tag>
+  <zan-tag plain="" type="success">返现</zan-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger" :mark="true">返现</zan-tag>
+  <zan-tag type="danger" mark="">返现</zan-tag>
 </div>
 
               </example-block></section></template>
diff --git a/docs/examples-dist/toast.vue b/docs/examples-dist/toast.vue
index 4627ab266..e158fb670 100644
--- a/docs/examples-dist/toast.vue
+++ b/docs/examples-dist/toast.vue
@@ -60,9 +60,9 @@ export default {
         type: 'success',
         message: leftSec.toString()
       });
-      window.setInterval(() => {
+      const id = window.setInterval(() => {
         if (leftSec <= 1) {
-          window.clearInterval();
+          window.clearInterval(id);
           toast.message = '跳转中...'
           return;
         }