From f55ddcafa9dc3c7d73eb897a6796bd1a535df1f8 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Sep 2020 14:35:18 +0800
Subject: [PATCH] docs(slider): merge vertical demo

---
 src/slider/README.md       | 17 ++++-------------
 src/slider/README.zh-CN.md | 21 ++++++---------------
 src/slider/demo/index.vue  | 25 ++++++++++++-------------
 3 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/src/slider/README.md b/src/slider/README.md
index c95deda09..4a7276ed3 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -110,18 +110,9 @@ export default {
 ### Vertical
 
 ```html
-<div :style="{ height: '100px' }">
+<div :style="{ height: '150px' }">
   <van-slider v-model="value" vertical />
-</div>
-```
-
-### Vertical, Dual thumb mode
-
-Add `range` and `vertical` attributes at the same time, and make sure that the value of `value` is an array
-
-```html
-<div :style="{ height: '120px' }">
-  <van-slider v-model="value" range vertical @change="onChange" />
+  <van-slider v-model="value2" range vertical @change="onChange" />
 </div>
 ```
 
@@ -131,8 +122,8 @@ import { Toast } from 'vant';
 export default {
   data() {
     return {
-      // value must be an array
-      value: [10, 50],
+      value: 50,
+      value2: [10, 50],
     };
   },
   methods: {
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index 4eb86f6da..b1ad88c79 100644
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@@ -109,21 +109,12 @@ export default {
 
 ### 垂直方向
 
-Slider 垂直展示时，高度为 100% 父元素高度
+设置 `vertical` 属性后，滑块会垂直展示，且高度为 100% 父元素高度。
 
 ```html
-<div :style="{ height: '120px' }">
-  <van-slider v-model="value" vertical />
-</div>
-```
-
-### 垂直方向，双滑块
-
-同时添加`range`和`vertical`属性，并确保`value`的值是一个数组
-
-```html
-<div :style="{ height: '120px' }">
-  <van-slider v-model="value" range vertical @change="onChange" />
+<div :style="{ height: '150px' }">
+  <van-slider v-model="value" vertical @change="onChange" />
+  <van-slider v-model="value2" range vertical @change="onChange" />
 </div>
 ```
 
@@ -133,8 +124,8 @@ import { Toast } from 'vant';
 export default {
   data() {
     return {
-      // 双滑块模式时，值必须是数组
-      value: [10, 50],
+      value: 50,
+      value2: [10, 50],
     };
   },
   methods: {
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index eee0e9317..5d8302ad4 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -38,14 +38,15 @@
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="t('vertical')">
-      <div :style="{ height: '120px', paddingLeft: '30px' }">
+      <div :style="{ height: '150px', paddingLeft: '30px' }">
         <van-slider v-model="value8" vertical @change="onChange" />
-      </div>
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="t('vertical2')">
-      <div :style="{ height: '120px', paddingLeft: '30px' }">
-        <van-slider v-model="value9" range vertical @change="onChange" />
+        <van-slider
+          v-model="value9"
+          range
+          vertical
+          style="margin-left: 100px;"
+          @change="onChange"
+        />
       </div>
     </demo-block>
   </demo-section>
@@ -55,28 +56,26 @@
 export default {
   i18n: {
     'zh-CN': {
+      text: '当前值：',
       title1: '基础用法',
       title2: '双滑块',
       title3: '指定选择范围',
       title4: '禁用',
       title5: '指定步长',
+      vertical: '垂直方向',
       customStyle: '自定义样式',
       customButton: '自定义按钮',
-      text: '当前值：',
-      vertical: '垂直方向',
-      vertical2: '垂直方向，双滑块',
     },
     'en-US': {
+      text: 'Current value: ',
       title1: 'Basic Usage',
       title2: 'Dual thumb mode',
       title3: 'Range',
       title4: 'Disabled',
       title5: 'Step size',
+      vertical: 'Vertical',
       customStyle: 'Custom Style',
       customButton: 'Custom Button',
-      text: 'Current value: ',
-      vertical: 'Vertical',
-      vertical2: 'Vertical, Dual thumb mode',
     },
   },