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

Wesley13
• 阅读 366

问题原因: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'));
});

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
blmius blmius
1年前
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
浩浩 浩浩
1年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Karen110 Karen110
1年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Stella981 Stella981
1年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Stella981 Stella981
1年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
1年前
JOptionPane修改图标
1.在Linux平台下.JOptionPane会显示Java默认的图标,在window平台不显示图标,如何替换这个图标了?2JOptionPane.setIcon(Icon)修改的是内容区域的icon,而不是左上角的Icon.所以需要通过修改Jdialog/Frame的图标来达到修改默认图标的问题.3.代码:if(JOptio
3A网络 3A网络
2个月前
理解 virt、res、shr 之间的关系(linux 系统篇)
理解virt、res、shr之间的关系(linux系统篇)前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过t
3A网络 3A网络
2个月前
开发一个不需要重写成 Hive QL 的大数据 SQL 引擎
开发一个不需要重写成HiveQL的大数据SQL引擎学习大数据技术的核心原理,掌握一些高效的思考和思维方式,构建自己的技术知识体系。明白了原理,有时甚至不需要学习,顺着原理就可以推导出各种实现细节。各种知识表象看杂乱无章,若只是学习
helloworld_34035044 helloworld_34035044
5个月前
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp