Vuetify v-Slider-Group 组件箭头怎么去除？

2024-03-18 01:30:10

如何移除 Vuetify v-Slider-Group 组件的箭头

简介

Vuetify 中的 v-slider-group 组件提供了方便直观的方式，让用户可以选择一系列值。但是，在某些情况下，你可能希望隐藏组件上的箭头图标。本文将分步指导你如何同时在移动设备和桌面上移除 v-slider-group 组件的箭头。

解决方案

1. 移动设备

对于移动设备，Vuetify 提供了一个 show-arrows 属性，可用于隐藏箭头。只需将其设置为 false，即可禁用箭头。

2. 桌面设备

要隐藏桌面设备上的箭头，你需要覆盖 Vuetify 的默认 CSS 样式。以下 CSS 代码可以实现此目的：

.v-slide-group__next, .v-slide-group__prev {
  display: none !important;
}

示例代码

根据你的特定需求，下面是一个修改后的代码示例，用于同时禁用移动设备和桌面设备上的箭头：

<template>
  <!-- 移动设备禁用箭头 -->
  <v-carousel v-model="imgModel" :show-arrows="false" hide-delimiters class="rounded-lg mb-5">
    ...
  </v-carousel>

  <!-- 桌面设备禁用箭头 -->
  <v-slide-group v-model="imgModel" center-active mandatory :show-arrows="false">
    ...
  </v-slide-group>

  <!-- 覆盖桌面设备上的 CSS 样式 -->
  <style>
    .v-slide-group__next, .v-slide-group__prev {
      display: none !important;
    }
  </style>
</template>