如何在移动端隐藏PrimeVue轮播组件的导航按钮与指示器？

PrimeVue的Carousel组件的responsiveOptions配置不支持直接在响应式规则中设置showNavigators和showIndicators——这两个是组件的顶层Props，不属于响应式配置的可配置项范畴，所以你之前的写法不会生效。

以下是两种无需CSS的内置实现方案：

方案1：监听窗口宽度动态绑定Props #

通过Vue的响应式API监听窗口尺寸变化，动态控制导航按钮和指示器的显示状态：

脚本部分（Vue 3） #

import { ref, computed, onMounted, onUnmounted } from 'vue';

const products = ref([]); // 你的产品数据
const windowWidth = ref(window.innerWidth);

// 监听窗口 resize 事件
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => window.addEventListener('resize', handleResize));
onUnmounted(() => window.removeEventListener('resize', handleResize));

// 根据断点计算显示状态
const showNavigators = computed(() => windowWidth.value > 767);
const showIndicators = computed(() => windowWidth.value > 475);

// 响应式配置仅保留支持的属性
const responsiveOptions = ref([
  {
    breakpoint: '1200px',
    numVisible: 3,
    numScroll: 1
  },
  {
    breakpoint: '767px',
    numVisible: 2,
    numScroll: 1
  },
  {
    breakpoint: '475px',
    numVisible: 1,
    numScroll: 1
  },
]);

模板部分修改 #

在Carousel组件上添加动态绑定的Props：

<Carousel :value="products" :num-visible="4" :num-scroll="1"
          :responsive-options="responsiveOptions" circular
          :autoplay-interval="3000"
          :show-navigators="showNavigators"
          :show-indicators="showIndicators"
>
  <!-- 原有的插槽内容保持不变 -->
  <template v-slot:previousicon>
    <span class="material-symbols-sharp">
      chevron_left
    </span>
  </template>
  <template #item="slotProps">
    <!-- 产品卡片内容 -->
  </template>
  <template v-slot:nexticon>
    <span class="material-symbols-sharp">
      chevron_right
    </span>
  </template>
</Carousel>

方案2：使用PrimeVue内置的断点工具（推荐） #

如果你的PrimeVue版本在3.20及以上，可以使用官方提供的useBreakpoint组合式函数，无需手动监听resize：

脚本部分 #

import { ref, computed } from 'vue';
import { useBreakpoint } from 'primevue/usebreakpoint';

const products = ref([]);
const breakpoint = useBreakpoint();

// 用PrimeVue预设的断点判断（xs: <476px, sm: <768px）
const showNavigators = computed(() => breakpoint.value.gt('sm'));
const showIndicators = computed(() => breakpoint.value.gt('xs'));

// 响应式配置同方案1
const responsiveOptions = ref([
  {
    breakpoint: '1200px',
    numVisible: 3,
    numScroll: 1
  },
  {
    breakpoint: '767px',
    numVisible: 2,
    numScroll: 1
  },
  {
    breakpoint: '475px',
    numVisible: 1,
    numScroll: 1
  },
]);

模板部分和方案1一致，绑定show-navigators和show-indicators即可。

内容的提问来源于stack exchange，提问作者Angelina