github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: slider deprecated tooltipVisible

Browse Source
pull/6247/head
tangjinzhou 2 years ago
parent 2f049329a5
commit f0e5da3b69
5 changed files with 69 additions and 51 deletions
Show Stats Download Patch File Download Diff File

4
components/slider/SliderTooltip.tsx
Unescape View File

@ -25,12 +25,12 @@ export default defineComponent({
}
const align = () => {
cancelKeepAlign();
if (props.visible) {
if (props.open) {
keepAlign();
}
};
watch(
[() => props.visible, () => props.title],
[() => props.open, () => props.title],
() => {
align();
},

6
components/slider/demo/show-tooltip.vue
Unescape View File

@ -8,15 +8,15 @@ title:
## zh-CN
当 `tooltipVisible` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
当 `tooltipOpen` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
## en-US
When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
When `tooltipOpen` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
</docs>
<template>
<a-slider v-model:value="value" :tooltip-visible="true" />
<a-slider v-model:value="value" :tooltip-open="true" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

12
components/slider/index.en-US.md
Unescape View File

@ -2,7 +2,7 @@
category: Components
type: Data Entry
title: Slider
cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
---
A Slider component for displaying current value and intervals in range.
@ -16,9 +16,8 @@ To input a value in a range.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autofocus | get focus when component mounted | boolean | false | |
| disabled | If true, the slider will not be interactable. | boolean | false | |
| disabled | If true, the slider will not be intractable. | boolean | false | |
| dots | Whether the thumb can drag over tick only. | boolean | false | |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
| handleStyle | The style of slider handle | CSSProperties | - | |
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true | |
| mark | Custom tick mark of Slider, | v-slot:mark | { point: number, label: any } | 3.0 |
@ -28,12 +27,13 @@ To input a value in a range.
| range | dual thumb mode | boolean | false | |
| reverse | reverse the component | boolean | false | 1.5.0 |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | |
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 1.5.0 |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | |
| trackStyle | The style of slider track | CSSProperties | - | |
| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | | |
| vertical | If true, the slider will be vertical. | Boolean | false | |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | |
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 1.5.0 |
| tooltipOpen | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | 4.0 |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
### events

88
components/slider/index.tsx
Unescape View File

@ -1,10 +1,17 @@
import type { CSSProperties, VNodeTypes, PropType, ExtractPropTypes } from 'vue';
import type { CSSProperties, VNodeTypes, ExtractPropTypes } from 'vue';
import { computed, ref, defineComponent } from 'vue';
import VcSlider from '../vc-slider/src/Slider';
import VcRange from '../vc-slider/src/Range';
import VcHandle from '../vc-slider/src/Handle';
import type { VueNode } from '../_util/type';
import { withInstall } from '../_util/type';
import {
stringType,
booleanType,
someType,
objectType,
withInstall,
functionType,
} from '../_util/type';
import type { TooltipPlacement } from '../tooltip/Tooltip';
import useConfigInject from '../config-provider/hooks/useConfigInject';
import SliderTooltip from './SliderTooltip';
@ -14,6 +21,7 @@ import type { FocusEventHandler } from '../_util/EventInterface';
// CSSINJS
import useStyle from './style';
import devWarning from '../vc-util/devWarning';
export type SliderValue = number | [number, number];
@ -46,35 +54,35 @@ export const sliderProps = () => ({
id: String,
prefixCls: String,
tooltipPrefixCls: String,
range: { type: [Boolean, Object] as PropType<boolean | SliderRange>, default: undefined },
reverse: { type: Boolean, default: undefined },
range: someType<boolean | SliderRange>([Boolean, Object]),
reverse: booleanType(),
min: Number,
max: Number,
step: { type: [Number, Object] as PropType<null | number> },
marks: { type: Object as PropType<SliderMarks> },
dots: { type: Boolean, default: undefined },
value: { type: [Number, Array] as PropType<Value> },
defaultValue: { type: [Number, Array] as PropType<Value> },
included: { type: Boolean, default: undefined },
disabled: { type: Boolean, default: undefined },
vertical: { type: Boolean, default: undefined },
tipFormatter: {
type: [Function, Object] as PropType<((value?: number) => any) | null>,
default: () => defaultTipFormatter,
},
tooltipVisible: { type: Boolean, default: undefined },
tooltipPlacement: { type: String as PropType<TooltipPlacement> },
getTooltipPopupContainer: {
type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
},
autofocus: { type: Boolean, default: undefined },
handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
onChange: { type: Function as PropType<(value: Value) => void> },
onAfterChange: { type: Function as PropType<(value: Value) => void> },
onFocus: { type: Function as PropType<FocusEventHandler> },
onBlur: { type: Function as PropType<FocusEventHandler> },
'onUpdate:value': { type: Function as PropType<(value: Value) => void> },
step: someType<null | number>([Object, Number]),
marks: objectType<SliderMarks>(),
dots: booleanType(),
value: someType<Value>([Array, Number]),
defaultValue: someType<Value>([Array, Number]),
included: booleanType(),
disabled: booleanType(),
vertical: booleanType(),
tipFormatter: someType<((value?: number) => any) | null>(
[Function, Object],
() => defaultTipFormatter,
),
tooltipOpen: booleanType(),
/** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
tooltipVisible: booleanType(),
tooltipPlacement: stringType<TooltipPlacement>(),
getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
autofocus: booleanType(),
handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
onChange: functionType<(value: Value) => void>(),
onAfterChange: functionType<(value: Value) => void>(),
onFocus: functionType<FocusEventHandler>(),
onBlur: functionType<FocusEventHandler>(),
'onUpdate:value': functionType<(value: Value) => void>(),
});
export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
@ -88,6 +96,16 @@ const Slider = defineComponent({
// emits: ['update:value', 'change', 'afterChange', 'blur'],
slots: ['mark'],
setup(props, { attrs, slots, emit, expose }) {
// Warning for deprecated usage
if (process.env.NODE_ENV !== 'production') {
[['tooltipVisible', 'tooltipOpen']].forEach(([deprecatedName, newName]) => {
devWarning(
props.tooltipVisible === undefined,
'Slider',
`\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
);
});
}
const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
useConfigInject('slider', props);
@ -97,7 +115,7 @@ const Slider = defineComponent({
const formItemContext = useInjectFormItemContext();
const sliderRef = ref();
const visibles = ref<Visibles>({});
const toggleTooltipVisible = (index: number, visible: boolean) => {
const toggleTooltipOpen = (index: number, visible: boolean) => {
visibles.value[index] = visible;
};
const tooltipPlacement = computed(() => {
@ -132,14 +150,14 @@ const Slider = defineComponent({
tooltipPrefixCls,
info: { value, dragging, index, ...restProps },
}) => {
const { tipFormatter, tooltipVisible, getTooltipPopupContainer } = props;
const { tipFormatter, tooltipOpen = props.tooltipVisible, getTooltipPopupContainer } = props;
const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
return (
<SliderTooltip
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(value) : ''}
visible={visible}
open={open}
placement={tooltipPlacement.value}
transitionName={`${rootPrefixCls.value}-zoom-down`}
key={index}
@ -149,8 +167,8 @@ const Slider = defineComponent({
<VcHandle
{...restProps}
value={value}
onMouseenter={() => toggleTooltipVisible(index, true)}
onMouseleave={() => toggleTooltipVisible(index, false)}
onMouseenter={() => toggleTooltipOpen(index, true)}
onMouseleave={() => toggleTooltipOpen(index, false)}
/>
</SliderTooltip>
);

10
components/slider/index.zh-CN.md
Unescape View File

@ -3,7 +3,7 @@ category: Components
subtitle: 滑动输入条
type: 数据录入
title: Slider
cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
---
滑动型输入器，展示当前值和可选范围。
@ -19,7 +19,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
| autofocus | 自动获取焦点 | boolean | false | |
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false | |
| dots | 是否只能拖拽到刻度上 | boolean | false | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |
| mark | 自定义刻度标记 | v-slot:mark | { point: number, label: any } | 3.0 |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
@ -28,11 +27,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
| range | 双滑块模式 | boolean | false | |
| reverse | 反向坐标轴 | boolean | false | 1.5.0 |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 1.5.0 |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | |
| value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 1.5.0 |
| tooltipOpen | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | 4.0 |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
### 事件

Write Preview
Loading…
Cancel
Save