vue.js - 如何在 Buefy 轮播组件中设置 itemWidth？

Question

我在单个文件组件中使用Buefy Carousel Listfrom 。我需要将幻灯片的宽度从默认（476.25）更改为我自己的图像（176）。https://buefy.org/documentation/carousel#carousel-listGridsomewidth

在Vue dev工具中，我可以手动覆盖 data prop itmeWidth。这显示正确，并且 Vue 开发工具显示计算的道具已更改为itemStyle: "width: 176px;"

如何将新宽度编码到组件中？我尝试过通过样式(.carousel-slide width: 176px)、数据道具(itemWidth: 176)和计算道具(itemStyle: "width: 176px;")。所有都被忽略并应用默认宽度。

score 0 · Accepted Answer

没有 API 选项/支持由CSS设置的自定义宽度幻灯片（示例：在 swiper上是这个想法的 API 选项 - 请参阅swiper 演示）。slidesPerView: auto

对于Javascript（内联 CSS）添加carousel list的宽度- 示例：

无论如何，!important;都会改变宽度（输出：损坏的布局）。

.carousel-item{
  width: 176px!important;
}

自定义宽度的另一个想法/选项：使用items-to-show和小数（3.2例如）。

1 回答 1