diff --git a/src/loading/__test__/__snapshots__/demo.test.jsx.snap b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
index 742501f85..a8e5b9db5 100644
--- a/src/loading/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
@@ -916,38 +916,31 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
data-v-0fadab4c=""
>
@@ -1147,38 +1140,31 @@ exports[`Loading > Loading speedVue demo works fine 1`] = `
data-v-0fadab4c=""
>
diff --git a/src/slider/__test__/__snapshots__/demo.test.jsx.snap b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
index 7489ca5c0..730407010 100644
--- a/src/slider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,129 +2,375 @@
exports[`Slider > Slider baseVue demo works fine 1`] = `
`;
-exports[`Slider > Slider disableVue demo works fine 1`] = `
+exports[`Slider > Slider capsuleVue demo works fine 1`] = `
-
+
-
+
+
-
+ class="t-slider__bar t-slider__bar--capsule"
+ >
+
+
+
+
+
+
+
+
+
+
+
-
+ class="t-slider__bar t-slider__bar--capsule"
+ >
+
+
+
+
+
+
+
+
+
+ class="t-slider__bar t-slider__bar--capsule"
+ >
+
+
+
+
+
+
+
-
-
+
+
`;
-exports[`Slider > Slider markVue demo works fine 1`] = `
+exports[`Slider > Slider disabledVue demo works fine 1`] = `
-
+
-
-
-
-
-
+
+ class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+ >
+
+
+
+
-
+
+
+
+
+
+
+`;
+
+exports[`Slider > Slider labelVue demo works fine 1`] = `
+
`;
@@ -161,7 +407,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
- 基础滑动选择器
+ 单游标滑块
Slider mobileVue demo works fine 1`] = `
>
@@ -222,7 +456,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
- 带数值滑动选择器
+ 双游标滑块
Slider mobileVue demo works fine 1`] = `
>
+
+
+
-
-
-
-
-
-
-
-
+ class="t-slider__dot t-slider__dot--left"
+ >
+
+
+
-
- 50
-
-
+
+
@@ -287,7 +513,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
- 起始非零滑动选择器
+ 带数值滑动选择器
Slider mobileVue demo works fine 1`] = `
>
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+ 10
+
+
+
-
-
+
+
+
@@ -356,137 +574,187 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
>
+
+
-
-
-
-
-
-
-
-
-
-
-
- 小
-
+
- 中
-
-
- 大
-
-
+ class="t-slider__dot-slider"
+ />
-
-
+
+
+
+
+
+
+
+
+
+ 0
+
+
+ 100
+
+
+
+
+
+
Slider mobileVue demo works fine 1`] = `
- 02 状态
+ 03 特殊样式
- 滑动选择器禁用状态
+ 胶囊型滑块
-
-
-
-
-
+
+
+
-
-
+ class="t-slider__dot t-slider__dot--left"
+ >
+
+
+
-
-
+ class="t-slider__dot t-slider__dot--right"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+ class="t-slider__dot t-slider__dot--left"
+ >
+
+ 0
+
+
+
-
-
+
+
-
-
-
-
@@ -694,173 +956,68 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
exports[`Slider > Slider rangeVue demo works fine 1`] = `
-
- 0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
- 100
-
-
-`;
-
-exports[`Slider > Slider titleVue demo works fine 1`] = `
-
-
- 选择器标题
-
-
-
-
-
-
-
-
-
-
+ class="t-slider__dot t-slider__dot--left"
+ >
+
+
+
-
-
-
-
-`;
-
-exports[`Slider > Slider unZeroVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
`;
-exports[`Slider > Slider valueVue demo works fine 1`] = `
+exports[`Slider > Slider stepVue demo works fine 1`] = `
`;
diff --git a/src/slider/__test__/demo.test.jsx b/src/slider/__test__/demo.test.jsx
index 59bb1a104..3eff83779 100644
--- a/src/slider/__test__/demo.test.jsx
+++ b/src/slider/__test__/demo.test.jsx
@@ -4,23 +4,21 @@
import { mount } from '@vue/test-utils';
import baseVue from '@/slider/demos/base.vue';
-import disableVue from '@/slider/demos/disable.vue';
-import markVue from '@/slider/demos/mark.vue';
+import capsuleVue from '@/slider/demos/capsule.vue';
+import disabledVue from '@/slider/demos/disabled.vue';
+import labelVue from '@/slider/demos/label.vue';
import mobileVue from '@/slider/demos/mobile.vue';
import rangeVue from '@/slider/demos/range.vue';
-import titleVue from '@/slider/demos/title.vue';
-import unZeroVue from '@/slider/demos/unZero.vue';
-import valueVue from '@/slider/demos/value.vue';
+import stepVue from '@/slider/demos/step.vue';
const mapper = {
baseVue,
- disableVue,
- markVue,
+ capsuleVue,
+ disabledVue,
+ labelVue,
mobileVue,
rangeVue,
- titleVue,
- unZeroVue,
- valueVue,
+ stepVue,
};
describe('Slider', () => {
diff --git a/src/slider/__test__/index.test.jsx b/src/slider/__test__/index.test.jsx
index 354d995ba..56454abf3 100644
--- a/src/slider/__test__/index.test.jsx
+++ b/src/slider/__test__/index.test.jsx
@@ -12,41 +12,6 @@ const move = async (target, distance) => {
describe('slider', () => {
describe('props', () => {
- it(': range', async () => {
- const value = [30, 70];
- const range = true;
- const disabled = true;
- const onChange = vi.fn();
- const wrapper = mount(Slider, {
- props: {
- value,
- range,
- disabled,
- onChange,
- },
- });
-
- const $slider = wrapper.find(`.${classPrefix}`);
- const $bar = wrapper.findAll(`.${classPrefix}__handle`);
- expect($bar.length).toStrictEqual(value.length);
-
- const event = {
- clientX: 82,
- stopPropagation: vi.fn(),
- };
-
- // disabled = true, 禁止点击
- await $slider.trigger('click', { ...event });
- expect(onChange).toHaveBeenCalledTimes(0);
-
- // disabled = false
- await wrapper.setProps({
- disabled: false,
- });
- await $slider.trigger('click', { ...event });
- expect(onChange).toHaveBeenCalledTimes(1);
- });
-
it(': showExtremeValue', async () => {
const value = [30, 70];
const showExtremeValue = true;
@@ -57,8 +22,8 @@ describe('slider', () => {
showExtremeValue,
},
});
- const $left = wrapper.find(`.${classPrefix}-wrap__value--left`);
- const $right = wrapper.find(`.${classPrefix}-wrap__value`);
+ const $left = wrapper.find(`.${classPrefix}__value--min`);
+ const $right = wrapper.find(`.${classPrefix}__value--max`);
// min = 0, max = 100 (默认)
expect(Number($left.text())).toStrictEqual(0);
@@ -74,80 +39,30 @@ describe('slider', () => {
expect(Number($right.text())).toStrictEqual(newMax);
});
- it(': marks', async () => {
- const value = [30, 70];
- const marks = [0, 25, 50, 75, 100]; // Array
- const label = false;
- const wrapper = mount(Slider, {
- props: {
- value,
- marks,
- label,
- },
- });
- const $mark = wrapper.findAll(`.${classPrefix}__mark-text`);
- expect($mark.length).toStrictEqual(marks.length);
- $mark.forEach((item, index) => {
- expect(Number(item.text())).toStrictEqual(marks[index]);
- expect(item.attributes('style').includes(`left: ${marks[index]}%;`)).toBeTruthy();
- });
-
- const newMarks = { 0: '小', 50: '中', 100: '大' }; // Object
- await wrapper.setProps({
- marks: newMarks,
- });
-
- const $newMarks = wrapper.findAll(`.${classPrefix}__mark-text`);
- const marks2 = Object.entries(newMarks);
- expect($newMarks.length).toEqual(marks2.length);
- $newMarks.forEach((item, index) => {
- expect(item.text()).toStrictEqual(marks2[index][1]);
- expect(item.attributes('style').includes(`left: ${marks2[index][0]}%;`)).toBeTruthy();
- });
- });
-
it(': label', async () => {
const value = 0;
const wrapper = mount(Slider, {
props: {
+ label: true,
value,
},
});
// min = 0, max = 100, label = true (默认)
// label && 滑块条
- const $label = wrapper.find(`.${classPrefix}-wrap__value`);
- const $bar = wrapper.findAll(`.${classPrefix}__handle`);
- expect($bar.length).toStrictEqual(1);
+ const $label = wrapper.find(`.${classPrefix}__dot-value`);
+ const $bar = wrapper.findAll(`.${classPrefix}__line`);
expect(Number($label.text())).toEqual(value);
- expect($bar[0].attributes('style').includes(`left: ${value}%;`)).toBeTruthy();
-
const newValue = 30;
await wrapper.setProps({
value: newValue,
});
expect(Number($label.text())).toEqual(newValue);
- expect($bar[0].attributes('style').includes(`left: ${newValue}%;`)).toBeTruthy();
- });
- });
-
- describe('slots', () => {
- it(': label', () => {
- const label = `label
`;
- const wrapper = mount(Slider, {
- slots: {
- label,
- },
- });
- const $label = wrapper.find(`.${classPrefix}-wrap__value`);
- expect($label.html().includes(label)).toBeTruthy();
});
});
describe('event', () => {
- it(': change && drag-start && drag-end', async () => {
- const onDragStart = vi.fn();
- const onDragEnd = vi.fn();
+ it(': change ', async () => {
const onChange = vi.fn();
const value = 0;
const disabled = true;
@@ -155,27 +70,14 @@ describe('slider', () => {
props: {
value,
disabled,
- onDragStart,
- onDragEnd,
onChange,
},
});
- const $bar = wrapper.find(`.${classPrefix}__handle`);
+ const $bar = wrapper.find(`.${classPrefix}__bar`);
// disabled = true, 禁止滑动
await move($bar, 120);
- expect(onDragStart).toHaveBeenCalledTimes(0);
- expect(onDragEnd).toHaveBeenCalledTimes(0);
expect(onChange).toHaveBeenCalledTimes(0);
-
- // disabled = false
- await wrapper.setProps({
- disabled: false,
- });
- await move($bar, 120);
- expect(onDragStart).toHaveBeenCalledTimes(1);
- expect(onDragEnd).toHaveBeenCalledTimes(1);
- expect(onChange).toHaveBeenCalledTimes(2);
});
});
});
diff --git a/src/slider/demos/base.vue b/src/slider/demos/base.vue
index f3ae96178..47b03fe71 100644
--- a/src/slider/demos/base.vue
+++ b/src/slider/demos/base.vue
@@ -1,12 +1,3 @@
-
+
-
-
diff --git a/src/slider/demos/capsule.vue b/src/slider/demos/capsule.vue
new file mode 100644
index 000000000..7ab7cc723
--- /dev/null
+++ b/src/slider/demos/capsule.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/slider/demos/disable.vue b/src/slider/demos/disable.vue
deleted file mode 100644
index f3a2fb2a1..000000000
--- a/src/slider/demos/disable.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/src/slider/demos/disabled.vue b/src/slider/demos/disabled.vue
new file mode 100644
index 000000000..cc7afb241
--- /dev/null
+++ b/src/slider/demos/disabled.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/slider/demos/label.vue b/src/slider/demos/label.vue
new file mode 100644
index 000000000..c546c6148
--- /dev/null
+++ b/src/slider/demos/label.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/src/slider/demos/mark.vue b/src/slider/demos/mark.vue
deleted file mode 100644
index 01c3c53b9..000000000
--- a/src/slider/demos/mark.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
diff --git a/src/slider/demos/mobile.vue b/src/slider/demos/mobile.vue
index 7a5c2d1a0..9b0fe09ee 100644
--- a/src/slider/demos/mobile.vue
+++ b/src/slider/demos/mobile.vue
@@ -2,57 +2,34 @@
Slider 滑动选择器
用于选择横轴上的数值、区间、档位
-
-
-
-
+
+
-
-
-
-
+
+
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
+
+
-
-
-
-
+
+
diff --git a/src/slider/demos/unZero.vue b/src/slider/demos/unZero.vue
deleted file mode 100644
index a6c8b4db0..000000000
--- a/src/slider/demos/unZero.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/src/slider/demos/value.vue b/src/slider/demos/value.vue
deleted file mode 100644
index 13caa0233..000000000
--- a/src/slider/demos/value.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
diff --git a/src/slider/props.ts b/src/slider/props.ts
index 85bfd85f4..ae1113df2 100644
--- a/src/slider/props.ts
+++ b/src/slider/props.ts
@@ -13,7 +13,7 @@ export default {
/** 滑块当前值文本。
值为 true 显示默认文案;值为 false 不显示滑块当前值文本;
值为 `${value}%` 则表示组件会根据占位符渲染文案;
值类型为函数时,参数 `value` 标识滑块值,参数 `position=start` 表示范围滑块的起始值,参数 `position=end` 表示范围滑块的终点值 */
label: {
type: [String, Boolean, Function] as PropType,
- default: true,
+ default: false,
},
/** 刻度标记,示例:[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }` */
marks: {
@@ -38,21 +38,29 @@ export default {
type: Number,
default: 1,
},
+ /** 滑块风格 */
+ theme: {
+ type: String as PropType,
+ default: 'default' as TdSliderProps['theme'],
+ validator(val: TdSliderProps['theme']): boolean {
+ if (!val) return true;
+ return ['default', 'capsule'].includes(val);
+ },
+ },
/** 滑块值 */
value: {
type: [Number, Array] as PropType,
+ default: undefined,
},
modelValue: {
type: [Number, Array] as PropType,
+ default: undefined,
},
/** 滑块值,非受控属性 */
defaultValue: {
type: [Number, Array] as PropType,
+ default: 0,
},
/** 滑块值变化时触发 */
onChange: Function as PropType,
- /** 结束拖动时触发 */
- onDragend: Function as PropType,
- /** 开始拖动时触发 */
- onDragstart: Function as PropType,
};
diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md
new file mode 100644
index 000000000..0a7e7469b
--- /dev/null
+++ b/src/slider/slider.en-US.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | false | \- | N
+label | String / Boolean / Slot / Function | false | Typescript:`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marks | Object / Array | - | Typescript:`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+showExtremeValue | Boolean | false | \- | N
+step | Number | 1 | \- | N
+theme | String | default | options:default/capsule | N
+value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript:`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | uncontrolled property。Typescript:`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+onChange | Function | | Typescript:`(value: SliderValue) => void`
| N
+onDragend | Function | | Typescript:`() => void`
| N
+onDragstart | Function | | Typescript:`() => void`
| N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(value: SliderValue)` | \-
+dragend | \- | \-
+dragstart | \- | \-
diff --git a/src/slider/slider.md b/src/slider/slider.md
index 9ff215abc..829069fb1 100644
--- a/src/slider/slider.md
+++ b/src/slider/slider.md
@@ -6,23 +6,20 @@
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
disabled | Boolean | false | 是否禁用组件 | N
-label | String / Boolean / Slot / Function | true | 滑块当前值文本。
值为 true 显示默认文案;值为 false 不显示滑块当前值文本;
值为 `${value}%` 则表示组件会根据占位符渲染文案;
值类型为函数时,参数 `value` 标识滑块值,参数 `position=start` 表示范围滑块的起始值,参数 `position=end` 表示范围滑块的终点值。TS 类型:`string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marks | Object / Array | - | 刻度标记,示例:[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }`。TS 类型:`Array | SliderMarks` `interface SliderMarks { [mark: number]: string | TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+label | String / Boolean / Slot / Function | false | 滑块当前值文本。
值为 true 显示默认文案;值为 false 不显示滑块当前值文本;
值为 `${value}%` 则表示组件会根据占位符渲染文案;
值类型为函数时,参数 `value` 标识滑块值,参数 `position=start` 表示范围滑块的起始值,参数 `position=end` 表示范围滑块的终点值。TS 类型:`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marks | Object / Array | - | 刻度标记,示例:[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }`。TS 类型:`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
max | Number | 100 | 滑块范围最大值 | N
min | Number | 0 | 滑块范围最小值 | N
range | Boolean | false | 双游标滑块 | N
showExtremeValue | Boolean | false | 是否边界值 | N
step | Number | 1 | 步长 | N
-value | Number / Array | - | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`SliderValue` `type SliderValue = number | Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
-defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型:`SliderValue` `type SliderValue = number | Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+theme | String | default | 滑块风格。可选项:default/capsule | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型:`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
onChange | Function | | TS 类型:`(value: SliderValue) => void`
滑块值变化时触发 | N
-onDragend | Function | | TS 类型:`() => void`
结束拖动时触发 | N
-onDragstart | Function | | TS 类型:`() => void`
开始拖动时触发 | N
### Slider Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: SliderValue)` | 滑块值变化时触发
-dragend | \- | 结束拖动时触发
-dragstart | \- | 开始拖动时触发
diff --git a/src/slider/slider.vue b/src/slider/slider.vue
index 439b28a87..f4c07e227 100644
--- a/src/slider/slider.vue
+++ b/src/slider/slider.vue
@@ -1,52 +1,159 @@
-
{{ min }}
-
-
-
-
-
-
-
-
-
+
+ {{
+ label ? getValue(label, min) : min
+ }}
+
+
+
+
+ {{ state.scaleTextArray[index] }}
+
+
+
- {{ typeof v[1] === 'function' ? v[1](v[0]) : v[1] }}
+
+
+ {{ getValue(label, value as number) || value }}
+
+
+
-
-
-
-
-
{{ max }}
+
{{
+ label ? getValue(label, max) : max
+ }}
+
+
+ {{ min }}
+
+
+
+
+ {{ state.scaleTextArray[index] }}
+
+
+
+
+
+
+ {{ getValue(label, state.dotTopValue[0]) || state.dotTopValue[0] }}
+
+
+
+
+
+ {{ getValue(label, state.dotTopValue[1]) || state.dotTopValue[1] }}
+
+
+
+
+
+ {{ max }}
+