tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 8.59 kB
Source Map (JSON)
{"version":3,"file":"ellipsis.mjs","sources":["../../../../components/table/components/ellipsis.tsx"],"sourcesContent":["/** 超出省略显示 */\nimport { defineComponent, PropType, ref, computed, onMounted, onUpdated } from 'vue';\nimport { debounce } from 'lodash-es';\nimport type { AttachNode, TNode } from '../../common';\nimport { useContent } from '@tdesign/shared-hooks';\nimport { isTextEllipsis } from '@tdesign/shared-utils';\nimport TTooltip, { TooltipProps } from '../../tooltip';\n\nexport interface EllipsisProps {\n content: string | TNode;\n default: string | TNode;\n tooltipContent: string | number | TNode;\n placement: TooltipProps['placement'];\n attach?: AttachNode;\n tooltipProps: TooltipProps;\n zIndex: number;\n}\n\nexport default defineComponent({\n name: 'TEllipsis',\n props: {\n /** 内容 */\n content: {\n type: [String, Function] as PropType<EllipsisProps['content']>,\n },\n /** 内容，同 content */\n default: {\n type: [String, Function] as PropType<EllipsisProps['default']>,\n },\n /** 内容，同 content，可以单独自定义浮层内容，无需和触发元素保持一致 */\n tooltipContent: {\n type: [String, Number, Function] as PropType<EllipsisProps['tooltipContent']>,\n },\n /** 浮层位置 */\n placement: String as PropType<EllipsisProps['placement']>,\n /** 挂载元素 */\n attach: [String, Function] as PropType<EllipsisProps['attach']>,\n /** 透传 Tooltip 组件属性 */\n tooltipProps: Object as PropType<EllipsisProps['tooltipProps']>,\n zIndex: Number,\n overlayClassName: String,\n classPrefix: {\n type: String,\n default: 't',\n },\n },\n\n setup(props) {\n const root = ref();\n\n // 用于判断是否需要渲染 Tooltip\n const flag = ref(false);\n const isOverflow = ref(false);\n const renderContent = useContent();\n\n const ellipsisClasses = computed(() => [\n `${props.classPrefix}-table__ellipsis`,\n `${props.classPrefix}-text-ellipsis`,\n ]);\n\n const innerEllipsisClassName = computed<TooltipProps['overlayClassName']>(() => [\n `${props.classPrefix}-table__ellipsis-content`,\n props.overlayClassName,\n ]);\n\n onMounted(() => {\n isOverflow.value = isTextEllipsis(root.value);\n });\n\n onUpdated(() => {\n isOverflow.value = isTextEllipsis(root.value);\n });\n\n // 当表格数据量大时，不希望默认渲染全量的 Tooltip，期望在用户 mouseenter 的时候再显示，通过 flag 判断\n const onTriggerMouseenter = () => {\n if (!root.value) return;\n // 重新检测溢出状态，确保编辑状态切换后能正确显示\n isOverflow.value = isTextEllipsis(root.value);\n flag.value = true;\n };\n\n const onTriggerMouseleave = () => {\n if (!root.value) return;\n };\n const handleVisibleChange = (v: boolean) => {\n if (!v) flag.value = false;\n };\n // 使用 debounce 有两个原因：1. 避免 safari/firefox 等浏览器不显示省略浮层；2. 避免省略列快速滚动时，出现一堆的省略浮层\n const onMouseAround = debounce((e: MouseEvent) => {\n e.type === 'mouseleave' ? onTriggerMouseleave() : onTriggerMouseenter();\n }, 80);\n\n return () => {\n const cellNode = renderContent('default', 'content');\n\n const ellipsisContent = (\n <div\n ref={root}\n class={ellipsisClasses.value}\n onMouseenter={onMouseAround}\n onMouseleave={onMouseAround}\n style={{\n textOverflow: isOverflow.value ? 'ellipsis' : 'clip',\n }}\n >\n {cellNode}\n </div>\n );\n const tooltipProps = props.tooltipProps as EllipsisProps['tooltipProps'];\n // 始终渲染 TTooltip，避免条件切换导致子组件（如可编辑单元格）重新挂载\n const rProps = {\n content: isOverflow.value && flag.value ? (props.tooltipContent as string) || (() => cellNode) : '',\n destroyOnClose: true,\n hideEmptyPopup: true,\n zIndex: props.zIndex,\n attach: props.attach,\n placement: props.placement,\n overlayClassName: tooltipProps?.overlayClassName\n ? innerEllipsisClassName.value.concat(tooltipProps.overlayClassName)\n : innerEllipsisClassName.value,\n onVisibleChange: handleVisibleChange,\n ...tooltipProps,\n };\n return <TTooltip {...rProps}>{ellipsisContent}</TTooltip>;\n };\n },\n});\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","props","content","type","String","Function","tooltipContent","Number","placement","attach","tooltipProps","zIndex","overlayClassName","classPrefix","setup","root","ref","flag","isOverflow","renderContent","useContent","ellipsisClasses","computed","concat","innerEllipsisClassName","onMounted","value","isTextEllipsis","onUpdated","onTriggerMouseenter","onTriggerMouseleave","handleVisibleChange","v","onMouseAround","debounce","e","cellNode","ellipsisContent","_createVNode","textOverflow","rProps","_objectSpread","destroyOnClose","hideEmptyPopup","onVisibleChange","TTooltip","_default"],"mappings":"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"}