【问题标题】:How can I get a hight of v-card-title vuetify element?如何获得 v-card-title vuetify 元素的高度?
【发布时间】:2020-11-17 16:20:56
【问题描述】:

我有以下代码,我想获取 v-card 标题元素的高度?

 <v-card-title class="purple lighten-2">
      <v-icon dark size="42" class="mr-4"> fas fa-egg </v-icon>
        <h3 class="white--text font-weight-medium flex-nowrap">
       {{ dishes[dishesIndexList[0]].dish_name }}
     </h3>
 </v-card-title>

我该怎么做?我尝试将 ref="cardTitleHeight" 添加到 v-card 标题,然后在安装元素时我可以得到 this.$refs 并且我添加的 cardTitleHeight ref 被列为 $refs 对象的一部分但是当我尝试使用它时this.$refs.cardTitleHeight 我未定义(我需要先获取此元素才能获取其高度)。 我想这是因为 v-card-title 是一个外部组件。

如何获得 v-card-title 高度?我将不胜感激。

【问题讨论】:

    标签: vue.js height vuetify.js


    【解决方案1】:

    你的问题有答案

    当元素被挂载时

    该元素的高度将在组件安装后定义。

    您可以在脚本中尝试:

      mounted() {
        console.log(this.$refs.cardTitleHeight); //.style.height or lineHeight
      },
    

    请注意,mounted 并不能保证所有子组件也已安装。如果你想等到整个视图被渲染,你可以在mounted中使用vm.$nextTick。

    更多关于mounted life cycle hook

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-02-09
      • 2019-11-11
      • 2023-02-16
      • 1970-01-01
      • 1970-01-01
      • 2020-08-21
      • 2021-12-10
      • 2019-11-10
      相关资源
      最近更新 更多