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>
相关文章
Element UI - el-scrollbar 如何隐藏横向滚动条?
Element UI - el-scrollbar 如何隐藏横向滚动条?
696 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2902 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
5月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
555 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
9月前
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
325 4
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
214 0
|
Web App开发 JavaScript 前端开发
Element-ui 滚动条美化
有时候为了使界面滚动条,各个浏览器的滚动条能保持一致,这样我们的项目避免在各个浏览器存在差异导致UI界面的不一致,这时候我们就可以考虑使用通用组件的方式,对各个需要滚动的页面,或者弹出窗口添加统一的组件进行包裹,来保证滚动效果在各个浏览器中能有更好的体验效果。最后我们看到各个浏览器中滚动条的效果,基本上各个浏览器的表现效果是一致的,添加通用组件,默认情况下滚动条是不显示的,只有鼠标移动过去才会进行显示,整体上效果和用户体验会更好。在源码顶部,看到有一个链接地址,是参考另一个插件的实现,如下所示。
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
588 1
|
前端开发
Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】
Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】
164 0
Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】
|
存储 iOS开发
SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Form表单
SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Form表单
889 0
SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Form表单