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="16">
                                        <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="8">
                                        <row>
                                            <div id="chartPie6" style="width:100%;height:600px"></div>
                                        </row>
                                    </i-Col>
                                </row>
                                <row v-show="selectModel_cb==2">
                                    <i-Col span="16">
                                        <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="8">
                                        <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>

View Code

解决方案：每次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'));
});