viewer与 iview Carousel(走马灯) 结合使用,图片无法显示

Wesley13
• 阅读 906

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

实际业务代码:

viewer与 iview Carousel(走马灯) 结合使用,图片无法显示 viewer与 iview Carousel(走马灯) 结合使用,图片无法显示

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
Stella981 Stella981
3年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
JOptionPane修改图标
1.在Linux平台下.JOptionPane会显示Java默认的图标,在window平台不显示图标,如何替换这个图标了?2JOptionPane.setIcon(Icon)修改的是内容区域的icon,而不是左上角的Icon.所以需要通过修改Jdialog/Frame的图标来达到修改默认图标的问题.3.代码:if(JOptio
Stella981 Stella981
3年前
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法参考文章:(1)Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.codeprj.com%2Fblo
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这