如何检测组件内部的元素是否在Vue中溢出? [英] How to detect whether an element inside a component is overflown in Vue?

问题描述

我有一个带有工具提示的组件ResultPill(通过vuikit实现了 )主容器.工具提示文本是由吸气功能tooltip(我使用vue-property-decorator)计算的，因此相关的位是:

I have a component ResultPill with a tooltip (implemented via vuikit) for the main container. The tooltip text is calculated by a getter function tooltip (I use vue-property-decorator) so the relevant bits are:

<template>
    <div class="pill"
         v-vk-tooltip="{ title: tooltip, duration: 0, cls: 'some-custom-class uk-active' }"
         ref="container"
    >
        ..some content goes here..
    </div>
</template>
<script lang="ts">
    @Component({ props: ... })
    export default class ResultPill extends Vue {
    ...
        get tooltip (): string { ..calcing tooltip here.. }
        isContainerSqueezed (): boolean {
            const container = this.$refs.container as HTMLElement | undefined;
            if(!container) return false;
            return container.scrollWidth != container.clientWidth;
        }
    ...
</script>
<style lang="stylus" scoped>
    .pill
        white-space pre
        overflow hidden
        text-overflow ellipsis
    ...
</style>

现在，当组件被容器的宽度挤压，因此我尝试在工具提示中添加一些内容，因此应用了溢出样式.使用控制台，我可以使用$0.scrollWidth == $0.clientWidth(其中$0是所选元素)粗略地检查一下，但是当我使用

开始tooltip实施时

Now I'm trying to add some content to the tooltip when the component is squeezed by the container's width and hence the overflow styles are applied. Using console, I can roughly check this using $0.scrollWidth == $0.clientWidth (where $0 is the selected element), but when I start tooltip implementation with

        get tooltip (): string {
            if(this.isContainerSqueezed())
                return 'aha!'

我发现对于我的组件this.$refs.container的许多实例是undefined，所以isContainerSqueezed并没有真正的帮助.我是否必须以某种方式为每个组件实例设置唯一的ref?这种方法还有其他问题吗?如何检查元素是否溢出?

I find that for many instances of my component this.$refs.container is undefined so isContainerSqueezed doesn't help really. Do I have to somehow set unique ref per component instance? Are there other problems with this approach? How can I check whether the element is overflown?

PS来检查ref的非唯一性是否会影响大小写，我尝试向该类添加一个随机id属性:

PS to check if the non-uniqueness of refs may affect the case, I've tried to add to the class a random id property:

        containerId = 'ref' + Math.random();

并像这样使用它:

         :ref="containerId"
    >
    ....
            const container = this.$refs[this.containerId] as HTMLElement | undefined;

但这没有帮助:工具提示仍未更改.

but it didn't help: still tooltip isn't altered.

甚至更好的是，我可以使用$el属性代替引用，但这仍然无济于事.看起来原因是此:

And even better, there's the $el property which I can use instead of refs, but that still doesn't help. Looks like the cause is this:

关于ref注册时间的重要说明:由于ref本身是通过render函数创建的，因此您无法在初始渲染时访问它们-它们尚不存在！ $refs也是非反应性的，因此您不应尝试在模板中将其用于数据绑定.

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.

(大概适用于$el)，所以我必须以某种方式重新计算安装中的tooltip. 这个问题看起来像我所需要的，但是答案不适用于我的情况.

(presumably the same is applicable to $el) So I have to somehow recalc tooltip on mount. This question looks like what I need, but the answer is not applicable for my case.

推荐答案

因此，就像我在其中一项编辑中提到的那样，文档警告说$refs不应用于初始渲染，因为它们未在以下位置定义那时.因此，我已经将tooltip设置为属性而不是getter并在mounted中对其进行了计算:

So, like I've mentioned in one of the edits, docs warn that $refs shouldn't be used for initial rendering since they are not defined at that time. So, I've made tooltip a property instead of a getter and calcuate it in mounted:

export default class ResultPill extends Vue {
...
    tooltip = '';
    calcTooltip () {
        // specific logic here is not important, the important bit is this.isContainerSqueezed()
        // works correctly at this point
        this.tooltip = !this.isContainerSqueezed() ? this.mainTooltip :
            this.label + (this.mainTooltip ? '\n\n' + this.mainTooltip : '');
    }
    get mainTooltip (): string { ..previously used calculation.. }
    ...
    mounted () {
        this.calcTooltip()
    }
}

这篇关于如何检测组件内部的元素是否在Vue中溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！