iview的走马灯嵌套在模态框中,宽度为0的解决方案

简介: iview的走马灯嵌套在模态框中,宽度为0的解决方案

在项目开发中用到了iview的走马灯嵌套在模态框中这种需求,结果发现走马灯图片不显示,打开控制台审查元素发现走马灯的内部盒子width为0,自己感觉在页面初始化的时候,因为模态框初始值为false,所以,走马灯渲染的时候错误的动态计算了宽度,为0,所以解决方案为让模态框和走马灯通过统一状态控制,同时渲染。你可以将Modal 的v-model="imgVisible"这个状态值同步到走马灯的<Carousel v-if="imgVisible"></Carouse>,或者如下,图片集合有值了在渲染,两者都可以、

  <Modal title="查看凭证" v-model="imgVisible" :transfer="false">
        <div class="img-box">
          <Carousel v-if="imgList && imgList.length>0" class="Carousel" arrow ="always">
            <CarouselItem v-for="url in imgList" :key="url" class="CarouselItem">
              <img :src="url" style="width: 100%" />
            </CarouselItem>
          </Carousel>
          <p v-else>暂无凭证</p>
        </div>
      </Modal>
相关文章
|
资源调度 JavaScript
Vue2拖拽插件(vuedraggable)
这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能,并提供了插件的安装、配置和事件处理的示例。
1962 1
Vue2拖拽插件(vuedraggable)
|
JavaScript 前端开发 API
详解JS的URL()和URLSearchParams() API接口
详解JS的URL()和URLSearchParams() API接口
645 2
|
JavaScript 前端开发 安全
vue中的 render 和 h() 详解
当使用Vue.js进行前端开发时,理解和掌握&quot;render&quot;函数和&quot;h()&quot;函数是非常重要的,因为它们是Vue组件的核心构建和渲染部分 render 和 h()是在Vue.js中常用的两个概念,它们通常用于创建和渲染Vue组件。
942 0
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
351 0
|
虚拟化
VMWare开启虚拟机报错:此主机支持Intel VT-x, 但Intel VT-x处于禁用状态
VMWare开启虚拟机报错:此主机支持Intel VT-x, 但Intel VT-x处于禁用状态
1473 0
发布npm包时遇到的一些坑
发布npm包时遇到的一些坑
1169 0
发布npm包时遇到的一些坑
|
程序员 uml
UML图 | 时序图(顺序、序列图)绘制
UML图 | 时序图(顺序、序列图)绘制
5229 1
|
存储 缓存 关系型数据库
Percona XtraBackup 2.4的使用
Xtrabackup是由percona开源的免费数据库热备份软件
758 0
SAP MMBE字段解释
关于以下MMBE界面中每个库存字段的解释,相信除了常用的几个,很多小伙伴都不太清楚他们都应对于什么场景,笔者近期也受其困扰,较劲儿之下查询了相关资料,整理了每个MMBE每个字段栏位对应的场景,以下信息来源于网络资料汇总记录,仅供参考验证之用
SAP MMBE字段解释
|
SQL
SQL语句中生成UUID方法
原文:SQL语句中生成UUID方法 SQL语句中生成UUID方法为UUID()   生成带横线UUID: select UUID()                         形如:abaffaca-fd55-11e5-b3d0-d2c510923c15 生成32位不带横线UUID: ...
6019 0

热门文章

最新文章