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>
相关文章
|
8月前
修改elementui table 组件滚动条样式
修改elementui table 组件滚动条样式
|
5天前
UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应
UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应
10 0
|
10月前
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
126 0
|
6月前
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
|
10月前
|
JavaScript 前端开发
JS前端CSS+元素,鼠标模形变成手状的形状
JS前端CSS+元素,鼠标模形变成手状的形状
117 1
|
前端开发 程序员
【前端】使用样式选择器before和after布局,以及简单的表单输入框布局
本篇文章来讲解下样式选择器before和after的用法,以及doctype的作用 有时候真的需要温故而知新,用了那么多年的前端,对一些知识点灵活运用加点小技巧也是挺有趣的
137 0
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
302 0
讲述小程序之组件picker(从底部弹起的滚动选择器)
ElementUI组件Cascader数据显示删除错位
ElementUI组件Cascader数据显示删除错位
243 0
|
前端开发
css毛玻璃效果—附:子盒子背景跟随父盒子背景
css毛玻璃效果—附:子盒子背景跟随父盒子背景
css毛玻璃效果—附:子盒子背景跟随父盒子背景
|
前端开发
内容滚动条和子 div 高度自适应
一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先放最终效果(在下面会有demo代码。): Paste_Image.png 实现这些效果要怎么做呢?咱一步一步来。 第一步: 先设置html结构:这里我已经搭好了。 第二步然后开始写css样式了 设置父元素box的样式 设置box1的样式 现在尝试把html解除注释 下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。): 在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。
742 0
内容滚动条和子 div 高度自适应

热门文章

最新文章