feat(Slider): label的函数参数支持 (#3502)

* feat(Slider): label的函数参数支持 * feat(Slider): 补充label为false时处理逻辑
Tencent · Oct 22, 2023 · 94f5221 · 94f5221
1 parent e33b641
commit 94f5221
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 32 deletions.
diff --git a/src/slider/hooks/useSliderTooltip.tsx b/src/slider/hooks/useSliderTooltip.tsx
@@ -2,6 +2,7 @@ import { TooltipProps } from '@src/tooltip';
 import { ref, computed, ComputedRef, Ref } from 'vue';
 import { TdSliderProps } from '../type';
 import { formatLabel } from '../util/common';
+import { useTNodeDefault } from '../../hooks';
 
 const initialProps: TooltipProps & { overlayClassName: string } = {
   visible: false,
@@ -18,6 +19,8 @@ export interface TooltipConfig {
   vertical: boolean;
   value: number;
   label: TdSliderProps['label'];
+  position: string;
+  range: boolean;
 }
 
 /**
@@ -43,11 +46,30 @@ export const useSliderTooltip = (tooltipConfig: Ref<TooltipConfig>) => {
     normalizeProps.value.visible = toState;
   };
 
+  const renderTNodeJSX = useTNodeDefault();
+
   /** 合并最终tooltip属性，以外部同名属性覆盖初始化属性 */
   const validProps = computed(() => {
-    const { vertical, tooltipProps, label, value } = tooltipConfig.value;
+    const { vertical, tooltipProps, label, value, position, range } = tooltipConfig.value;
     const placement = vertical ? 'right' : 'top';
-    let content = formatLabel(label, value);
+
+    let content = (() => {
+      if (typeof label === 'boolean') {
+        return String(value);
+      }
+      if (typeof label === 'string') {
+        return formatLabel(label, value);
+      }
+      return renderTNodeJSX('label', {
+        params: range
+          ? {
+              value,
+              position,
+            }
+          : { value },
+      });
+    })();
+
     if (tooltipProps instanceof Object) {
       if (!tooltipProps?.placement) {
         normalizeProps.value.placement = placement;

diff --git a/src/slider/props.ts b/src/slider/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
  * */
 
 import { TdSliderProps } from './type';
@@ -16,20 +15,21 @@ export default {
     type: [Boolean, Object] as PropType<TdSliderProps['inputNumberProps']>,
     default: false as TdSliderProps['inputNumberProps'],
   },
-  /** 滑块当前值文本。不传则默认显示当前数值，值为 `${value}%` 则表示组件会根据占位符渲染文案 */
+  /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
   label: {
     type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
-    default: false,
+    default: true as TdSliderProps['label'],
   },
   /** 滑块布局方向 */
   layout: {
     type: String as PropType<TdSliderProps['layout']>,
     default: 'horizontal' as TdSliderProps['layout'],
     validator(val: TdSliderProps['layout']): boolean {
+      if (!val) return true;
       return ['vertical', 'horizontal'].includes(val);
     },
   },
-  /** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }` */
+  /** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
   marks: {
     type: [Object, Array] as PropType<TdSliderProps['marks']>,
   },
@@ -45,20 +45,13 @@ export default {
   },
   /** 双游标滑块 */
   range: Boolean,
+  /** 控制步长刻度值显示 */
+  showStep: Boolean,
   /** 步长 */
   step: {
     type: Number,
     default: 1,
   },
-  /** 是否显示步长刻度 */
-  showStep: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: [Number, Array] as PropType<TdSliderProps['value']>,
-    default: undefined as TdSliderProps['value'],
-  },
   /** 透传提示组件属性 */
   tooltipProps: {
     type: Object as PropType<TdSliderProps['tooltipProps']>,
@@ -68,9 +61,14 @@ export default {
     type: [Number, Array] as PropType<TdSliderProps['value']>,
     default: undefined as TdSliderProps['value'],
   },
+  modelValue: {
+    type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined as TdSliderProps['value'],
+  },
   /** 滑块值，非受控属性 */
   defaultValue: {
     type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
+    default: 0 as TdSliderProps['defaultValue'],
   },
   /** 滑块值变化时触发 */
   onChange: Function as PropType<TdSliderProps['onChange']>,

diff --git a/src/slider/slider-button.tsx b/src/slider/slider-button.tsx
@@ -34,8 +34,14 @@ export default defineComponent({
     },
     label: {
       type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
+    },
+    range: {
+      type: Boolean,
       default: false,
     },
+    position: {
+      type: String,
+    },
   },
   emits: ['input'],
   setup(props, ctx) {
@@ -224,7 +230,7 @@ export default defineComponent({
         onblur={handleMouseLeave}
         onKeydown={onNativeKeyDown}
       >
-        {showTooltip.value ? (
+        {showTooltip.value && props.label !== false ? (
           <TTooltip ref={tooltipRef} disabled={!showTooltip.value} {...tooltipProps.value}>
             <div class={[COMPONENT_NAME.value, { [`${COMPONENT_NAME.value}--dragging`]: slideButtonProps.dragging }]} />
           </TTooltip>

diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md
@@ -1,24 +1,23 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Slider Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 disabled | Boolean | false | \- | N
 inputNumberProps | Boolean / Object | false | Typescript：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
 label | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-layout | String | horizontal | options：vertical/horizontal | N
+layout | String | horizontal | options: vertical/horizontal | N
 marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
 max | Number | 100 | \- | N
 min | Number | 0 | \- | N
 range | Boolean | false | \- | N
 showStep | Boolean | false | \- | N
 step | Number | 1 | \- | N
 tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
-value | Number / Array | - | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
-defaultValue | Number / Array | - | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
 onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
 
 ### Slider Events

diff --git a/src/slider/slider.md b/src/slider/slider.md
@@ -16,8 +16,8 @@ range | Boolean | false | 双游标滑块 | N
 showStep | Boolean | false | 控制步长刻度值显示 | N
 step | Number | 1 | 步长 | N
 tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
-value | Number / Array | - | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
-defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
 
 ### Slider Events

diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx
@@ -392,6 +392,8 @@ export default defineComponent({
               value={firstValue.value}
               ref={firstButtonRef}
               disabled={disabled.value}
+              range={props.range}
+              position="start"
               tooltip-props={props.tooltipProps}
               label={props.label}
               onInput={(v: number) => {
@@ -405,6 +407,8 @@ export default defineComponent({
                 ref={secondButtonRef}
                 disabled={disabled.value}
                 label={props.label}
+                range={props.range}
+                position="end"
                 tooltip-props={props.tooltipProps}
                 onInput={(v: number) => {
                   secondValue.value = v;

diff --git a/src/slider/type.ts b/src/slider/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
  * */
 
 import { InputNumberProps } from '../input-number';
@@ -19,19 +18,19 @@ export interface TdSliderProps {
    * 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
    * @default false
    */
-  inputNumberProps?: false | InputNumberProps;
+  inputNumberProps?: boolean | InputNumberProps;
   /**
-   * 滑块当前值文本。不传则默认显示当前数值，值为 `${value}%` 则表示组件会根据占位符渲染文案
-   * @default false
+   * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+   * @default true
    */
-  label?: string | TNode;
+  label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
   /**
    * 滑块布局方向
    * @default horizontal
    */
   layout?: 'vertical' | 'horizontal';
   /**
-   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }`
+   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
    */
   marks?: Array<number> | SliderMarks;
   /**
@@ -49,27 +48,35 @@ export interface TdSliderProps {
    * @default false
    */
   range?: boolean;
+  /**
+   * 控制步长刻度值显示
+   * @default false
+   */
+  showStep?: boolean;
   /**
    * 步长
    * @default 1
    */
   step?: number;
-  /**
-   * 是否显示步长刻度
-   */
-  showStep?: boolean;
   /**
    * 透传提示组件属性
    */
   tooltipProps?: TooltipProps;
   /**
    * 滑块值
+   * @default 0
    */
   value?: SliderValue;
   /**
    * 滑块值，非受控属性
+   * @default 0
    */
   defaultValue?: SliderValue;
+  /**
+   * 滑块值
+   * @default 0
+   */
+  modelValue?: SliderValue;
   /**
    * 滑块值变化时触发
    */