mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Slider: add button slot (#2373)
This commit is contained in:
neverland
GitHub
parent
728a0e26c5
commit
282d8ba27b
@ -27,10 +27,28 @@
|
||||
<van-slider
|
||||
v-model="value4"
|
||||
:step="10"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
<van-slider
|
||||
v-model="value5"
|
||||
bar-height="4px"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customButton')">
|
||||
<van-slider v-model="value6">
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
>
|
||||
{{ value6 }}
|
||||
</div>
|
||||
</van-slider>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -42,6 +60,8 @@ export default {
|
||||
title2: '指定选择范围',
|
||||
title3: '禁用',
|
||||
title4: '指定步长',
|
||||
customStyle: '自定义样式',
|
||||
customButton: '自定义按钮',
|
||||
text: '当前值：'
|
||||
},
|
||||
'en-US': {
|
||||
@ -49,6 +69,8 @@ export default {
|
||||
title2: 'Range',
|
||||
title3: 'Disabled',
|
||||
title4: 'Step size',
|
||||
customStyle: 'Custom Style',
|
||||
customButton: 'Custom Button',
|
||||
text: 'Current value: '
|
||||
}
|
||||
},
|
||||
@ -58,7 +80,9 @@ export default {
|
||||
value1: 50,
|
||||
value2: 50,
|
||||
value3: 50,
|
||||
value4: 50
|
||||
value4: 50,
|
||||
value5: 50,
|
||||
value6: 50
|
||||
};
|
||||
},
|
||||
|
||||
@ -71,11 +95,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-slider {
|
||||
user-select: none;
|
||||
|
||||
.van-slider {
|
||||
margin: 0 15px 30px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 26px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -45,7 +45,26 @@ export default {
|
||||
#### Step size
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" :step="10" bar-height="4px" />
|
||||
<van-slider v-model="value" :step="10" />
|
||||
```
|
||||
|
||||
#### Custom style
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" bar-height="4px" />
|
||||
```
|
||||
|
||||
#### Custom button
|
||||
|
||||
```html
|
||||
<van-slider v-model="value">
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
>
|
||||
{{ value }}
|
||||
</div>
|
||||
</van-slider>
|
||||
```
|
||||
|
||||
### API
|
||||
@ -64,3 +83,9 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered after value change | value: current rate |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| button | Custom button |
|
||||
|
||||
@ -12,24 +12,27 @@
|
||||
}
|
||||
|
||||
&__button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: @white;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
|
||||
|
||||
/* use pseudo element to expand touch area */
|
||||
&::after {
|
||||
content: '';
|
||||
&-wrapper {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
|
||||
/* use pseudo element to expand touch area */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,13 +7,17 @@
|
||||
:class="b('bar')"
|
||||
:style="barStyle"
|
||||
>
|
||||
<span
|
||||
:class="b('button')"
|
||||
<div
|
||||
:class="b('button-wrapper')"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove.prevent.stop="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@touchcancel="onTouchEnd"
|
||||
/>
|
||||
>
|
||||
<slot name="button">
|
||||
<div :class="b('button')" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -4,22 +4,58 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider van-slider--disabled">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:4px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:4px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="custom-button">
|
||||
50
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,24 +2,40 @@
|
||||
|
||||
exports[`click bar 1`] = `
|
||||
<div class="van-slider van-slider--disabled">
|
||||
<div class="van-slider__bar" style="width: 50%; height: 2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width: 50%; height: 2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`click bar 2`] = `
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width: 100%; height: 2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width: 100%; height: 2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag button 1`] = `
|
||||
<div class="van-slider van-slider--disabled">
|
||||
<div class="van-slider__bar" style="width: 50%; height: 2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width: 50%; height: 2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag button 2`] = `
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width: 100%; height: 2px;"><span class="van-slider__button"></span></div>
|
||||
<div class="van-slider__bar" style="width: 100%; height: 2px;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -44,7 +44,26 @@ export default {
|
||||
#### 指定步长
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" :step="10" bar-height="4px" />
|
||||
<van-slider v-model="value" :step="10" />
|
||||
```
|
||||
|
||||
#### 自定义样式
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" bar-height="4px" />
|
||||
```
|
||||
|
||||
#### 自定义按钮
|
||||
|
||||
```html
|
||||
<van-slider v-model="value">
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
>
|
||||
{{ value }}
|
||||
</div>
|
||||
</van-slider>
|
||||
```
|
||||
|
||||
### API
|
||||
@ -63,3 +82,9 @@ export default {
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| change | 进度值改变后触发 | value: 当前进度 |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| button | 自定义滑动按钮 |
|
||||
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| Name | 说明 |
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user