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>

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