diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts index 3b40bb0c03..882bb7c559 100644 --- a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts +++ b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts @@ -10,341 +10,341 @@ import { ColumnType, RowHeightMap } from '../const'; import { calcEachColumnWidth } from '../utils'; export function useDataGrid(props: DataGridProps, ctx: SetupContext) { - const { data, columns, size, virtualScroll } = toRefs(props); - const scrollRef = ref(); - const headBoxRef = ref(); - const bodyContentWidth = ref(0); - const bodyContentHeight = ref(0); - const bodyScrollLeft = ref(0); - const isTreeGrid = ref(false); - const renderFixedLeftColumnData = ref([]); - const renderFixedRightColumnData = ref([]); - const renderRowData = ref([]); - const renderColumnData = ref([]); - const sliceData = computed(() => data.value.slice()); - const sliceColumns = computed(() => columns.value.slice()); - const rowHeight = RowHeightMap[size.value]; - let tick = false; - let resizeObserver: ResizeObserver; - const scrollYParams: ScrollYParams = { - distance: 0, - renderCountPerScreen: 0, - scrollScaleY: [0, 0], - originRowData: [], - defaultSortRowData: [], - }; - const scrollXParams: ScrollXParams = { - distance: 0, - totalColumn: 0, - bufferSize: 5, - scrollViewWidth: 0, - scrollScaleX: [0, 0], - originColumnData: [] - }; - const { translateX, translateY, virtualColumnData, virtualRowData, calcVirtualRowData, calcVirtualColumnData, resetVirtualRowData } = - useDataGridScroll(); - const { sort, execSortMethod, addGridThContextToMap, clearAllSortState } = useColumnSort(scrollYParams, afterSort); - const { - allChecked, - halfAllChecked, - updateInnerRowsData, - getShowRowsData, - toggleRowExpansion, - toggleAllRowExpansion, - toggleRowChecked, - toggleAllRowChecked, - getCheckedRows, - } = useDataGridTree(props, ctx, afterToggleExpandTree); - const { afterColumnDragend } = useDataGridColumnDrag( - bodyContentWidth, - scrollRef, - renderFixedLeftColumnData, - renderFixedRightColumnData, - renderColumnData - ); + const { data, columns, size, virtualScroll } = toRefs(props); + const scrollRef = ref(); + const headBoxRef = ref(); + const bodyContentWidth = ref(0); + const bodyContentHeight = ref(0); + const bodyScrollLeft = ref(0); + const isTreeGrid = ref(false); + const renderFixedLeftColumnData = ref([]); + const renderFixedRightColumnData = ref([]); + const renderRowData = ref([]); + const renderColumnData = ref([]); + const sliceData = computed(() => data.value.slice()); + const sliceColumns = computed(() => columns.value.slice()); + const rowHeight = RowHeightMap[size.value]; + let tick = false; + let resizeObserver: ResizeObserver; + const scrollYParams: ScrollYParams = { + distance: 0, + renderCountPerScreen: 0, + scrollScaleY: [0, 0], + originRowData: [], + defaultSortRowData: [], + }; + const scrollXParams: ScrollXParams = { + distance: 0, + totalColumn: 0, + bufferSize: 5, + scrollViewWidth: 0, + scrollScaleX: [0, 0], + originColumnData: [], + }; + const { translateX, translateY, virtualColumnData, virtualRowData, calcVirtualRowData, calcVirtualColumnData, resetVirtualRowData } = + useDataGridScroll(); + const { sort, execSortMethod, addGridThContextToMap, clearAllSortState } = useColumnSort(scrollYParams, afterSort); + const { + allChecked, + halfAllChecked, + updateInnerRowsData, + getShowRowsData, + toggleRowExpansion, + toggleAllRowExpansion, + toggleRowChecked, + toggleAllRowChecked, + getCheckedRows, + } = useDataGridTree(props, ctx, afterToggleExpandTree); + const { afterColumnDragend } = useDataGridColumnDrag( + bodyContentWidth, + scrollRef, + renderFixedLeftColumnData, + renderFixedRightColumnData, + renderColumnData + ); - const initOriginRowData = () => { - let bodyTotalHeight = 0; - const rowsData = getShowRowsData(); - scrollYParams.originRowData = []; - for (let i = 0; i < rowsData.length; i++) { - const itemRow = rowsData[i]; - itemRow.height = rowHeight; - itemRow.offsetTop = bodyTotalHeight; - scrollYParams.originRowData.push(itemRow); - bodyTotalHeight += rowHeight; - if (!isTreeGrid.value) { - isTreeGrid.value = !itemRow.isLeaf; - } - } - if (!virtualScroll.value) { - renderRowData.value = scrollYParams.originRowData; - } - scrollYParams.defaultSortRowData = scrollYParams.originRowData; - bodyContentHeight.value = bodyTotalHeight; - }; - const initVirtualRowData = (distance = 0) => { - scrollYParams.distance = distance; - scrollYParams.renderCountPerScreen = Math.ceil(scrollRef.value!.clientHeight / rowHeight); - scrollYParams.scrollScaleY = [0, scrollYParams.renderCountPerScreen * rowHeight]; - calcVirtualRowData(scrollYParams); - }; + const initOriginRowData = () => { + let bodyTotalHeight = 0; + const rowsData = getShowRowsData(); + scrollYParams.originRowData = []; + for (let i = 0; i < rowsData.length; i++) { + const itemRow = rowsData[i]; + itemRow.height = rowHeight; + itemRow.offsetTop = bodyTotalHeight; + scrollYParams.originRowData.push(itemRow); + bodyTotalHeight += rowHeight; + if (!isTreeGrid.value) { + isTreeGrid.value = !itemRow.isLeaf; + } + } + if (!virtualScroll.value) { + renderRowData.value = scrollYParams.originRowData; + } + scrollYParams.defaultSortRowData = scrollYParams.originRowData; + bodyContentHeight.value = bodyTotalHeight; + }; + const initVirtualRowData = (distance: number) => { + scrollYParams.distance = distance; + scrollYParams.renderCountPerScreen = Math.ceil(scrollRef.value!.clientHeight / rowHeight); + scrollYParams.scrollScaleY = [distance, scrollYParams.renderCountPerScreen * rowHeight]; + calcVirtualRowData(scrollYParams); + }; - const initOriginColumnData = () => { - let bodyTotalWidth = 0; - let columnId = 0; - const scrollViewWidth = scrollRef.value?.clientWidth || 0; - scrollXParams.totalColumn = columns.value.length; - renderFixedLeftColumnData.value = []; - renderFixedRightColumnData.value = []; - scrollXParams.originColumnData = []; - const columnsWithRealWidth = calcEachColumnWidth(columns.value, scrollViewWidth); - for (let i = 0; i < scrollXParams.totalColumn; i++) { - const itemColumn: InnerColumnConfig = { - ...columnsWithRealWidth[i], - offsetLeft: bodyTotalWidth, - $columnId: `columnId-${columnId++}`, - }; - const prevColumn = i > 0 ? columnsWithRealWidth[i - 1] : null; - if (prevColumn) { - if (prevColumn.type && ColumnType.includes(prevColumn.type) && !itemColumn.type) { - itemColumn.$showExpandTreeIcon = true; - } - } else { - if (!itemColumn.type) { - itemColumn.$showExpandTreeIcon = true; - } - } + const initOriginColumnData = () => { + let bodyTotalWidth = 0; + let columnId = 0; + const scrollViewWidth = scrollRef.value?.clientWidth || 0; + scrollXParams.totalColumn = columns.value.length; + renderFixedLeftColumnData.value = []; + renderFixedRightColumnData.value = []; + scrollXParams.originColumnData = []; + const columnsWithRealWidth = calcEachColumnWidth(columns.value, scrollViewWidth); + for (let i = 0; i < scrollXParams.totalColumn; i++) { + const itemColumn: InnerColumnConfig = { + ...columnsWithRealWidth[i], + offsetLeft: bodyTotalWidth, + $columnId: `columnId-${columnId++}`, + }; + const prevColumn = i > 0 ? columnsWithRealWidth[i - 1] : null; + if (prevColumn) { + if (prevColumn.type && ColumnType.includes(prevColumn.type) && !itemColumn.type) { + itemColumn.$showExpandTreeIcon = true; + } + } else { + if (!itemColumn.type) { + itemColumn.$showExpandTreeIcon = true; + } + } - if (itemColumn.fixed === 'left') { - renderFixedLeftColumnData.value.push(itemColumn); - } else if (itemColumn.fixed === 'right') { - renderFixedRightColumnData.value.push(itemColumn); - } else { - scrollXParams.originColumnData.push(itemColumn); - } - bodyTotalWidth += itemColumn.width as number; - } - if (!virtualScroll.value) { - renderColumnData.value = scrollXParams.originColumnData; - translateX.value = renderColumnData.value[0]?.offsetLeft ?? 0; - } - bodyContentWidth.value = bodyTotalWidth; - }; - const initVirtualColumnData = (distance = 0, scrollViewWidth: number) => { - scrollXParams.distance = distance; - scrollXParams.scrollViewWidth = scrollViewWidth; - scrollXParams.scrollScaleX = [0, scrollRef.value!.clientWidth]; - calcVirtualColumnData(scrollXParams, false); - } + if (itemColumn.fixed === 'left') { + renderFixedLeftColumnData.value.push(itemColumn); + } else if (itemColumn.fixed === 'right') { + renderFixedRightColumnData.value.push(itemColumn); + } else { + scrollXParams.originColumnData.push(itemColumn); + } + bodyTotalWidth += itemColumn.width as number; + } + if (!virtualScroll.value) { + renderColumnData.value = scrollXParams.originColumnData; + translateX.value = renderColumnData.value[0]?.offsetLeft ?? 0; + } + bodyContentWidth.value = bodyTotalWidth; + }; + const initVirtualColumnData = (distance = 0, scrollViewWidth: number) => { + scrollXParams.distance = distance; + scrollXParams.scrollViewWidth = scrollViewWidth; + scrollXParams.scrollScaleX = [0, scrollRef.value!.clientWidth]; + calcVirtualColumnData(scrollXParams, false); + }; - function afterSort() { - scrollYParams.scrollScaleY = [0, 0]; - if (!virtualScroll.value) { - renderRowData.value = scrollYParams.originRowData; - } else { - calcVirtualRowData(scrollYParams); - } - } + function afterSort() { + scrollYParams.scrollScaleY = [0, 0]; + if (!virtualScroll.value) { + renderRowData.value = scrollYParams.originRowData; + } else { + calcVirtualRowData(scrollYParams); + } + } - function afterToggleExpandTree() { - initOriginRowData(); - scrollYParams.scrollScaleY = [0, 0]; - virtualScroll.value && calcVirtualRowData(scrollYParams); - } + function afterToggleExpandTree() { + initOriginRowData(); + scrollYParams.scrollScaleY = [0, 0]; + virtualScroll.value && calcVirtualRowData(scrollYParams); + } - function refreshRowsData() { - let distance = 0; - updateInnerRowsData(); - initOriginRowData(); - nextTick(() => { - if (virtualScroll.value && scrollRef.value && scrollYParams.originRowData.length) { - const scrollTop = scrollRef.value.scrollTop; - distance = scrollTop > scrollYParams.originRowData[scrollYParams.originRowData.length - 1].offsetTop! ? 0 : scrollTop; - initVirtualRowData(distance); - } else { - resetVirtualRowData(); - } - }); - } + function refreshRowsData() { + let distance = 0; + updateInnerRowsData(); + initOriginRowData(); + nextTick(() => { + if (virtualScroll.value && scrollRef.value && scrollYParams.originRowData.length) { + const scrollTop = scrollRef.value.scrollTop; + distance = scrollTop > scrollYParams.originRowData[scrollYParams.originRowData.length - 1].offsetTop! ? 0 : scrollTop; + initVirtualRowData(distance); + } else { + resetVirtualRowData(); + } + }); + } - watch( - sliceData, - () => { - refreshRowsData(); - }, - { immediate: true } - ); - watch( - sliceColumns, - () => { - if (!sliceColumns.value.length) { - renderColumnData.value = []; - return; - } - let distance = 0; - nextTick(() => { - initOriginColumnData(); - if (virtualScroll.value && scrollRef.value) { - distance = scrollRef.value.scrollLeft; - initVirtualColumnData(distance, scrollRef.value.clientWidth); - } - }); - }, - { immediate: true } - ); + watch( + sliceData, + () => { + refreshRowsData(); + }, + { immediate: true } + ); + watch( + sliceColumns, + () => { + if (!sliceColumns.value.length) { + renderColumnData.value = []; + return; + } + let distance = 0; + nextTick(() => { + initOriginColumnData(); + if (virtualScroll.value && scrollRef.value) { + distance = scrollRef.value.scrollLeft; + initVirtualColumnData(distance, scrollRef.value.clientWidth); + } + }); + }, + { immediate: true } + ); - watch( - virtualRowData, - (val: InnerRowData[]) => { - if (virtualScroll.value) { - renderRowData.value = val; - } - }, - { immediate: true } - ); + watch( + virtualRowData, + (val: InnerRowData[]) => { + if (virtualScroll.value) { + renderRowData.value = val; + } + }, + { immediate: true } + ); - watch( - virtualColumnData, - (val: InnerColumnConfig[]) => { - if (virtualScroll.value) { - renderColumnData.value = val; - } - }, - { immediate: true } - ); + watch( + virtualColumnData, + (val: InnerColumnConfig[]) => { + if (virtualScroll.value) { + renderColumnData.value = val; + } + }, + { immediate: true } + ); - const onScroll = (e: Event) => { - if (tick) { - return; - } - tick = true; - requestAnimationFrame(() => { - tick = false; - }); - const scrollLeft = (e.target as HTMLElement).scrollLeft; - const scrollTop = (e.target as HTMLElement).scrollTop; - if (scrollLeft !== scrollXParams.distance) { - headBoxRef.value && (headBoxRef.value.scrollLeft = scrollLeft); - bodyScrollLeft.value = scrollLeft; - if (scrollXParams.originColumnData.length === 0) { - return; - } - scrollXParams.distance = scrollLeft; - virtualScroll.value && calcVirtualColumnData(scrollXParams); - } else if (scrollTop !== scrollYParams.distance) { - if (scrollYParams.originRowData.length === 0) { - return; - } - scrollYParams.distance = scrollTop; - virtualScroll.value && calcVirtualRowData(scrollYParams); - } - }; + const onScroll = (e: Event) => { + if (tick) { + return; + } + tick = true; + requestAnimationFrame(() => { + tick = false; + }); + const scrollLeft = (e.target as HTMLElement).scrollLeft; + const scrollTop = (e.target as HTMLElement).scrollTop; + if (scrollLeft !== scrollXParams.distance) { + headBoxRef.value && (headBoxRef.value.scrollLeft = scrollLeft); + bodyScrollLeft.value = scrollLeft; + if (scrollXParams.originColumnData.length === 0) { + return; + } + scrollXParams.distance = scrollLeft; + virtualScroll.value && calcVirtualColumnData(scrollXParams); + } else if (scrollTop !== scrollYParams.distance) { + if (scrollYParams.originRowData.length === 0) { + return; + } + scrollYParams.distance = scrollTop; + virtualScroll.value && calcVirtualRowData(scrollYParams); + } + }; - onMounted(() => { - scrollRef.value?.addEventListener('scroll', onScroll); - if (typeof window !== 'undefined' && scrollRef.value) { - resizeObserver = new ResizeObserver(() => { - if (scrollRef.value) { - let distance = 0; - initOriginColumnData(); - distance = scrollRef.value!.scrollLeft; - virtualScroll.value && initVirtualColumnData(distance, scrollRef.value!.clientWidth); - } - }); - resizeObserver.observe(scrollRef.value); - } - }); + onMounted(() => { + scrollRef.value?.addEventListener('scroll', onScroll); + if (typeof window !== 'undefined' && scrollRef.value) { + resizeObserver = new ResizeObserver(() => { + if (scrollRef.value) { + let distance = 0; + initOriginColumnData(); + distance = scrollRef.value!.scrollLeft; + virtualScroll.value && initVirtualColumnData(distance, scrollRef.value!.clientWidth); + } + }); + resizeObserver.observe(scrollRef.value); + } + }); - onBeforeMount(() => { - resizeObserver?.disconnect(); - }); + onBeforeMount(() => { + resizeObserver?.disconnect(); + }); - return { - scrollRef, - headBoxRef, - bodyScrollLeft, - bodyContentHeight, - bodyContentWidth, - translateX, - translateY, - renderFixedLeftColumnData, - renderFixedRightColumnData, - renderColumnData, - renderRowData, - isTreeGrid, - allChecked, - halfAllChecked, - sort, - getCheckedRows, - execSortMethod, - addGridThContextToMap, - clearAllSortState, - toggleRowExpansion, - toggleAllRowExpansion, - toggleRowChecked, - toggleAllRowChecked, - afterColumnDragend, - refreshRowsData, - } + return { + scrollRef, + headBoxRef, + bodyScrollLeft, + bodyContentHeight, + bodyContentWidth, + translateX, + translateY, + renderFixedLeftColumnData, + renderFixedRightColumnData, + renderColumnData, + renderRowData, + isTreeGrid, + allChecked, + halfAllChecked, + sort, + getCheckedRows, + execSortMethod, + addGridThContextToMap, + clearAllSortState, + toggleRowExpansion, + toggleAllRowExpansion, + toggleRowChecked, + toggleAllRowChecked, + afterColumnDragend, + refreshRowsData, + }; } export function useDataGridStyle(props: DataGridProps, scrollRef: Ref) { - const ns = useNamespace('data-grid'); - const { striped, rowHoveredHighlight, fixHeader, headerBg, borderType, shadowType, virtualScroll } = toRefs(props); - const scrollPosition = ref('left'); - const sliceColumns = computed(() => props.columns.slice()); + const ns = useNamespace('data-grid'); + const { striped, rowHoveredHighlight, fixHeader, headerBg, borderType, shadowType, virtualScroll } = toRefs(props); + const scrollPosition = ref('left'); + const sliceColumns = computed(() => props.columns.slice()); - const gridClasses = computed(() => ({ - [ns.b()]: true, - [ns.m('fix-header')]: fixHeader.value, - [ns.m('striped')]: striped.value, - [ns.m('row-hover-highlight')]: rowHoveredHighlight.value, - [ns.m('header-bg')]: headerBg.value, - [ns.m(borderType.value)]: Boolean(borderType.value), - [ns.m(shadowType.value)]: Boolean(shadowType.value), - [ns.m('is-virtual')]: Boolean(virtualScroll.value), - [ns.m(`scroll-${scrollPosition.value}`)]: Boolean(scrollPosition.value), - })); + const gridClasses = computed(() => ({ + [ns.b()]: true, + [ns.m('fix-header')]: fixHeader.value, + [ns.m('striped')]: striped.value, + [ns.m('row-hover-highlight')]: rowHoveredHighlight.value, + [ns.m('header-bg')]: headerBg.value, + [ns.m(borderType.value)]: Boolean(borderType.value), + [ns.m(shadowType.value)]: Boolean(shadowType.value), + [ns.m('is-virtual')]: Boolean(virtualScroll.value), + [ns.m(`scroll-${scrollPosition.value}`)]: Boolean(scrollPosition.value), + })); - const onScroll = (e: Event) => { - const target = e.target as HTMLElement; - const scrollLeft = target.scrollLeft; - if (scrollLeft === 0) { - if (target.clientWidth === target.scrollWidth) { - scrollPosition.value = ''; - } else { - scrollPosition.value = 'left'; - } - } else if (scrollLeft + target.clientWidth === target.scrollWidth) { - scrollPosition.value = 'right'; - } else { - scrollPosition.value = 'middle'; - } - }; + const onScroll = (e: Event) => { + const target = e.target as HTMLElement; + const scrollLeft = target.scrollLeft; + if (scrollLeft === 0) { + if (target.clientWidth === target.scrollWidth) { + scrollPosition.value = ''; + } else { + scrollPosition.value = 'left'; + } + } else if (scrollLeft + target.clientWidth === target.scrollWidth) { + scrollPosition.value = 'right'; + } else { + scrollPosition.value = 'middle'; + } + }; - const initScrollPosition = () => { - scrollPosition.value = scrollRef.value!.clientWidth === scrollRef.value!.clientWidth ? '' : 'left'; - }; + const initScrollPosition = () => { + scrollPosition.value = scrollRef.value!.clientWidth === scrollRef.value!.clientWidth ? '' : 'left'; + }; - watch( - sliceColumns, - () => { - if (scrollRef.value) { - // 等待列渲染完成再判断是否有滚动条 - setTimeout(initScrollPosition); - } - }, - { flush: 'post' } - ); + watch( + sliceColumns, + () => { + if (scrollRef.value) { + // 等待列渲染完成再判断是否有滚动条 + setTimeout(initScrollPosition); + } + }, + { flush: 'post' } + ); - onMounted(() => { - if (scrollRef.value) { - scrollRef.value.addEventListener('scroll', onScroll); - // 等待列渲染完成再判断是否有滚动条 - setTimeout(initScrollPosition); - } - }); + onMounted(() => { + if (scrollRef.value) { + scrollRef.value.addEventListener('scroll', onScroll); + // 等待列渲染完成再判断是否有滚动条 + setTimeout(initScrollPosition); + } + }); - return { gridClasses }; -} \ No newline at end of file + return { gridClasses }; +} diff --git a/packages/devui-vue/devui/tooltip/src/tooltip-types.ts b/packages/devui-vue/devui/tooltip/src/tooltip-types.ts index 02d218c8cc..87079000a7 100644 --- a/packages/devui-vue/devui/tooltip/src/tooltip-types.ts +++ b/packages/devui-vue/devui/tooltip/src/tooltip-types.ts @@ -1,6 +1,19 @@ -import type { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue'; +import type { ComputedRef, ExtractPropTypes, PropType, Ref, TeleportProps } from 'vue'; -export type BasePlacement = 'top' | 'right' | 'bottom' | 'left'; +export type Alignment = 'start' | 'end'; +export type BasePlacement = + | 'top' + | 'right' + | 'bottom' + | 'left' + | 'top-start' + | 'top-end' + | 'right-start' + | 'right-end' + | 'bottom-start' + | 'bottom-end' + | 'left-start' + | 'left-end'; export const tooltipProps = { content: { @@ -11,6 +24,10 @@ export const tooltipProps = { type: [String, Array] as PropType>, default: 'top', }, + align: { + type: String as PropType | null, + default: null, + }, showAnimation: { type: Boolean, default: true, @@ -34,7 +51,15 @@ export const tooltipProps = { hideAfter: { type: Number, default: 0, - } + }, + overlayClass: { + type: String, + default: '', + }, + teleport: { + type: [String, HTMLElement] as PropType, + default: 'body', + }, }; export type TooltipProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/tooltip/src/tooltip.tsx b/packages/devui-vue/devui/tooltip/src/tooltip.tsx index 5a765dcb03..add7287d26 100644 --- a/packages/devui-vue/devui/tooltip/src/tooltip.tsx +++ b/packages/devui-vue/devui/tooltip/src/tooltip.tsx @@ -11,7 +11,7 @@ export default defineComponent({ name: 'DTooltip', props: tooltipProps, setup(props: TooltipProps, { slots }) { - const { showAnimation, content } = toRefs(props); + const { showAnimation, content, align, overlayClass, teleport } = toRefs(props); const origin = ref(); const tooltipRef = ref(); const { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseleave, onMouseenterOverlay } = useTooltip( @@ -23,13 +23,14 @@ export default defineComponent({ [ns.b()]: true, [ns.m(placement.value)]: true, [ns.m('with-content')]: slots.content, + [overlayClass.value]: true, })); provide(POPPER_TRIGGER_TOKEN, origin); return () => ( <> {slots.default?.()} - + Overflow Hidden @@ -103,7 +103,9 @@ import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { return { - message: ref('规范的组件化目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依为产品业务。产品业务永远比组件化本身更重要，业务第一。规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存量优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件化。'), + message: ref( + '规范的组件化目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依为产品业务。产品业务永远比组件化本身更重要，业务第一。规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存量优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件化。' + ), }; }, }); @@ -123,22 +125,25 @@ export default defineComponent({ ### Tooltip 参数 -| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo | -| :---------------- | :------------------------------------------------- | :----- | :------------------------------------------------ | :-------------------- | -| content | `string` | -- | 可选，Tooltip 显示内容 | [基本用法](#基本用法) | -| position | [BasePlacement \| BasePlacement[]](#baseplacement) | top | 可选，Tooltip 显示位置 | [基本用法](#基本用法) | -| show-animation | `boolean` | true | 可选，是否显示动画 | [基本用法](#基本用法) | -| mouse-enter-delay | `number` | 150 | 可选，鼠标移入后延时多久才显示 Tooltip，单位是 ms | [延时触发](#延时触发) | -| mouse-leave-delay | `number` | 100 | 可选，鼠标移出后延时多久才隐藏 Tooltip，单位是 ms | [延时触发](#延时触发) | -| disabled | `boolean` | false | 可选，Tooltip 是否可用 | [基本用法](#基本用法) | -| enterable | `boolean` | true | 可选，鼠标是否可以进入到 tooltip 中 | [基本用法](#基本用法) | -| hide-after | `number` | 0 | 可选，tooltip 出现后自动隐藏延时，单位为 ms | [基本用法](#基本用法) | +| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo | +| :---------------- | :------------------------------------------------- | :----- | :---------------------------------------------------------------------------------------------------------------- | :-------------------- | +| content | `string` | -- | 可选，Tooltip 显示内容 | [基本用法](#基本用法) | +| position | [BasePlacement \| BasePlacement[]](#baseplacement) | top | 可选，Tooltip 显示位置 | [基本用法](#基本用法) | +| align | `start \| end \| null` | null | 可选，对齐方式，默认居中对齐。 | | +| show-animation | `boolean` | true | 可选，是否显示动画 | [基本用法](#基本用法) | +| mouse-enter-delay | `number` | 150 | 可选，鼠标移入后延时多久才显示 Tooltip，单位是 ms | [延时触发](#延时触发) | +| mouse-leave-delay | `number` | 100 | 可选，鼠标移出后延时多久才隐藏 Tooltip，单位是 ms | [延时触发](#延时触发) | +| disabled | `boolean` | false | 可选，Tooltip 是否可用 | [基本用法](#基本用法) | +| enterable | `boolean` | true | 可选，鼠标是否可以进入到 tooltip 中 | [基本用法](#基本用法) | +| hide-after | `number` | 0 | 可选，tooltip 出现后自动隐藏延时，单位为 ms | [基本用法](#基本用法) | +| overlay-class | `string` | '' | 可选，自定义弹出层的样式 | | +| teleport | `string \| HTMLElement` | 'body' | 可选，挂载节点，等同于 Teleport 组件的[to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | ### Tooltip 插槽 -| 插槽名 | 说明 | -| :------ | :--------------------- | -| default | 默认插槽，设置触发元素 | +| 插槽名 | 说明 | +| :------ | :------------------------- | +| default | 默认插槽，设置触发元素 | | content | 内容插槽，自定义内容与样式 | ### Tooltip 类型定义 diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index e6b7b16f75..baa7a95a07 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.8", + "version": "1.6.9", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [