zoukankan      html  css  js  c++  java
  • 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="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="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="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;100%;cursor:pointer;" />*@
                                                            <img v-bind:src="item.src" style="height:inherit;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'));
    });




  • 相关阅读:
    java实现冒泡排序
    使用telnet测试指定端口的连通性
    聊聊Java中的异常及处理
    Java工具类——数学相关的类
    谈谈javaSE中的==和equals的联系与区别
    如何在Vim中更改颜色和主题
    配置类为什么要添加@Configuration注解呢?
    你知道Spring是怎么解析配置类的吗?
    读源码,我们可以从第一行读起
    Spring杂谈 | Spring中的AutowireCandidateResolver
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/11252183.html
Copyright © 2011-2022 走看看