tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 8.71 kB
Source Map (JSON)
{"version":3,"file":"ellipsis.mjs","sources":["../../../components/table/ellipsis.tsx"],"sourcesContent":["/** 超出省略显示 */\nimport { defineComponent, PropType, ref, computed, onMounted, onUpdated } from 'vue';\nimport { debounce } from 'lodash-es';\nimport { AttachNode, TNode } from '../common';\nimport { renderContent } from '../utils/render-tnode';\nimport { isTextEllipsis } from '../utils/dom';\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\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\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 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 flag,\n root,\n isOverflow,\n ellipsisClasses,\n innerEllipsisClassName,\n onMouseAround,\n handleVisibleChange,\n };\n },\n\n render() {\n const cellNode = renderContent(this, 'default', 'content');\n\n const ellipsisContent = (\n <div\n ref=\"root\"\n class={this.ellipsisClasses}\n onMouseenter={this.onMouseAround}\n onMouseleave={this.onMouseAround}\n style={{\n textOverflow: this.isOverflow ? 'ellipsis' : 'clip',\n }}\n >\n {cellNode}\n </div>\n );\n let content = null;\n const tooltipProps = this.tooltipProps as EllipsisProps['tooltipProps'];\n if (this.isOverflow && this.flag) {\n const rProps = {\n content: (this.tooltipContent as string) || (() => cellNode),\n destroyOnClose: true,\n zIndex: this.zIndex,\n attach: this.attach,\n placement: this.placement,\n overlayClassName: tooltipProps?.overlayClassName\n ? this.innerEllipsisClassName.concat(tooltipProps.overlayClassName)\n : this.innerEllipsisClassName,\n onVisibleChange: this.handleVisibleChange,\n ...tooltipProps,\n };\n content = <TTooltip {...rProps}>{ellipsisContent}</TTooltip>;\n } else {\n content = ellipsisContent;\n }\n return content;\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","ellipsisClasses","computed","concat","innerEllipsisClassName","onMounted","value","isTextEllipsis","onUpdated","onTriggerMouseenter","onTriggerMouseleave","handleVisibleChange","v","onMouseAround","debounce","e","render","cellNode","renderContent","ellipsisContent","_createVNode","textOverflow","rProps","_objectSpread","destroyOnClose","onVisibleChange","TTooltip","_default"],"mappings":"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"}