在element-ui多tabs内使用非默认标签页高度为0 about vue-waterfall-rapid HOT 5 CLOSED

高度计算为0？要么是图片没设置宽度，要么没指定imgKey，你看下

from vue-waterfall-rapid.

我内部放的不是image，放了有高度的card
代码片段如下:

index.vue

<el-tabs v-model="activeTabName" @tab-click="tabClick">
  <el-tab-pane  name="first">
    <content />
  </el-tab-pane>
  <el-tab-pane  name="second">
    <content />
  </el-tab-pane>
</el-tabs>

content.vue

<div ref="content">
    <waterfall
      :col="3"
      :autoResize="true"
      :moveTransitionDuration="0.4"
      :fillBox="false"
      :list="data"
      ref="waterfall"
    >
      <div class="waterfall-item" :class="{ bounceIn: true }" slot-scope="item">
        <div style="width: 100%" class="waterfall-img" :data="item.name">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.data.name }}</span>
            </div>
         </el-card>
      </div>
    </div>
</waterfall>
</div>

默认标签页显示没有问题，切换标签页后<waterfall>内<div id="main" class="main" style="height: 0px;">，可见高度为0,

目前采取给content添加key,<div ref="content" :key="ck">,通过修改ck使content内部强制刷新后可以使<waterfall>正确计算内部main div高度

from vue-waterfall-rapid.

你给content一个固定的宽度，再给个最大的高度，因为内部item的宽度是根据外部容器宽度计算的

我内部放的不是image，放了有高度的card 代码片段如下:

index.vue

<el-tabs v-model="activeTabName" @tab-click="tabClick">
  <el-tab-pane  name="first">
    <content />
  </el-tab-pane>
  <el-tab-pane  name="second">
    <content />
  </el-tab-pane>
</el-tabs>

content.vue

<div ref="content">
    <waterfall
      :col="3"
      :autoResize="true"
      :moveTransitionDuration="0.4"
      :fillBox="false"
      :list="data"
      ref="waterfall"
    >
      <div class="waterfall-item" :class="{ bounceIn: true }" slot-scope="item">
        <div style="width: 100%" class="waterfall-img" :data="item.name">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.data.name }}</span>
            </div>
         </el-card>
      </div>
    </div>
</waterfall>
</div>

默认标签页显示没有问题，切换标签页后<waterfall>内<div id="main" class="main" style="height: 0px;">，可见高度为0,

目前采取给content添加key,<div ref="content" :key="ck">,通过修改ck使content内部强制刷新后可以使<waterfall>正确计算内部main div高度

from vue-waterfall-rapid.

不行，给了{width:1000px;max-height:600px}没效果，切换标签页的时候还是显示不出内容

from vue-waterfall-rapid.

不行，给了{width:1000px;max-height:600px}没效果，切换标签页的时候还是显示不出内容

那切换的时候重绘下吧

from vue-waterfall-rapid.