标签: antdv

我正在使用 Ant Design Vue 的 Carousel 在 Instagram Story Clone 项目中显示一些后端生成的数据。

问题是当轮播中只有一个内容时，箭头和圆点就会消失。

轮播文档：https : //antdv.com/components/carousel

代码沙盒：https : //codesandbox.io/s/brave-blackwell-e6d5c? file =/ src/ App.vue

箭头显示：

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>

    <!-- Right Arrow -->
    <div
      slot="nextArrow" 
      slot-scope="props"
      class="custom-slick-arrow" 
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>

    <div><h3> Content 1 </h3></div>
    <div><h3> Content 2 </h3></div>
  </a-carousel>

箭头不显示：

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: …

我正在使用 vue 3 和 ant design 2x。我厌倦了尝试这段代码。而且我在关注 vue 文档时，感觉有些遗漏。我被这个问题困扰了。我希望你能得出结论。

           <a-form
               :model="form"
               @submit="handleSubmit"
           >
               <a-form-item class="mb-10">
                   <a-input
                       type="text"
                       v-model="form.name"
                       placeholder="Name"
                   >   
                   </a-input>
                   <a-button type="primary" block html-type="submit">
                       SUBMIT
                   </a-button>
           <a-form>

在此先感谢您的帮助。