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

[new feature] Slider: add button slot (#2373)

Browse Source
This commit is contained in:
neverland 2018-12-25 21:43:26 +08:00 committed by GitHub
parent 728a0e26c5
commit 282d8ba27b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 175 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/slider/demo/index.vue
View File

@ -27,10 +27,28 @@
<van-slider <van-slider
v-model="value4" v-model="value4"
:step="10" :step="10"
@change="onChange"
/>
</demo-block>
<demo-block :title="$t('customStyle')">
<van-slider
v-model="value5"
bar-height="4px" bar-height="4px"
@change="onChange" @change="onChange"
/> />
</demo-block> </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> </demo-section>
</template> </template>
@ -42,6 +60,8 @@ export default {
title2: '指定选择范围', title2: '指定选择范围',
title3: '禁用', title3: '禁用',
title4: '指定步长', title4: '指定步长',
customStyle: '自定义样式',
customButton: '自定义按钮',
text: '当前值：' text: '当前值：'
}, },
'en-US': { 'en-US': {
@ -49,6 +69,8 @@ export default {
title2: 'Range', title2: 'Range',
title3: 'Disabled', title3: 'Disabled',
title4: 'Step size', title4: 'Step size',
customStyle: 'Custom Style',
customButton: 'Custom Button',
text: 'Current value: ' text: 'Current value: '
} }
}, },
@ -58,7 +80,9 @@ export default {
value1: 50, value1: 50,
value2: 50, value2: 50,
value3: 50, value3: 50,
value4: 50 value4: 50,
value5: 50,
value6: 50
}; };
}, },
@ -71,11 +95,27 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../style/var';
.demo-slider { .demo-slider {
user-select: none; user-select: none;
.van-slider { .van-slider {
margin: 0 15px 30px; 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> </style>

27
packages/slider/en-US.md
View File

@ -45,7 +45,26 @@ export default {
#### Step size #### Step size
```html ```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 ### API
@ -64,3 +83,9 @@ export default {
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| |------|------|------|
| change | Triggered after value change | value: current rate | | change | Triggered after value change | value: current rate |
### Slot
| Name | Description |
|------|------|
| button | Custom button |

11
packages/slider/index.less
View File

@ -12,16 +12,18 @@
} }
&__button { &__button {
position: absolute;
top: 50%;
right: 0;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: @white; background-color: @white;
transform: translate3d(50%, -50%, 0);
box-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
&-wrapper {
position: absolute;
top: 50%;
right: 0;
transform: translate3d(50%, -50%, 0);
/* use pseudo element to expand touch area */ /* use pseudo element to expand touch area */
&::after { &::after {
content: ''; content: '';
@ -32,6 +34,7 @@
left: -50%; left: -50%;
} }
} }
}
&--disabled { &--disabled {
opacity: .3; opacity: .3;

10
packages/slider/index.vue
View File

@ -7,13 +7,17 @@
:class="b('bar')" :class="b('bar')"
:style="barStyle" :style="barStyle"
> >
<span <div
:class="b('button')" :class="b('button-wrapper')"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchmove.prevent.stop="onTouchMove" @touchmove.prevent.stop="onTouchMove"
@touchend="onTouchEnd" @touchend="onTouchEnd"
@touchcancel="onTouchEnd" @touchcancel="onTouchEnd"
/> >
<slot name="button">
<div :class="b('button')" />
</slot>
</div>
</div> </div>
</div> </div>
</template> </template>

44
packages/slider/test/__snapshots__/demo.spec.js.snap
View File

@ -4,22 +4,58 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-slider"> <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>
<div> <div>
<div class="van-slider"> <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>
<div> <div>
<div class="van-slider van-slider--disabled"> <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>
<div> <div>
<div class="van-slider"> <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> </div>
</div> </div>

24
packages/slider/test/__snapshots__/index.spec.js.snap
View File

@ -2,24 +2,40 @@
exports[`click bar 1`] = ` exports[`click bar 1`] = `
<div class="van-slider van-slider--disabled"> <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>
`; `;
exports[`click bar 2`] = ` exports[`click bar 2`] = `
<div class="van-slider"> <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> </div>
`; `;
exports[`drag button 1`] = ` exports[`drag button 1`] = `
<div class="van-slider van-slider--disabled"> <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>
`; `;
exports[`drag button 2`] = ` exports[`drag button 2`] = `
<div class="van-slider"> <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> </div>
`; `;

27
packages/slider/zh-CN.md
View File

@ -44,7 +44,26 @@ export default {
#### 指定步长 #### 指定步长
```html ```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 ### API
@ -63,3 +82,9 @@ export default {
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|------|------|------| |------|------|------|
| change | 进度值改变后触发 | value: 当前进度 | | change | 进度值改变后触发 | value: 当前进度 |
### Slot
| 名称 | 说明 |
|------|------|
| button | 自定义滑动按钮 |

2
packages/steps/zh-CN.md
View File

@ -64,7 +64,7 @@ export default {
### Steps Slot ### Steps Slot
| Name | 说明 | | 名称 | 说明 |
|------|------| |------|------|
| icon | 自定义icon区域 | | icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 | | message-extra | 状态栏添加额外的元素 |