Question

我有一个ResultPill组件，带有用于主容器的工具提示（实现为via vuikit）。工具提示文本由吸气功能tooltip（我使用vue-property-decorator）计算得出，因此相关的位是：

<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是所选元素）进行粗略检查，但是当我使用{p>

tooltip

我发现，对于我的组件get tooltip (): string { if(this.isContainerSqueezed()) return 'aha!'的许多实例来说，this.$refs.container是undefined的帮助。我是否必须以某种方式为每个组件实例设置唯一的isContainerSqueezed？这种方法还有其他问题吗？如何检查元素是否溢出？

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

ref

并像这样使用它：

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

但这没有帮助：工具提示仍未更改。

更好的是，我可以使用:ref="containerId" > .... const container = this.$refs[this.containerId] as HTMLElement | undefined;属性代替引用，但这仍然无济于事。看来原因是this：

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

（大概适用于$refs），所以我不得不以某种方式重新计算挂载时的$el。 This question看起来像我所需要的，但答案不适用于我的情况。

Answer 1

因此，就像我在其中一项编辑中提到的那样，文档警告说$refs不应用于初始渲染，因为当时尚未定义它们。因此，我将tooltip设置为属性而不是使用getter并在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中溢出？

1 个答案: