From 282d8ba27be0a3b080fb508bd9fce48d81afb152 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 25 Dec 2018 21:43:26 +0800 Subject: [PATCH] [new feature] Slider: add button slot (#2373) --- packages/slider/demo/index.vue | 42 +++++++++++++++++- packages/slider/en-US.md | 27 +++++++++++- packages/slider/index.less | 25 ++++++----- packages/slider/index.vue | 10 +++-- .../test/__snapshots__/demo.spec.js.snap | 44 +++++++++++++++++-- .../test/__snapshots__/index.spec.js.snap | 24 ++++++++-- packages/slider/zh-CN.md | 27 +++++++++++- packages/steps/zh-CN.md | 2 +- 8 files changed, 175 insertions(+), 26 deletions(-) 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 @@ + + + + + + + +
+ {{ value6 }} +
+ + @@ -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 { 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 - + +``` + +#### Custom style + +```html + +``` + +#### Custom button + +```html + +
+ {{ value }} +
+ ``` ### 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" > - + > + +
+ +
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`] = `
-
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 50 +
+
+
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`] = `
-
+
+
+
+
+
`; exports[`click bar 2`] = `
-
+
+
+
+
+
`; exports[`drag button 1`] = `
-
+
+
+
+
+
`; exports[`drag button 2`] = `
-
+
+
+
+
+
`; 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 - + +``` + +#### 自定义样式 + +```html + +``` + +#### 自定义按钮 + +```html + +
+ {{ value }} +
+ ``` ### 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 | 状态栏添加额外的元素 |