docs: make document more compact

src/calendar/README.md

@@ -21,7 +21,6 @@ The `confirm` event will be triggered after the date selection is completed
 
 ```html
 <van-cell title="Select Single Date" :value="date" @click="show = true" />
-
 <van-calendar v-model="show" @confirm="onConfirm" />
 ```
 
@@ -33,7 +32,6 @@ export default {
       show: false
     };
   },
-
   methods: {
     formatDate(date) {
       return `${date.getMonth() + 1}/${date.getDate()}`;
@@ -52,7 +50,6 @@ You can select a date range after setting `type` to` range`. In range mode, the
 
 ```html
 <van-cell title="Select Date Range" :value="date" @click="show = true" />
-
 <van-calendar v-model="show" type="range" @confirm="onConfirm" />
 ```
 
@@ -64,7 +61,6 @@ export default {
       show: false
     };
   },
-
   methods: {
     formatDate(date) {
       return `${date.getMonth() + 1}/${date.getDate()}`;

src/calendar/README.zh-CN.md

@@ -21,7 +21,6 @@ Vue.use(Calendar);
 
 ```html
 <van-cell title="选择单个日期" :value="date" @click="show = true" />
-
 <van-calendar v-model="show" @confirm="onConfirm" />
 ```
 
@@ -33,7 +32,6 @@ export default {
       show: false
     };
   },
-
   methods: {
     formatDate(date) {
       return `${date.getMonth() + 1}/${date.getDate()}`;
@@ -52,7 +50,6 @@ export default {
 
 ```html
 <van-cell title="选择日期区间" :value="date" @click="show = true" />
-
 <van-calendar v-model="show" type="range" @confirm="onConfirm" />
 ```
 
@@ -64,7 +61,6 @@ export default {
       show: false
     };
   },
-
   methods: {
     formatDate(date) {
       return `${date.getMonth() + 1}/${date.getDate()}`;

src/collapse/README.md

@@ -64,11 +64,7 @@ export default {
     <div slot="title">Title1 <van-icon name="question-o" /></div>
     Content
   </van-collapse-item>
-  <van-collapse-item
+  <van-collapse-item title="Title2" name="2" icon="shop-o">
-    title="Title2"
-    name="2"
-    icon="shop-o"
-  >
     Content
   </van-collapse-item>
 </van-collapse>

src/collapse/README.zh-CN.md

@@ -64,12 +64,7 @@ export default {
     <div slot="title">标题1 <van-icon name="question-o" /></div>
     内容
   </van-collapse-item>
-
+  <van-collapse-item title="标题2" name="2" icon="shop-o">
-  <van-collapse-item
-    title="标题2"
-    name="2"
-    icon="shop-o"
-  >
     内容
   </van-collapse-item>
 </van-collapse>

src/count-down/README.md

@@ -30,20 +30,13 @@ export default {
 ### Custom Format
 
 ```html
-<van-count-down
+<van-count-down :time="time" format="DD Day, HH:mm:ss" />
-  :time="time"
-  format="DD Day, HH:mm:ss"
-/>
 ```
 
 ### Millisecond
 
 ```html
-<van-count-down
+<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
-  millisecond
-  :time="time"
-  format="HH:mm:ss:SS"
-/>
 ```
 
 ### Custom Style

src/count-down/README.zh-CN.md

@@ -34,10 +34,7 @@ export default {
 通过`format`属性设置倒计时文本的内容
 
 ```html
-<van-count-down
+<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
-  :time="time"
-  format="DD 天 HH 时 mm 分 ss 秒"
-/>
 ```
 
 ### 毫秒级渲染
@@ -45,11 +42,7 @@ export default {
 倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
 
 ```html
-<van-count-down
+<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
-  millisecond
-  :time="time"
-  format="HH:mm:ss:SS"
-/>
 ```
 
 ### 自定义样式

src/coupon-list/README.md

@@ -21,7 +21,6 @@ Vue.use(CouponList);
   :chosen-coupon="chosenCoupon"
   @click="showList = true"
 />
-
 <!-- Coupon List -->
 <van-popup
   v-model="showList"
@@ -60,7 +59,6 @@ export default {
       disabledCoupons: [coupon]
     }
   },
-
   methods: {
     onChange(index) {
       this.showList = false;

src/coupon-list/README.zh-CN.md

@@ -21,7 +21,6 @@ Vue.use(CouponList);
   :chosen-coupon="chosenCoupon"
   @click="showList = true"
 />
-
 <!-- 优惠券列表 -->
 <van-popup
   v-model="showList"
@@ -60,7 +59,6 @@ export default {
       disabledCoupons: [coupon]
     }
   },
-
   methods: {
     onChange(index) {
       this.showList = false;

src/dialog/README.md

@@ -82,11 +82,7 @@ export default {
 If you need to render vue components within a dialog, you can use dialog component.
 
 ```html
-<van-dialog
+<van-dialog v-model="show" title="Title" show-cancel-button>
-  v-model="show"
-  title="Title"
-  show-cancel-button
->
   <img src="https://img.yzcdn.cn/vant/apple-3.jpg">
 </van-dialog>
 ```

src/dialog/README.zh-CN.md

@@ -108,11 +108,7 @@ export default {
 如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式
 
 ```html
-<van-dialog
+<van-dialog v-model="show" title="标题" show-cancel-button>
-  v-model="show"
-  title="标题"
-  show-cancel-button
->
   <img src="https://img.yzcdn.cn/vant/apple-3.jpg">
 </van-dialog>
 ```

src/dropdown-menu/README.md

@@ -69,7 +69,6 @@ export default {
       ]
     }
   },
-
   methods: {
     onConfirm() {
       this.$refs.item.toggle();

src/dropdown-menu/README.zh-CN.md

@@ -71,7 +71,6 @@ export default {
       ]
     }
   },
-
   methods: {
     onConfirm() {
       this.$refs.item.toggle();

src/image-preview/README.md

@@ -54,11 +54,7 @@ setTimeout(() => {
 ### Component Call
 
 ```html
-<van-image-preview
+<van-image-preview v-model="show" :images="images" @change="onChange">
-  v-model="show"
-  :images="images"
-  @change="onChange"
->
   <template v-slot:index>Page: {{ index }}</template>
 </van-image-preview>
 ```

src/image-preview/README.zh-CN.md

@@ -64,11 +64,7 @@ setTimeout(() => {
 如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
 
 ```html
-<van-image-preview
+<van-image-preview v-model="show" :images="images" @change="onChange">
-  v-model="show"
-  :images="images"
-  @change="onChange"
->
   <template v-slot:index>第{{ index }}页</template>
 </van-image-preview>
 ```

src/list/README.md

@@ -24,11 +24,7 @@ Vue.use(List);
   finished-text="Finished"
   @load="onLoad"
 >
-  <van-cell
+  <van-cell v-for="item in list" :key="item" :title="item" />
-    v-for="item in list"
-    :key="item"
-    :title="item"
-  />
 </van-list>
 ```
 
@@ -68,11 +64,7 @@ export default {
   error-text="Request failed. Click to reload"
   @load="onLoad"
 >
-  <van-cell
+  <van-cell v-for="item in list" :key="item" :title="item" />
-    v-for="item in list"
-    :key="item"
-    :title="item"
-  />
 </van-list>
 ```
 

src/list/README.zh-CN.md

@@ -26,11 +26,7 @@ List 组件通过`loading`和`finished`两个变量控制加载状态，当组
   finished-text="没有更多了"
   @load="onLoad"
 >
-  <van-cell
+  <van-cell v-for="item in list" :key="item" :title="item" />
-    v-for="item in list"
-    :key="item"
-    :title="item"
-  />
 </van-list>
 ```
 
@@ -75,11 +71,7 @@ export default {
   error-text="请求失败，点击重新加载"
   @load="onLoad"
 >
-  <van-cell
+  <van-cell v-for="item in list" :key="item" :title="item" />
-    v-for="item in list"
-    :key="item"
-    :title="item"
-  />
 </van-list>
 ```
 

src/notice-bar/README.md

@@ -14,10 +14,7 @@ Vue.use(NoticeBar);
 ### Basic Usage
 
 ```html
-<van-notice-bar
+<van-notice-bar text="Notice Content" left-icon="volume-o" />
-  text="Notice Content"
-  left-icon="volume-o"
-/>
 ```
 
 ### Disable scroll

src/notice-bar/README.zh-CN.md

@@ -14,10 +14,7 @@ Vue.use(NoticeBar);
 ### 基础用法
 
 ```html
-<van-notice-bar
+<van-notice-bar text="通知内容" left-icon="volume-o" />
-  text="通知内容"
-  left-icon="volume-o"
-/>
 ```
 
 ### 禁用滚动

src/number-keyboard/README.md

@@ -17,7 +17,6 @@ Vue.use(NumberKeyboard);
 <van-button @touchstart.stop="show = true">
   Show Keyboard
 </van-button>
-
 <van-number-keyboard
   :show="show"
   extra-key="."

src/number-keyboard/README.zh-CN.md

@@ -21,7 +21,6 @@ Vue.use(NumberKeyboard);
 <van-button @touchstart.stop="show = true">
   弹出默认键盘
 </van-button>
-
 <van-number-keyboard
   :show="show"
   extra-key="."

src/overlay/README.md

@@ -15,7 +15,6 @@ Vue.use(Overlay);
 
 ```html
 <van-button type="primary" text="Show Overlay" @click="show = true" />
-
 <van-overlay :show="show" @click="show = false" />
 ```
 

src/overlay/README.zh-CN.md

@@ -19,7 +19,6 @@ Vue.use(Overlay);
 
 ```html
 <van-button type="primary" text="显示遮罩层" @click="show = true" />
-
 <van-overlay :show="show" @click="show = false" />
 ```
 

src/password-input/README.md

@@ -26,7 +26,6 @@ Vue.use(NumberKeyboard);
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
-
 <!-- NumberKeyboard -->
 <van-number-keyboard
   :show="showKeyboard"
@@ -44,7 +43,6 @@ export default {
       showKeyboard: true
     };
   },
-
   methods: {
     onInput(key) {
       this.value = (this.value + key).slice(0, 6);
@@ -110,7 +108,6 @@ export default {
       errorInfo: ''
     };
   },
-
   methods: {
     onInput(key) {
       this.value = (this.value + key).slice(0, 6);

src/password-input/README.zh-CN.md

@@ -26,7 +26,6 @@ Vue.use(NumberKeyboard);
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
-
 <!-- 数字键盘 -->
 <van-number-keyboard
   :show="showKeyboard"
@@ -44,7 +43,6 @@ export default {
       showKeyboard: true
     };
   },
-
   methods: {
     onInput(key) {
       this.value = (this.value + key).slice(0, 6);
@@ -91,7 +89,6 @@ export default {
   :focused="showKeyboard"
   @focus="showKeyboard = true"
 />
-
 <!-- 数字键盘 -->
 <van-number-keyboard
   :show="showKeyboard"
@@ -110,7 +107,6 @@ export default {
       errorInfo: ''
     };
   },
-
   methods: {
     onInput(key) {
       this.value = (this.value + key).slice(0, 6);

src/picker/README.md

@@ -91,7 +91,6 @@ export default {
   placeholder="Choose City"
   @click="showPicker = true"
 />
-
 <van-popup v-model="showPicker" position="bottom">
   <van-picker
     show-toolbar

src/picker/README.zh-CN.md

@@ -97,7 +97,6 @@ export default {
   placeholder="选择城市"
   @click="showPicker = true"
 />
-
 <van-popup v-model="showPicker" position="bottom">
   <van-picker
     show-toolbar

src/popup/README.md

@@ -15,7 +15,6 @@ Vue.use(Popup);
 
 ```html
 <van-cell is-link @click="showPopup">Show Popup</van-cell>
-
 <van-popup v-model="show">Content</van-popup>
 ```
 
@@ -56,7 +55,6 @@ Use `position` prop to set popup display position
   position="bottom"
   :style="{ height: '20%' }"
 />
-
 <!-- Custom Icon -->
 <van-popup
   v-model="show"
@@ -65,7 +63,6 @@ Use `position` prop to set popup display position
   position="bottom"
   :style="{ height: '20%' }"
 />
-
 <!-- Icon Position -->
 <van-popup
   v-model="show"

src/popup/README.zh-CN.md

@@ -21,7 +21,6 @@ Vue.use(Popup);
 
 ```html
 <van-cell is-link @click="showPopup">展示弹出层</van-cell>
-
 <van-popup v-model="show">内容</van-popup>
 ```
 
@@ -64,7 +63,6 @@ export default {
   position="bottom"
   :style="{ height: '20%' }"
 />
-
 <!-- 自定义图标 -->
 <van-popup
   v-model="show"
@@ -73,7 +71,6 @@ export default {
   position="bottom"
   :style="{ height: '20%' }"
 />
-
 <!-- 图标位置 -->
 <van-popup
   v-model="show"

src/progress/README.md

@@ -42,13 +42,11 @@ Use `pivot-text` to custom text，use `color` to custom bar color
   color="#f2826a"
   :percentage="25"
 />
-
 <van-progress
   pivot-text="Red"
   color="#ee0a24"
   :percentage="50"
 />
-
 <van-progress
   :percentage="75"
   pivot-text="Purple"

src/progress/README.zh-CN.md

@@ -45,13 +45,11 @@ Vue.use(Progress);
   color="#f2826a"
   :percentage="25"
 />
-
 <van-progress
   pivot-text="红色"
   color="#ee0a24"
   :percentage="50"
 />
-
 <van-progress
   :percentage="75"
   pivot-text="紫色"

src/slider/README.md

@@ -65,17 +65,23 @@ export default {
 ### Custom button
 
 ```html
-<van-slider
+<van-slider v-model="value" active-color="#ee0a24">
-  v-model="value"
+  <div slot="button" class="custom-button">
-  active-color="#ee0a24"
->
-  <div
-    slot="button"
-    class="custom-button"
-  >
     {{ value }}
   </div>
 </van-slider>
+
+<style>
+.custom-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: #ee0a24;
+  border-radius: 100px;
+}
+</style>
 ```
 
 ### Vertical

src/slider/README.zh-CN.md

@@ -65,17 +65,23 @@ export default {
 ### 自定义按钮
 
 ```html
-<van-slider
+<van-slider v-model="value" active-color="#ee0a24">
-  v-model="value"
+  <div slot="button" class="custom-button">
-  active-color="#ee0a24"
->
-  <div
-    slot="button"
-    class="custom-button"
-  >
     {{ value }}
   </div>
 </van-slider>
+
+<style>
+.custom-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: #ee0a24;
+  border-radius: 100px;
+}
+</style>
 ```
 
 ### 垂直方向

src/switch/README.md

@@ -64,7 +64,6 @@ export default {
       checked: true
     };
   },
-
   methods: {
     onInput(checked) {
       Dialog.confirm({

src/switch/README.zh-CN.md

@@ -76,7 +76,6 @@ export default {
       checked: true
     };
   },
-
   methods: {
     onInput(checked) {
       Dialog.confirm({

src/tabbar/README.md

@@ -143,18 +143,10 @@ export default {
 <router-view />
 
 <van-tabbar route>
-  <van-tabbar-item
+  <van-tabbar-item replace to="/home" icon="home-o">
-    replace
-    to="/home"
-    icon="home-o"
-  >
     Tab
   </van-tabbar-item>
-  <van-tabbar-item
+  <van-tabbar-item replace to="/search" icon="search">
-    replace
-    to="/search"
-    icon="search"
-  >
     Tab
   </van-tabbar-item>
 </van-tabbar>

src/tabbar/README.zh-CN.md

@@ -150,18 +150,10 @@ export default {
 <router-view />
 
 <van-tabbar route>
-  <van-tabbar-item
+  <van-tabbar-item replace to="/home" icon="home-o">
-    replace
-    to="/home"
-    icon="home-o"
-  >
     标签
   </van-tabbar-item>
-  <van-tabbar-item
+  <van-tabbar-item replace to="/search" icon="search">
-    replace
-    to="/search"
-    icon="search"
-  >
     标签
   </van-tabbar-item>
 </van-tabbar>

src/tree-select/README.md

@@ -61,11 +61,11 @@ export default {
 <van-tree-select
   height="55vw"
   :items="items"
-  :main-active-index.sync="activeIndex"
+  :main-active-index.sync="active"
 >
   <template slot="content">
-    <van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+    <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
-    <van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+    <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
   </template>
 </van-tree-select>
 ```
@@ -74,7 +74,7 @@ export default {
 export default {
   data() {
     return {
-      activeIndex: 0,
+      active: 0,
       items: [{ text: 'Group 1' }, { text: 'Group 2' }]
     }
   }

src/tree-select/README.zh-CN.md

@@ -67,11 +67,11 @@ export default {
 <van-tree-select
   height="55vw"
   :items="items"
-  :main-active-index.sync="activeIndex"
+  :main-active-index.sync="active"
 >
   <template slot="content">
-    <van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+    <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
-    <van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+    <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
   </template>
 </van-tree-select>
 ```
@@ -80,7 +80,7 @@ export default {
 export default {
   data() {
     return {
-      activeIndex: 0,
+      active: 0,
       items: [{ text: '分组 1' }, { text: '分组 2' }]
     }
   }

src/uploader/README.md

@@ -89,7 +89,6 @@ export default {
         Toast('Please upload an image in jpg format');
         return false;
       }
-    
       return true;
     },
     asyncBeforeRead(file) {

src/uploader/README.zh-CN.md

@@ -104,7 +104,6 @@ export default {
         Toast('请上传 jpg 格式图片');
         return false;
       }
-    
       return true;
     },
     // 返回 Promise