viewer与 iview Carousel（走马灯）结合使用，图片无法显示

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

问题原因：iview Carousel (走马灯)在加载是如果没有图片它没有高度。之后给src赋值，图片无法显示，拖动一下浏览器宽或搞它就会显示。走马灯解决这个问题方法：1在Carousel或其父组件上使用v-if；2修改iview源码。然而，使用v-if后会导致 viewer 组件无法显示图片。

实际业务代码：

<Tab-Pane label="草本样方" name="name3">
<RadioGroup v-model="selectModel_cb" v-on:on-change="selectChangeCB" class="redioDiv">
<Radio v-for="item in typeList" v-bind:label="item.value">{{item.label}}</Radio>
</RadioGroup> <row v-show="selectModel_cb==1">
<i-Col span="">
<i-Table v-bind:height="gvheight" size="small" v-bind:columns="gvcolumns_cb" v-bind:data="gvdata_cb"></i-Table>
</i-Col>
<i-Col span="">
<row>
<div id="chartPie6" style="width:100%;height:600px"></div>
</row>
</i-Col>
</row>
<row v-show="selectModel_cb==2">
<i-Col span="">
<i-Table v-bind:height="gvheight" size="small" v-bind:columns="gvcolumns2_cb" v-bind:data="gvdata2_cb"></i-Table>
</i-Col>
<i-Col span="">
<row>
<div style="margin: 0px 10px 0px 10px">
<label> 类型： </label>
<i-Select v-model:v-model="selectModelFieldCB" v-on:on-change="selectChangeFieldCB" style="width:100px">
<i-Option v-for="item in selectFile_cb" v-bind:value="item.key" v-bind:key="item.title">{{ item.title }}</i-Option>
</i-Select>
</div>
</row>
<row>
<div id="chartPie3" style="width:100%;height:600px"></div>
</row>
</i-Col>
</row>
<div v-if="selectModel_cb==3" >
<div id="dowebok_cb"> <Carousel v-bind:radius-dot="carouselDot_cb" dots="outside" v-bind:height="imgHeight2+'px'" v-model="carouselValue_cb" style="text-align:center;">
<div v-for="item in imgData_cb">
<Carousel-Item > @*<img v-bind:src="item.src" style="height:inherit;width:100%;cursor:pointer;" />*@
<img v-bind:src="item.src" style="height:inherit;width:auto;cursor:pointer;" />
<div ><span class="carousel-text"> {{item.name}}</span></div> </Carousel-Item>
</div>
</Carousel>
</div>
</div>
</Tab-Pane>

解决方案：每次v-if 之后重新注册viewer组件。

selectChangeCB: function (typeSelect) {
let that = this;
that.selectModel_cb = typeSelect;
if (typeSelect < 3) {
pie(that.gvdata2_cb, typeSelect == 1 ? 'duodu' : 'zhongyaozhi', typeSelect == 1 ? 6 : 3);
} else {
that.$nextTick(function () {
viewer = new Viewer(document.getElementById('dowebok_cb'));
});
}
},

这里根据业务需要通过selectChangeCB点击事件完成；你也可以在watch中监听 v-if 对象的状态，然后执行：

this.$nextTick(function () {
viewer = new Viewer(document.getElementById('dowebok_cb'));
});