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月前
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
290 4
|
JavaScript 容器
Ant Design Vue 中Drawer自定头部的样式、内容部分的样式、弹出层的样式
Ant Design Vue 中Drawer自定头部的样式、内容部分的样式、弹出层的样式
|
前端开发
CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作。
1833 0
|
9月前
|
前端开发
React 模态框的拉伸和拖动
React 模态框的拉伸和拖动
101 0
|
前端开发
css 改变scroll滚动条的样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width:10px; height:10px; background-color:red; } /*定义滚动条轨道 内阴影+圆角*/ ::-web...
1517 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2878 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
修改elementui table 组件滚动条样式
修改elementui table 组件滚动条样式
136 0

热门文章

最新文章