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

 

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

实际业务代码：

  "草本样方" name="name3">
                                "selectModel_cb" v-on:on-change="selectChangeCB" class="redioDiv">
                                    for="item in typeList" v-bind:label="item.value">{{item.label}}
                                
 
                                "selectModel_cb==1">
                                    "16">
                                        "gvheight" size="small" v-bind:columns="gvcolumns_cb" v-bind:data="gvdata_cb">
                                    
                                    "8">
                                        
                                            
"chartPie6" style="width:100%;height:600px">
                                        
                                    
                                
                                "selectModel_cb==2">
                                    "16">
                                        "gvheight" size="small" v-bind:columns="gvcolumns2_cb" v-bind:data="gvdata2_cb">
                                    
                                    "8">
                                        
                                            
"margin: 0px 10px 0px 10px">
                                                 类型： 
                                                "selectModelFieldCB" v-on:on-change="selectChangeFieldCB" style="width:100px">
                                                    for="item in selectFile_cb" v-bind:value="item.key" v-bind:key="item.title">{{ item.title }}
                                                
                                            
                                        
                                        
                                            
"chartPie3" style="width:100%;height:600px">
                                        
                                    
                                
                                
if="selectModel_cb==3" >
                                    
"dowebok_cb">

                                        "carouselDot_cb" dots="outside" v-bind:height="imgHeight2+'px'" v-model="carouselValue_cb" style="text-align:center;">
                                            
for="item in imgData_cb">
                                                
                                                   
                                                        @*"item.src" style="height:inherit;width:100%;cursor:pointer;" />*@
                                                        "item.src" style="height:inherit;width:auto;cursor:pointer;" />
                                                        
class="carousel-text"> {{item.name}}
                                                   
                                               
                                           
                                            
                                        
                                    
                                
                            

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'));
});

转载于:https://www.cnblogs.com/hao-1234-1234/p/11252183.html