如何在 vue 转换中添加动态值作为最大高度？

Question

在下面的代码示例中，我使用了 vue 转换标签我想转换最大高度。我不想对这些值进行硬编码，而是希望在 JS 中获取滚动高度值。

例子。获取这两个item的滚动高度，max-height取最大值，min-height取最小值

正在 SCSS 中定义转换，然后在标记中引用有没有办法在 Vue 转换中使用这些动态值？

将这个最小宽度设为 0 会使它收缩得太多，而作为硬编码值的最大宽度有点脆弱

Vue

<transition name="component-fade" mode="out-in">
    <div key="search" v-if="searchSite">
         <SiteSearchBox />
     </div>

    <div key="works" v-else>
        <WorksSearchBox" />
    </div>
</transition>

SCSS

.component-fade-enter-active {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
        max-height: 500px;

}

.component-fade-leave-active {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    max-height: 500px;

}

.component-fade-enter, .component-fade-leave-to {
    max-height: 0;
}

Answer 1

一个粗略的算法是

您需要在组件的数据对象中声明变量，如下所示

data: { maxHeight:0, minHeight:0, divOneHeight:0, divTwoHeight:0 }
您需要将 ref 属性添加到相应的 div 元素，如下所示。例如

<div key="search" ref="div1"/><div key="works" ref="div2"/>
在methods对象下定义一个方法如下

methods: {
 yourMethodToFindDivHeights: function(el)
   {
      //Determine the heights
     divOneHeight =  this.$refs.div1.$el.clientHeight;
     divTwoHeight =  this.$refs.div2.$el.clientHeight;
     maxHeight = //your calculation goes here
     minHeight = //your calculation goes here
   }

在组件生命周期的mounted方法中调用上述方法
最后除了参考scss class，重新设置最大高度如下。例如

< transition name="component-fade" mode="out-in" class="yourclass" max-height="maxHeight" />

只需尝试执行上述步骤

如何在 vue 转换中添加动态值作为最大高度？

How can I add a dynamic value as the max height in a vue transition?

vue.js

transition