diff --git a/packages/slider/demo/index.vue b/packages/slider/demo/index.vue
index 043eae510..0b299648c 100644
--- a/packages/slider/demo/index.vue
+++ b/packages/slider/demo/index.vue
@@ -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>
diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md
index 68841493b..f58e7308c 100644
--- a/packages/slider/en-US.md
+++ b/packages/slider/en-US.md
@@ -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 |
diff --git a/packages/slider/index.less b/packages/slider/index.less
index 6ebeddf37..c113d2510 100644
--- a/packages/slider/index.less
+++ b/packages/slider/index.less
@@ -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%;
+ }
}
}
diff --git a/packages/slider/index.vue b/packages/slider/index.vue
index d5692e555..d08ede0fe 100644
--- a/packages/slider/index.vue
+++ b/packages/slider/index.vue
@@ -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>
diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap
index 90694fe58..cf341afc3 100644
--- a/packages/slider/test/__snapshots__/demo.spec.js.snap
+++ b/packages/slider/test/__snapshots__/demo.spec.js.snap
@@ -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>
diff --git a/packages/slider/test/__snapshots__/index.spec.js.snap b/packages/slider/test/__snapshots__/index.spec.js.snap
index 0be3d7053..02d26fc8d 100644
--- a/packages/slider/test/__snapshots__/index.spec.js.snap
+++ b/packages/slider/test/__snapshots__/index.spec.js.snap
@@ -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>
`;
diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md
index 97d810679..e051ad934 100644
--- a/packages/slider/zh-CN.md
+++ b/packages/slider/zh-CN.md
@@ -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 | 自定义滑动按钮 |
diff --git a/packages/steps/zh-CN.md b/packages/steps/zh-CN.md
index 0eb596933..9c6eebca4 100644
--- a/packages/steps/zh-CN.md
+++ b/packages/steps/zh-CN.md
@@ -64,7 +64,7 @@ export default {
### Steps Slot
-| Name | 说明 |
+| 名称 | 说明 |
|------|------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |