本文写于 2020年02月13日,距今已超过 1 年,距 2022年10月18日 的最后一次修改也已超过 3 个月,部分内容可能已经过时,您可以按需阅读。如果图片无法显示或者下载链接失效,请给我反馈,谢谢!


Views: 621

0 0 投票数
评分

在用 Vue + iView(现在叫 View Design)的时候遇到一个坑,主要表现是 Carousel 的样式中 width = 0 导致内容不能被正确渲染。

在一个 Modal 中,插入一个 Carousel,Modal 是否显示是由 v-model 控制的,代码非常简单,pictureModal 是由一个 on-click 决定。

<Modal
  v-model="pictureModal"
  :title="pictureId"
>
  <Carousel loop autoplay :autoplay-speed="5000" v-model="carouselId">
    <CarouselItem v-for="picture in pictures" :key="picture.id">
      <div class="demo-carousel">
        <div class="cycle-gallery">
          <div class="img-box">
            <div class="img-holder">
              <img :src="picture.url"/>
            </div>
            <div class="text-holder">
              <h3> {{ picture.title }} </h3>
            </div>
          </div>
          <p> {{ picture.desc }} </p>
          <em class="date"> {{ picture.date }} </em>
        </div>
      </div>
    </CarouselItem>
  </Carousel>
</Modal>

但是在实际的渲染结果中,模态框正常出现了,但是没有走马灯。显示一片空白。从 F12 看到,<div> 样式 .ivu-carousel-item 宽度为 0,导致其下内容全部不能显示。

解决方案是在 CarouselItem 加上 v-if="pictureModal" 使得模态框与走马灯同时渲染,这样可以避免走马灯渲染时由于模态框是隐藏的,错误地获取了组件宽度为 0 的问题。

组件文档:https://www.iviewui.com/components/carousel

0 0 投票数
评分
发表留言
订阅评论
提醒
guest

在点击发表评论按钮时,网络请求的数据包含浏览器版本、操作系统版本和 IP 地址;您的网络服务提供商、雇主或学校、政府机构可能会看到您的访问活动;根据浏览器默认行为、操作系统设置和安全防护软件的设置不同,您的浏览器可能会也可能不会在本地 Cookies 缓存您输入的用户名、邮箱以便下次评论使用。

请对自己的言行负责。

您想以什么身份发表评论
邮箱将在您的评论被回复时给您通知
(可选)如果您也有个人网站,不妨分享一下
我对这篇文章的评分
这篇文章给您带来多大帮助
0 评论
内联反馈
查看所有评论