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

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

实际业务代码：

1<Tab-Pane label="草本样方" name="name3">
2                                <RadioGroup v-model="selectModel_cb" v-on:on-change="selectChangeCB" class="redioDiv">
3                                    <Radio v-for="item in typeList" v-bind:label="item.value">{{item.label}}</Radio>
4                                </RadioGroup>
5 
6                                <row v-show="selectModel_cb==1">
7                                    <i-Col span="16">
8                                        <i-Table v-bind:height="gvheight" size="small" v-bind:columns="gvcolumns_cb" v-bind:data="gvdata_cb"></i-Table>
9                                    </i-Col>
10                                    <i-Col span="8">
11                                        <row>
12                                            <div id="chartPie6" style="width:100%;height:600px"></div>
13                                        </row>
14                                    </i-Col>
15                                </row>
16                                <row v-show="selectModel_cb==2">
17                                    <i-Col span="16">
18                                        <i-Table v-bind:height="gvheight" size="small" v-bind:columns="gvcolumns2_cb" v-bind:data="gvdata2_cb"></i-Table>
19                                    </i-Col>
20                                    <i-Col span="8">
21                                        <row>
22                                            <div style="margin: 0px 10px 0px 10px">
23                                                <label> 类型： </label>
24                                                <i-Select v-model:v-model="selectModelFieldCB" v-on:on-change="selectChangeFieldCB" style="width:100px">
25                                                    <i-Option v-for="item in selectFile_cb" v-bind:value="item.key" v-bind:key="item.title">{{ item.title }}</i-Option>
26                                                </i-Select>
27                                            </div>
28                                        </row>
29                                        <row>
30                                            <div id="chartPie3" style="width:100%;height:600px"></div>
31                                        </row>
32                                    </i-Col>
33                                </row>
34                                <div  v-if="selectModel_cb==3" >
35                                    <div id="dowebok_cb">
36
37                                        <Carousel v-bind:radius-dot="carouselDot_cb" dots="outside" v-bind:height="imgHeight2+'px'" v-model="carouselValue_cb" style="text-align:center;">
38                                            <div v-for="item in imgData_cb">
39                                                <Carousel-Item >
40                                                   
41                                                        @*<img v-bind:src="item.src" style="height:inherit;width:100%;cursor:pointer;" />*@
42                                                        <img v-bind:src="item.src" style="height:inherit;width:auto;cursor:pointer;" />
43                                                        <div ><span  class="carousel-text"> {{item.name}}</span></div>
44                                                   
45                                               
46                                           </Carousel-Item>
47                                            </div>
48                                        </Carousel>
49                                    </div>
50                                </div>
51                            </Tab-Pane>

View Code

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

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

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

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