blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(slider): merge vertical demo

Browse Source
This commit is contained in:
chenjiahan 2020-09-13 14:35:18 +08:00
parent a745709932
commit f55ddcafa9
3 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/slider/README.md
View File

@ -110,18 +110,9 @@ export default {
### Vertical ### Vertical
```html ```html
<div :style="{ height: '100px' }"> <div :style="{ height: '150px' }">
<van-slider v-model="value" vertical /> <van-slider v-model="value" vertical />
</div> <van-slider v-model="value2" range vertical @change="onChange" />
```
### 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" />
</div> </div>
``` ```
@ -131,8 +122,8 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
// value must be an array value: 50,
value: [10, 50], value2: [10, 50],
}; };
}, },
methods: { methods: {

21
src/slider/README.zh-CN.md
View File

@ -109,21 +109,12 @@ export default {
### 垂直方向 ### 垂直方向
Slider 垂直展示时，高度为 100% 父元素高度 设置 `vertical` 属性后，滑块会垂直展示，且高度为 100% 父元素高度。
```html ```html
<div :style="{ height: '120px' }"> <div :style="{ height: '150px' }">
<van-slider v-model="value" vertical /> <van-slider v-model="value" vertical @change="onChange" />
</div> <van-slider v-model="value2" range vertical @change="onChange" />
```
### 垂直方向，双滑块
同时添加`range`和`vertical`属性，并确保`value`的值是一个数组
```html
<div :style="{ height: '120px' }">
<van-slider v-model="value" range vertical @change="onChange" />
</div> </div>
``` ```
@ -133,8 +124,8 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
// 双滑块模式时，值必须是数组 value: 50,
value: [10, 50], value2: [10, 50],
}; };
}, },
methods: { methods: {

25
src/slider/demo/index.vue
View File

@ -38,14 +38,15 @@
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('vertical')"> <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" /> <van-slider v-model="value8" vertical @change="onChange" />
</div> <van-slider
</demo-block> v-model="value9"
range
<demo-block v-if="!isWeapp" :title="t('vertical2')"> vertical
<div :style="{ height: '120px', paddingLeft: '30px' }"> style="margin-left: 100px;"
<van-slider v-model="value9" range vertical @change="onChange" /> @change="onChange"
/>
</div> </div>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -55,28 +56,26 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
text: '当前值：',
title1: '基础用法', title1: '基础用法',
title2: '双滑块', title2: '双滑块',
title3: '指定选择范围', title3: '指定选择范围',
title4: '禁用', title4: '禁用',
title5: '指定步长', title5: '指定步长',
vertical: '垂直方向',
customStyle: '自定义样式', customStyle: '自定义样式',
customButton: '自定义按钮', customButton: '自定义按钮',
text: '当前值：',
vertical: '垂直方向',
vertical2: '垂直方向，双滑块',
}, },
'en-US': { 'en-US': {
text: 'Current value: ',
title1: 'Basic Usage', title1: 'Basic Usage',
title2: 'Dual thumb mode', title2: 'Dual thumb mode',
title3: 'Range', title3: 'Range',
title4: 'Disabled', title4: 'Disabled',
title5: 'Step size', title5: 'Step size',
vertical: 'Vertical',
customStyle: 'Custom Style', customStyle: 'Custom Style',
customButton: 'Custom Button', customButton: 'Custom Button',
text: 'Current value: ',
vertical: 'Vertical',
vertical2: 'Vertical, Dual thumb mode',
}, },
}, },