feat(slider): add button slot

varletjs · Aug 4, 2021 · a912564 · a912564
1 parent 9777f62
commit a912564
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 59 deletions.
diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
@@ -31,35 +31,37 @@
         @touchend="end(1)"
         @touchcancel="end(1)"
       >
-        <div
-          class="var-slider__thumb-block"
-          :style="{
-            background: thumbColor,
-            height: thumbSize + 'px',
-            width: thumbSize + 'px',
-          }"
-        ></div>
-        <div
-          class="var-slider__thumb-ripple"
-          :class="[thumbProps1.active ? 'var-slider__thumb-ripple-active' : null]"
-          :style="{
-            background: thumbColor,
-            height: thumbSize ? (thumbProps1.active ? 3 * thumbSize + 'px' : '0px') : null,
-            width: thumbSize ? (thumbProps1.active ? 3 * thumbSize + 'px' : '0px') : null,
-          }"
-        ></div>
-        <div
-          class="var-slider__thumb-label"
-          :class="[showLabel1 ? 'var-slider__thumb-label-active' : null]"
-          :style="{
-            background: labelColor,
-            color: labelTextColor,
-            height: 2 * thumbSize + 'px',
-            width: 2 * thumbSize + 'px',
-          }"
-        >
-          <span>{{ range ? modelValue[0] : modelValue }}</span>
-        </div>
+        <slot name="button" :current-value="range ? modelValue[0] : modelValue">
+          <div
+            class="var-slider__thumb-block"
+            :style="{
+              background: thumbColor,
+              height: thumbSize + 'px',
+              width: thumbSize + 'px',
+            }"
+          ></div>
+          <div
+            class="var-slider__thumb-ripple"
+            :class="[thumbProps1.active ? 'var-slider__thumb-ripple-active' : null]"
+            :style="{
+              background: thumbColor,
+              height: thumbSize ? (thumbProps1.active ? 3 * thumbSize + 'px' : '0px') : null,
+              width: thumbSize ? (thumbProps1.active ? 3 * thumbSize + 'px' : '0px') : null,
+            }"
+          ></div>
+          <div
+            class="var-slider__thumb-label"
+            :class="[showLabel1 ? 'var-slider__thumb-label-active' : null]"
+            :style="{
+              background: labelColor,
+              color: labelTextColor,
+              height: 2 * thumbSize + 'px',
+              width: 2 * thumbSize + 'px',
+            }"
+          >
+            <span>{{ range ? modelValue[0] : modelValue }}</span>
+          </div>
+        </slot>
       </div>
 
       <div
@@ -74,35 +76,37 @@
         @touchend="end(2)"
         @touchcancel="end(2)"
       >
-        <div
-          class="var-slider__thumb-block"
-          :style="{
-            background: thumbColor,
-            height: thumbSize + 'px',
-            width: thumbSize + 'px',
-          }"
-        ></div>
-        <div
-          class="var-slider__thumb-ripple"
-          :class="[thumbProps2.active ? 'var-slider__thumb-ripple-active' : null]"
-          :style="{
-            background: thumbColor,
-            height: thumbSize ? (thumbProps2.active ? 3 * thumbSize + 'px' : '0px') : null,
-            width: thumbSize ? (thumbProps2.active ? 3 * thumbSize + 'px' : '0px') : null,
-          }"
-        ></div>
-        <div
-          class="var-slider__thumb-label"
-          :class="[showLabel2 ? 'var-slider__thumb-label-active' : null]"
-          :style="{
-            background: labelColor,
-            color: labelTextColor,
-            height: 2 * thumbSize + 'px',
-            width: 2 * thumbSize + 'px',
-          }"
-        >
-          <span>{{ range && modelValue[1] }}</span>
-        </div>
+        <slot name="button" :current-value="range && modelValue[1]">
+          <div
+            class="var-slider__thumb-block"
+            :style="{
+              background: thumbColor,
+              height: thumbSize + 'px',
+              width: thumbSize + 'px',
+            }"
+          ></div>
+          <div
+            class="var-slider__thumb-ripple"
+            :class="[thumbProps2.active ? 'var-slider__thumb-ripple-active' : null]"
+            :style="{
+              background: thumbColor,
+              height: thumbSize ? (thumbProps2.active ? 3 * thumbSize + 'px' : '0px') : null,
+              width: thumbSize ? (thumbProps2.active ? 3 * thumbSize + 'px' : '0px') : null,
+            }"
+          ></div>
+          <div
+            class="var-slider__thumb-label"
+            :class="[showLabel2 ? 'var-slider__thumb-label-active' : null]"
+            :style="{
+              background: labelColor,
+              color: labelTextColor,
+              height: 2 * thumbSize + 'px',
+              width: 2 * thumbSize + 'px',
+            }"
+          >
+            <span>{{ range && modelValue[1] }}</span>
+          </div>
+        </slot>
       </div>
     </div>
     <var-form-details :error-message="errorMessage" class="var-slider__form" var-slider-cover />

diff --git a/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap
@@ -149,6 +149,26 @@ exports[`test slider example 1`] = `
     </transition-stub>
   </div>
 </div>
+<div>
+  <div class=\\"app-type\\">自定义按钮</div>
+  <div class=\\"var-slider\\">
+    <div class=\\"var-slider-block\\">
+      <div class=\\"var-slider__track\\">
+        <div class=\\"var-slider__track-background\\"></div>
+        <div class=\\"var-slider__track-fill\\" style=\\"width: 33%; left: 5%; background: rgb(82, 175, 119);\\"></div>
+      </div>
+      <div class=\\"var-slider__thumb\\" style=\\"left: 5%;\\">
+        <div class=\\"slider-example_block\\">5</div>
+      </div>
+      <div class=\\"var-slider__thumb\\" style=\\"left: 38%;\\">
+        <div class=\\"slider-example_block\\">38</div>
+      </div>
+    </div>
+    <transition-stub class=\\"var-slider__form\\" var-slider-cover=\\"\\">
+      <!--v-if-->
+    </transition-stub>
+  </div>
+</div>
 <div>
   <div class=\\"app-type\\">显示标签</div>
   <div class=\\"var-slider\\">

diff --git a/packages/varlet-ui/src/slider/__tests__/index.spec.js b/packages/varlet-ui/src/slider/__tests__/index.spec.js
@@ -5,7 +5,6 @@ import { mount } from '@vue/test-utils'
 import { createApp } from 'vue'
 import { delay, trigger, mockConsole } from '../../utils/jest'
 
-
 test('test slider example', () => {
   const wrapper = mount(example)
   expect(wrapper.html()).toMatchSnapshot()

diff --git a/packages/varlet-ui/src/slider/docs/en-US.md b/packages/varlet-ui/src/slider/docs/en-US.md
@@ -99,6 +99,33 @@ Control the size of slider through `track-height` and `thumb-size`.
   label-text-color="#ededed"
 />
 ```
+### Custom Button
+
+The props such as `label-visible`, `label-text-color`, `thumb-size` are invalid when using slot custom buttons.
+
+```html
+<var-slider v-model="value" range active-color="#52af77">
+  <template #button="currentValue">
+    <div class="slider-example_block">{{ currentValue }}</div>
+  </template>
+</var-slider>
+```
+```css
+.slider-example_block {
+  width: 25px;
+  border: 1px solid #52af77;
+  color: #52af77;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: #ebebeb 0 2px 2px;
+  border-radius: 50%;
+  font-size: 12px;
+  background-color: #fff;
+}
+```
+
 
 ### Show label
 Control the display of labels through the `label-visible` attribute.
@@ -148,6 +175,12 @@ Verify the value through the `rules` attribute.
 | `start` | Emitted when start dragged | `-` |
 | `end` | Emitted when end dragged | value: current value |
 
+### Slots
+
+| Name | Description | SlotProps |
+| ----- | -------------- | -------- |
+| `button` | Custom button | `currentValue`: current value |
+
 ### Style Variables
 
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)

diff --git a/packages/varlet-ui/src/slider/docs/zh-CN.md b/packages/varlet-ui/src/slider/docs/zh-CN.md
@@ -100,6 +100,34 @@ export default {
 />
 ```
 
+### 自定义按钮
+
+使用插槽自定义按钮时，`label-visible`、`label-text-color`、`thumb-size`等属性均无效。
+
+```html
+<var-slider v-model="value" range active-color="#52af77">
+  <template #button="currentValue">
+    <div class="slider-example_block">{{ currentValue }}</div>
+  </template>
+</var-slider>
+```
+```css
+.slider-example_block {
+  width: 25px;
+  border: 1px solid #52af77;
+  color: #52af77;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: #ebebeb 0 2px 2px;
+  border-radius: 50%;
+  font-size: 12px;
+  background-color: #fff;
+}
+```
+
+
 ### 显示标签
 通过 `label-visible` 属性控制标签的显示。
 
@@ -145,6 +173,12 @@ export default {
 | `start` | 开始拖动时触发 | `-` |
 | `end` | 结束拖动时触发 | value: 当前进度 |
 
+### 插槽
+
+| 名称 | 说明 | 参数 |
+| ----- | -------------- | -------- |
+| `button` | 自定义滑动按钮 | `currentValue`: 当前进度 |
+
 ### 样式变量
 
 以下为组件使用的 css 变量,可以使用[StyleProvider 组件](#/zh-CN/style-provider)进行样式定制

diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue
@@ -34,6 +34,14 @@
       label-text-color="#ededed"
     />
   </div>
+  <div>
+    <app-type>{{ pack.customBtn }}</app-type>
+    <var-slider v-model="value9" range active-color="#52af77">
+      <template #button="{ currentValue }">
+        <div class="slider-example_block">{{ currentValue }}</div>
+      </template>
+    </var-slider>
+  </div>
   <div>
     <app-type>{{ pack.showLabel }}</app-type>
     <var-slider v-model="value5" label-visible="never" />
@@ -70,6 +78,7 @@ export default {
       value6: 70,
       value7: 50,
       value8: 20,
+      value9: [5, 38],
     })
 
     const handleChange = (v) => {
@@ -86,3 +95,18 @@ export default {
   },
 }
 </script>
+<style lang="less" scoped>
+.slider-example_block {
+  width: 25px;
+  border: 1px solid #52af77;
+  color: #52af77;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: #ebebeb 0 2px 2px;
+  border-radius: 50%;
+  font-size: 12px;
+  background-color: #fff;
+}
+</style>
diff --git a/packages/varlet-ui/src/slider/example/locale/en-US.ts b/packages/varlet-ui/src/slider/example/locale/en-US.ts
@@ -7,5 +7,6 @@ export default {
   sliderSize: 'Slider Size',
   customStyle: 'Custom Style',
   showLabel: 'Show Label',
+  customBtn: 'Custom Button',
   validateValue: 'Validate Value',
 }
diff --git a/packages/varlet-ui/src/slider/example/locale/zh-CN.ts b/packages/varlet-ui/src/slider/example/locale/zh-CN.ts
@@ -7,5 +7,6 @@ export default {
   sliderSize: '不同大小',
   customStyle: '自定义样式',
   showLabel: '显示标签',
+  customBtn: '自定义按钮',
   validateValue: '值的校验',
 }