mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(slider): merge vertical demo
This commit is contained in:
parent
a745709932
commit
f55ddcafa9
@ -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: {
|
||||
|
@ -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: {
|
||||
|
@ -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',
|
||||
},
|
||||
},
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user