diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index b74afdd69..fe6b5583d 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -41,6 +41,7 @@ export default defineComponent({ time, inputRef, onChange, + closePopup, } = useSingle(props, { emit }); const formatRef = computed(() => getDefaultFormat({ @@ -103,7 +104,7 @@ export default defineComponent({ } // 日期点击 - function onCellClick(date: Date) { + function onCellClick(date: Date, { e }: { e: MouseEvent }) { isHoverCell.value = false; // date 模式自动切换年月 if (props.mode === 'date') { @@ -133,7 +134,7 @@ export default defineComponent({ trigger: 'pick', }, ); - popupVisible.value = false; + closePopup({ e }); } props.onPick?.(date); @@ -219,7 +220,7 @@ export default defineComponent({ format: formatRef.value.format, }); } - popupVisible.value = false; + closePopup({ e }); } // 预设 @@ -237,7 +238,7 @@ export default defineComponent({ ); props.onPresetClick?.(context); emit('preset-click', context); - popupVisible.value = false; + closePopup({ e: context?.e }); } function onYearChange(nextYear: number) { @@ -290,7 +291,7 @@ export default defineComponent({ const onTagClearClick = ({ e }: { e: MouseEvent }) => { e.stopPropagation(); - popupVisible.value = false; + closePopup({ e }); onChange?.([], { dayjsValue: dayjs(), trigger: 'clear' }); }; diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index d6e6c85e8..7c1e72105 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -46,6 +46,7 @@ export default defineComponent({ isHoverCell, isFirstValueSelected, onChange, + closePopup, } = useRange(props, { emit }); const formatRef = computed(() => getDefaultFormat({ @@ -189,7 +190,7 @@ export default defineComponent({ activeIndex.value = nextIndex; isFirstValueSelected.value = true; } else { - popupVisible.value = false; + closePopup({ e }); } } @@ -307,7 +308,7 @@ export default defineComponent({ activeIndex.value = nextIndex; isFirstValueSelected.value = true; } else if (nextValue.length === 2) { - popupVisible.value = false; + closePopup({ e }); } } @@ -331,7 +332,7 @@ export default defineComponent({ trigger: 'preset', }, ); - popupVisible.value = false; + closePopup({ e: context?.e }); props.onPresetClick?.(context); emit('preset-click', context); } diff --git a/src/date-picker/__tests__/index.test.jsx b/src/date-picker/__tests__/index.test.jsx index c2517e454..bb7a7c2e8 100644 --- a/src/date-picker/__tests__/index.test.jsx +++ b/src/date-picker/__tests__/index.test.jsx @@ -238,4 +238,137 @@ describe('DatePicker', () => { expect(blurFn).toBeCalledTimes(1); }); }); + + // test popupProps.onVisibleChange + describe('popupProps.onVisibleChange', () => { + afterEach(() => { + document.querySelectorAll('.t-popup').forEach((node) => node?.remove()); + }); + + const getLatestPanel = () => { + const panels = document.querySelectorAll('.t-date-picker__panel-container'); + return panels[panels.length - 1]; + }; + + it('点击清除按钮关闭面板时触发 onVisibleChange，visible=false 且 trigger=trigger-element-close', async () => { + const onVisibleChange = vi.fn(); + const wrapper = mount( + { + render() { + return ; + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-input').trigger('click'); + await nextTick(); + // hover 输入框以显示清除按钮 + wrapper.find('.t-input').trigger('mouseenter'); + await nextTick(); + // 触发清除 + wrapper.find('.t-input__suffix-clear').trigger('click'); + await nextTick(); + // 验证 onVisibleChange 被调用过：visible=false, trigger=trigger-element-close, 且带事件对象 + expect(onVisibleChange).toHaveBeenCalledWith( + false, + expect.objectContaining({ + trigger: 'trigger-element-close', + e: expect.anything(), + }), + ); + }); + + it('选日期后关闭面板时触发 onVisibleChange，visible=false 且 trigger=trigger-element-close', async () => { + const onVisibleChange = vi.fn(); + const wrapper = mount( + { + render() { + return ; + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-input').trigger('click'); + await nextTick(); + await nextTick(); + await nextTick(); // 等待面板完全打开 + onVisibleChange.mockClear(); + // 点击日期 + const cell = getLatestPanel()?.querySelector( + '.t-date-picker__panel-date .t-date-picker__cell:not(.t-is-disabled)', + ); + if (cell) { + cell.click(); + } + await nextTick(); + await nextTick(); // 等待面板关闭动画完成 + // 验证 onVisibleChange 被调用过：visible=false, trigger=trigger-element-close + expect(onVisibleChange).toHaveBeenCalledWith( + false, + expect.objectContaining({ + trigger: 'trigger-element-close', + e: expect.anything(), + }), + ); + }); + + it('点击预设按钮关闭面板时触发 onVisibleChange，visible=false 且 trigger=trigger-element-close', async () => { + const onVisibleChange = vi.fn(); + const presets = { + 昨天: dayjs().subtract(1, 'day').format('YYYY-MM-DD'), + }; + const wrapper = mount( + { + render() { + return ; + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-input').trigger('click'); + await nextTick(); + await nextTick(); + onVisibleChange.mockClear(); + // 点击预设按钮 + const presetButton = getLatestPanel()?.querySelector('.t-date-picker__presets .t-button'); + if (presetButton) { + presetButton.click(); + } + await nextTick(); + // 验证 onVisibleChange 被调用过：visible=false, trigger=trigger-element-close + expect(onVisibleChange).toHaveBeenCalledWith( + false, + expect.objectContaining({ + trigger: 'trigger-element-close', + e: expect.anything(), + }), + ); + }); + + it('readonly 状态下不触发关闭事件', async () => { + const onVisibleChange = vi.fn(); + const wrapper = mount( + { + render() { + return ; + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-input').trigger('click'); + await nextTick(); + // hover 输入框以显示清除按钮 + wrapper.find('.t-input').trigger('mouseenter'); + await nextTick(); + // 触发清除 + wrapper.find('.t-input__suffix-clear').trigger('click'); + await nextTick(); + // 验证 onVisibleChange 没有被调用（readonly 状态） + expect(onVisibleChange).not.toHaveBeenCalled(); + }); + }); }); diff --git a/src/date-picker/__tests__/rangepicker.test.jsx b/src/date-picker/__tests__/rangepicker.test.jsx index 0ac163770..6cf3fe6db 100644 --- a/src/date-picker/__tests__/rangepicker.test.jsx +++ b/src/date-picker/__tests__/rangepicker.test.jsx @@ -3,7 +3,7 @@ import MockDate from 'mockdate'; import { nextTick } from 'vue'; import { BrowseIcon, LockOnIcon } from 'tdesign-icons-vue'; import dayjs from 'dayjs'; -import DateRangePicker from '@/src/date-picker/index.ts'; +import DateRangePicker, { DateRangePicker as RealDateRangePicker } from '@/src/date-picker/index.ts'; import DateRangePickerPanel from '@/src/date-picker/DateRangePickerPanel'; // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate @@ -276,4 +276,126 @@ describe('DateRangePicker', () => { expect(panels.length).toBe(2); }); }); + + // test popupProps.onVisibleChange + describe('popupProps.onVisibleChange', () => { + afterEach(() => { + document.querySelectorAll('.t-popup').forEach((node) => node?.remove()); + }); + + const getLatestPanel = () => { + const panels = document.querySelectorAll('.t-date-picker__panel-container, .t-date-range-picker__panel'); + return panels[panels.length - 1]; + }; + + it('点击清除按钮关闭面板时触发 onVisibleChange，visible=false 且 trigger=trigger-element-close', async () => { + const onVisibleChange = vi.fn(); + const wrapper = mount( + { + render() { + return ( + + ); + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-range-input').trigger('click'); + await nextTick(); + // hover 输入框以显示清除按钮 + wrapper.find('.t-range-input').trigger('mouseenter'); + await nextTick(); + // 触发清除 + wrapper.find('.t-range-input__suffix-clear').trigger('click'); + await nextTick(); + // 验证 onVisibleChange 被调用过：visible=false, trigger=trigger-element-close, 且带事件对象 + expect(onVisibleChange).toHaveBeenCalledWith( + false, + expect.objectContaining({ + trigger: 'trigger-element-close', + e: expect.anything(), + }), + ); + }); + + it('选完日期范围后关闭面板时触发 onVisibleChange，visible=false 且 trigger=trigger-element-close', async () => { + const onVisibleChange = vi.fn(); + const wrapper = mount( + { + render() { + return ; + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-range-input').trigger('click'); + await nextTick(); + await nextTick(); + await nextTick(); // 等待面板完全打开 + onVisibleChange.mockClear(); + // 点击第一个日期 + const panel = getLatestPanel(); + expect(panel).toBeTruthy(); + let cells = panel.querySelectorAll('.t-date-picker__panel-date .t-date-picker__cell:not(.t-is-disabled)'); + if (cells.length >= 2) { + cells[5].click(); // 选择第一个日期 + await nextTick(); + await nextTick(); // 等待第一个日期选择完成 + cells = panel.querySelectorAll('.t-date-picker__panel-date .t-date-picker__cell:not(.t-is-disabled)'); + cells[12].click(); // 选择第二个日期 + await nextTick(); + await nextTick(); // 等待面板关闭动画完成 + } + // 验证 onVisibleChange 被调用过：visible=false, trigger=trigger-element-close + expect(onVisibleChange).toHaveBeenCalledWith( + false, + expect.objectContaining({ + trigger: 'trigger-element-close', + e: expect.anything(), + }), + ); + }); + + it('点击预设按钮关闭面板时触发 onVisibleChange，visible=false 且 trigger=trigger-element-close', async () => { + const onVisibleChange = vi.fn(); + const presets = { + 昨天: [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')], + }; + const wrapper = mount( + { + render() { + return ; + }, + }, + { attachTo: document.body }, + ); + // 打开面板 + wrapper.find('.t-range-input').trigger('click'); + await nextTick(); + await nextTick(); + await nextTick(); // 等待面板完全打开 + onVisibleChange.mockClear(); + // 点击预设按钮 + const presetButton = getLatestPanel()?.querySelector('.t-date-picker__presets .t-button'); + if (presetButton) { + presetButton.click(); + await nextTick(); + await nextTick(); // 等待面板关闭动画完成 + } + // 验证 onVisibleChange 被调用过：visible=false, trigger=trigger-element-close + expect(onVisibleChange).toHaveBeenCalledWith( + false, + expect.objectContaining({ + trigger: 'trigger-element-close', + e: expect.anything(), + }), + ); + }); + }); }); diff --git a/src/date-picker/hooks/usePopupVisibleChange.ts b/src/date-picker/hooks/usePopupVisibleChange.ts new file mode 100644 index 000000000..96927a9f9 --- /dev/null +++ b/src/date-picker/hooks/usePopupVisibleChange.ts @@ -0,0 +1,46 @@ +import { ref } from '@vue/composition-api'; +import type { PopupProps, PopupVisibleChangeContext } from '../../popup'; + +export interface UsePopupVisibleChangeParams { + readonly?: boolean; + popupProps?: PopupProps; +} + +// 兼容模板 kebab-case 写法（与 Popup / Dropdown 一致） +type KebabPopupProps = PopupProps & { 'on-visible-change'?: PopupProps['onVisibleChange'] }; + +/** + * 统一通知 popupProps.onVisibleChange 并完成受控关闭。 + * 底层 Popup 仅在用户交互时 emit visible-change，程序化关闭不会触发，故此处主动补发，保持单选/范围一致。 + * popupVisible 由本 hook 内部持有（closePopup 直接改写），避免外部传入 ref 后被重新赋值； + * 程序化关闭（选日期/确认/预设/清除）统一标记 trigger: 'trigger-element-close'，消费方可据此区分关闭来源。 + */ +export default function usePopupVisibleChange({ readonly, popupProps }: UsePopupVisibleChangeParams) { + // popupVisible 由本 hook 持有，供调用方读写（打开面板、受控同步等） + const popupVisible = ref(false); + + /** + * 通知 popupProps.onVisibleChange + * @param visible 当前是否可见 + * @param context 触发上下文 + */ + const notifyPopupVisibleChange = (visible: boolean, context?: PopupVisibleChangeContext) => { + if (readonly) return; + // 兼容模板 kebab-case 写法（与 Popup / Dropdown 一致），优先 camelCase + const kebabHandler = (popupProps as KebabPopupProps | undefined)?.['on-visible-change']; + const handler = popupProps?.onVisibleChange ?? kebabHandler; + handler?.(visible, context); + }; + + /** + * 关闭面板 + * @param context 触发上下文，用于通知 popupProps.onVisibleChange + */ + const closePopup = (context?: PopupVisibleChangeContext) => { + if (!popupVisible.value || readonly) return; + notifyPopupVisibleChange(false, { trigger: 'trigger-element-close', ...context }); + popupVisible.value = false; + }; + + return { popupVisible, notifyPopupVisibleChange, closePopup }; +} diff --git a/src/date-picker/hooks/useRange.ts b/src/date-picker/hooks/useRange.ts index a36a485f4..f8c5723c0 100644 --- a/src/date-picker/hooks/useRange.ts +++ b/src/date-picker/hooks/useRange.ts @@ -6,6 +6,7 @@ import { isValidDate, formatDate, getDefaultFormat, parseToDayjs, } from '../../_common/js/date-picker/format'; import useRangeValue from './useRangeValue'; +import usePopupVisibleChange from './usePopupVisibleChange'; export const PARTIAL_MAP = { first: 'start', second: 'end' }; @@ -27,11 +28,15 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { enableTimePicker: props.enableTimePicker, })); - const popupVisible = ref(false); const isHoverCell = ref(false); const activeIndex = ref(0); // 确定当前选中的输入框序号 const inputValue = ref(formatDate(value.value, { format: formatRef.value.format })); // 未真正选中前可能不断变更输入框的内容 + const { popupVisible, notifyPopupVisibleChange, closePopup } = usePopupVisibleChange({ + readonly: props.readonly, + popupProps: props.popupProps, + }); + // input 设置 const rangeInputProps = computed(() => ({ ...props.rangeInputProps, @@ -52,7 +57,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { }, onClear: ({ e }: { e: MouseEvent }) => { e.stopPropagation(); - popupVisible.value = false; + closePopup({ e }); onChange?.([], { dayjsValue: [], trigger: 'clear' }); emit('clear', [], { dayjsValue: [], trigger: 'clear' }); }, @@ -86,7 +91,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { onEnter: (newVal: string[]) => { if (!isValidDate(newVal, formatRef.value.format) && !isValidDate(value.value, formatRef.value.format)) return; - popupVisible.value = false; + closePopup(); if (isValidDate(newVal, formatRef.value.format)) { onChange?.( formatDate(newVal, { @@ -117,7 +122,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { overlayClassName: [props.popupProps?.overlayClassName, `${COMPONENT_NAME.value}__panel-container`], onVisibleChange: (visible: boolean, context: any) => { // 这里劫持了进一步向 popup 传递的 onVisibleChange 事件，为了保证可以在 Datepicker 中使用 popupProps.onVisibleChange，故此处理 - props.popupProps?.onVisibleChange?.(visible, context); + notifyPopupVisibleChange(visible, context); // 输入框点击不关闭面板 if (context.trigger === 'trigger-element-click') { const indexMap = { 0: 'first', 1: 'second' }; @@ -172,5 +177,6 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { isFirstValueSelected, cacheValue, onChange, + closePopup, }; } diff --git a/src/date-picker/hooks/useSingle.ts b/src/date-picker/hooks/useSingle.ts index 1f759f021..d968c2c03 100644 --- a/src/date-picker/hooks/useSingle.ts +++ b/src/date-picker/hooks/useSingle.ts @@ -12,6 +12,7 @@ import { parseToDayjs, } from '../../_common/js/date-picker/format'; import useSingleValue from './useSingleValue'; +import usePopupVisibleChange from './usePopupVisibleChange'; import { TdInputProps } from '../../input/type'; export default function useSingle(props: TdDatePickerProps, { emit }: any) { @@ -30,8 +31,11 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { enableTimePicker: props.multiple ? false : props.enableTimePicker, })); - const popupVisible = ref(false); const isHoverCell = ref(false); + // DatePicker 无 readonly 概念，省略 readonly（undefined 即非只读） + const { popupVisible, notifyPopupVisibleChange, closePopup } = usePopupVisibleChange({ + popupProps: props.popupProps, + }); // 未真正选中前可能不断变更输入框的内容 const inputValue = ref(formatDate(value.value, { format: formatRef.value.format })); @@ -48,9 +52,9 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { [`${COMPONENT_NAME.value}__input--placeholder`]: isHoverCell.value, }, ], - onClear: (context: { e: InputEvent }) => { + onClear: (context: { e: MouseEvent }) => { context?.e?.stopPropagation(); - popupVisible.value = false; + closePopup({ e: context.e }); onChange?.('', { dayjsValue: dayjs(), trigger: 'clear' }); emit('clear', '', { dayjsValue: dayjs(), trigger: 'clear' }); }, @@ -79,13 +83,13 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { onEnter: (val: string) => { if (!val) { onChange?.('', { dayjsValue: dayjs(), trigger: 'enter' }); - popupVisible.value = false; + closePopup(); return; } if (!isValidDate(val, formatRef.value.format) && !isValidDate(value.value, formatRef.value.format)) return; - popupVisible.value = false; + closePopup(); if (isValidDate(val, formatRef.value.format)) { onChange?.( formatDate(val, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }) as DateValue, @@ -115,7 +119,7 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { overlayClassName: [props.popupProps?.overlayClassName, `${COMPONENT_NAME.value}__panel-container`], onVisibleChange: (visible: boolean, context: any) => { // 这里劫持了进一步向 popup 传递的 onVisibleChange 事件，为了保证可以在 Datepicker 中使用 popupProps.onVisibleChange，故此处理 - props.popupProps?.onVisibleChange?.(visible, context); + notifyPopupVisibleChange(visible, context); // 输入框点击不关闭面板 if (context.trigger === 'trigger-element-click') { popupVisible.value = true; @@ -154,5 +158,6 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { cacheValue, isHoverCell, onChange, + closePopup, }; } diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index dd8994c52..60c69b26c 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -209,7 +209,7 @@ export interface TdDateRangePickerProps { /** * 是否只读 */ - readonly?: Boolean; + readonly?: boolean; /** * 是否显示时间选择 * @default false diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index da6341ac9..fa8340190 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -6,29 +6,29 @@ name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -delay | Number / Array | - | delay to show or hide popover。Typescript：`number \| Array` | N +attach | String / Function | 'body' | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +content | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +delay | Number / Array | - | delay to show or hide popover。Typescript: `number \| Array` | N destroyOnClose | Boolean | false | \- | N disabled | Boolean | - | \- | N hideEmptyPopup | Boolean | false | \- | N -overlayClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -overlayInnerClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -overlayInnerStyle | Boolean / Object / Function | - | Typescript：`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -overlayStyle | Boolean / Object / Function | - | Typescript：`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N +overlayClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayInnerClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayInnerStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +placement | String | top | Typescript: `PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N popperOptions | Object | - | popper initial options，details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N -triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -visible | Boolean | - | `v-model` is supported。Typescript：`boolean` | N -defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N +triggerElement | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +visible | Boolean | - | `v-model` is supported。Typescript: `boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript: `boolean` | N zIndex | Number | - | \- | N -onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on popup content click | N -onScroll | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N -onScrollToBottom | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N -onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
trigger on popup content click | N +onScroll | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onScrollToBottom | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onVisibleChange | Function | | Typescript: `(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### Popup Events @@ -37,17 +37,7 @@ name | params | description overlay-click | `(context: { e: MouseEvent })` | trigger on popup content click scroll | `(context: { e: WheelEvent })` | \- scroll-to-bottom | `(context: { e: WheelEvent })` | \- -visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
- -### PopupPlugin - -support `this.$popup` - -name | params | default | description --- | -- | -- | -- -content | String / Slot / Function | - | required。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) -popupProps | Object | - | \- -triggerElement | String | - | required +visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
### PopupInstanceFunctions 组件实例方法 diff --git a/src/popup/popup.md b/src/popup/popup.md index 705302399..94d471e3a 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -38,7 +38,7 @@ zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和 onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
内容面板点击时触发 | N onScroll | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉选项滚动事件 | N onScrollToBottom | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 | N -onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
| N +onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### Popup Events @@ -47,17 +47,7 @@ onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVi overlay-click | `(context: { e: MouseEvent })` | 内容面板点击时触发 scroll | `(context: { e: WheelEvent })` | 下拉选项滚动事件 scroll-to-bottom | `(context: { e: WheelEvent })` | 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 -visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
- -### PopupPlugin - -同时也支持 `this.$popup`。 - -名称 | 参数 | 返回值 | 描述 --- | -- | -- | -- -content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) -popupProps | Object | - | 透传气泡框/浮层的属性 -triggerElement | String | - | 必需。触发气泡框/浮层的元素，传入选择器即可 +visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
### PopupInstanceFunctions 组件实例方法 diff --git a/src/popup/type.ts b/src/popup/type.ts index 8b3817b9d..79ab3c3f9 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -5,7 +5,7 @@ * */ import { Instance } from '@popperjs/core'; -import { TNode, ClassName, Styles, AttachNode } from '../common'; +import type { TNode, ClassName, Styles, AttachNode } from '../common'; export interface TdPopupProps { /** @@ -156,5 +156,6 @@ export type PopupTriggerSource = | 'trigger-element-blur' | 'trigger-element-focus' | 'trigger-element-mousedown' + | 'trigger-element-close' | 'context-menu' | 'keydown-esc'; diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md index 957240042..f03d04348 100644 --- a/src/tree-select/tree-select.en-US.md +++ b/src/tree-select/tree-select.en-US.md @@ -10,52 +10,52 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -data | Array | [] | Typescript：`Array` | N -disabled | Boolean | - | \- | N -empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -filter | Function | - | Typescript：`(filterWords: string, option: DataOption) => boolean` | N +collapsedItems | Slot / Function | - | Typescript: `TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +data | Array | [] | Typescript: `Array` | N +disabled | Boolean | undefined | \- | N +empty | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filter | Function | - | Typescript: `(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N -inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +inputProps | Object | - | Typescript: `InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +inputValue | String / Number | - | input value。`.sync` is supported。Typescript: `string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript: `string` | N +keys | Object | - | alias filed name in data。Typescript: `TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N -loadingText | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loadingText | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N -panelBottomContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -panelTopContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +panelBottomContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +panelTopContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String | undefined | \- | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +popupProps | Object | - | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N popupVisible | Boolean | undefined | show popup。`.sync` is supported | N defaultPopupVisible | Boolean | undefined | show popup。uncontrolled property | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N -selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +selectInputProps | Object | - | Typescript: `SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N -suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -treeProps | Object | - | Typescript：`TreeProps`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -value | String / Number / Object / Array | - | `v-model` is supported。Typescript：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -valueDisplay | Slot / Function | - | Typescript：`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +suffix | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +suffixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tagProps | Object | - | Typescript: `TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +tips | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeProps | Object | - | Typescript: `TreeProps`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +value | String / Number / Object / Array | - | `v-model` is supported。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +valueDisplay | Slot / Function | - | Typescript: `string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N valueType | String | value | options: value/object | N -onBlur | Function | | Typescript：`(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N -onChange | Function | | Typescript：`(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N -onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N -onEnter | Function | | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N -onFocus | Function | | Typescript：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N -onInputChange | Function | | Typescript：`(value: InputValue, context: SelectInputValueChangeContext) => void`
| N -onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N -onRemove | Function | | Typescript：`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N -onSearch | Function | | Typescript：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N +onBlur | Function | | Typescript: `(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N +onChange | Function | | Typescript: `(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onEnter | Function | | Typescript: `(context: { inputValue: InputValue; e: KeyboardEvent; value: TreeValueType }) => void`
| N +onFocus | Function | | Typescript: `(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N +onInputChange | Function | | Typescript: `(value: InputValue, context: SelectInputValueChangeContext) => void`
| N +onPopupVisibleChange | Function | | Typescript: `(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onRemove | Function | | Typescript: `(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N +onSearch | Function | | Typescript: `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N ### TreeSelect Events @@ -67,6 +67,6 @@ clear | `(context: { e: MouseEvent })` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | \- focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- input-change | `(value: InputValue, context: SelectInputValueChangeContext)` | \- -popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
+popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | \- diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md index 87c9aaf1b..fa5dc0bb3 100644 --- a/src/tree-select/tree-select.md +++ b/src/tree-select/tree-select.md @@ -53,7 +53,7 @@ onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
onEnter | Function | | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInputChange | Function | | TS 类型：`(value: InputValue, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 | N -onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | TS 类型：`(options: RemoveOptions) => void`
多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | TS 类型：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
输入值变化时，触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`，即一旦存在这个远程搜索事件 `filter` 失效 | N @@ -67,6 +67,6 @@ clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | 回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | 输入框获得焦点时触发 input-change | `(value: InputValue, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 -popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
+popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | 多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | 输入值变化时，触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`，即一旦存在这个远程搜索事件 `filter` 失效 diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index ba447fe72..5476bbab8 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -124,7 +124,7 @@ export interface TdTreeSelectProps< */ placeholder?: string; /** - * 透传给 popup 组件的全部属性 + * 透传 Popup 组件全部属性 */ popupProps?: PopupProps; /** @@ -251,7 +251,7 @@ export interface TreeSelectChangeContext { export type TreeSelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'; export interface TreeSelectPopupVisibleContext { - e?: PopupTriggerEvent | Event; + e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource | 'clear'; }