如何在Vue.js与Quasar的Carousel中添加按钮和文本？

你可以通过自定义q-carousel-slide的内部内容来实现添加文本和按钮，无需依赖组件自带的img-src属性。以下是修改后的完整代码：

<template>
  <div class="q-pa-md">
    <q-carousel
      swipeable
      animated
      arrows
      v-model="slide"
      infinite
      v-model:fullscreen="fullscreen"
    >
      <!-- 第一个轮播项：自定义内容 -->
      <q-carousel-slide :name="1">
        <q-img
          src="https://img1-newbalance.mncdn.com/newbalance/products/uploads/banner/mainslider/550NED-NEA_desktop_2.jpg"
          class="full-width full-height"
        />
        <!-- 叠加的文本与按钮 -->
        <div class="absolute bottom-left q-pa-md">
          <h2 class="text-white text-shadow">复古跑鞋系列</h2>
          <q-btn
            label="立即选购"
            color="primary"
            class="mt-2"
            @click="handleBuy(1)"
          />
        </div>
      </q-carousel-slide>

      <!-- 第二个轮播项：自定义内容 -->
      <q-carousel-slide :name="2">
        <q-img
          src="https://img1-newbalance.mncdn.com/newbalance/products/uploads/banner/mainslider/2002rd-desktop.jpg"
          class="full-width full-height"
        />
        <div class="absolute bottom-right q-pa-md">
          <h2 class="text-white text-shadow">2002R经典复刻</h2>
          <q-btn
            label="查看详情"
            color="secondary"
            class="mt-2"
            @click="handleDetail(2)"
          />
        </div>
      </q-carousel-slide>
    </q-carousel>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const slide = ref(1)
    const fullscreen = ref(false)

    // 按钮点击事件示例
    const handleBuy = (slideNum) => {
      console.log('点击了第', slideNum, '个轮播的购买按钮')
    }

    const handleDetail = (slideNum) => {
      console.log('点击了第', slideNum, '个轮播的详情按钮')
    }

    return {
      slide,
      fullscreen,
      handleBuy,
      handleDetail
    }
  }
}
</script>

关键说明： #

• 不再使用q-carousel-slide的img-src属性，而是在内部嵌套q-img组件（或原生img），确保图片占满整个轮播项。
• 使用Quasar的定位类（如absolute、bottom-left）将文本和按钮叠加在图片上方，q-pa-md用于添加内边距。
• text-white和text-shadow类优化文本在图片上的可读性，你可以根据需求调整样式。
• 为按钮添加自定义点击事件，实现交互逻辑。
• 补充了fullscreen的响应式变量，因为原代码中使用了v-model:fullscreen但未定义。

内容的提问来源于stack exchange，提问作者Ömer Gün