tooltip 可算修复了~ view-design 的 table 的cell.vue

tooltip 可算修复了~ view-design 的 table 的cell.vue

就这个bug可是有年头了,可算是修复了
ViewUI/src/components/table/cell.vue
https://github.com/view-design/ViewUI/blob/master/src/components/table/cell.vue

不过高手就是高手,用的 document.createRange 进行修复的。

<template v-if="column.tooltip">
                <Tooltip transfer :content="row[column.key]" :theme="column.tooltipTheme ? column.tooltipTheme : tableRoot.tooltipTheme" :disabled="!showTooltip" :max-width="column.tooltipMaxWidth ? column.tooltipMaxWidth : tableRoot.tooltipMaxWidth" class="ivu-table-cell-tooltip">
                    <span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
                </Tooltip>
            </template>
handleTooltipIn () {
               const $content = this.$refs.content;
               let range = document.createRange();
               range.setStart($content, 0);
               range.setEnd($content, $content.childNodes.length);
               const rangeWidth = range.getBoundingClientRect().width;
               this.showTooltip = rangeWidth > $content.offsetWidth;
               range = null;
           },
posted @ 2021-03-17 10:31  彭成刚  阅读(255)  评论(0编辑  收藏  举报