如何在Vue 3应用中通过CSS隐藏Vuetify组件的部分元素？

核心思路 #

通过一个响应式状态变量（比如isViewMode）控制查看/编辑模式，结合Vuetify组件的自带属性和CSS穿透样式，精准隐藏目标元素。

具体实现步骤 #

1. 定义模式状态变量
   在组件脚本中声明响应式变量，用于切换模式：

<script setup>
import { ref } from 'vue'

// 控制查看/编辑模式，初始值可根据业务逻辑调整
const isViewMode = ref(false)
// 替换为你的业务数据
const selectedValue = ref('')
const textareaValue1 = ref('')
const textareaValue2 = ref('')
const selectItems = ref(['选项A', '选项B', '选项C'])
</script>

2. 模板中绑定模式控制
   给目标组件动态绑定类和属性，实现模式切换时的元素隐藏：

<template>
  <div class="container">
    <!-- 示例模式切换按钮，实际可根据业务逻辑触发模式变更 -->
    <v-btn @click="isViewMode = !isViewMode" class="mb-4">
      {{ isViewMode ? '切换到编辑模式' : '切换到查看模式' }}
    </v-btn>

    <!-- v-select 组件：隐藏下拉箭头 -->
    <v-select
      v-model="selectedValue"
      :items="selectItems"
      :class="{ 'view-mode': isViewMode }"
      :readonly="isViewMode" <!-- 可选：禁止编辑，增强查看模式体验 -->
      class="mb-4"
    ></v-select>

    <!-- v-textarea 组件：隐藏调整三角 + 可选禁用编辑 -->
    <v-textarea
      v-model="textareaValue1"
      :no-resize="isViewMode" <!-- 自带属性，直接隐藏调整三角 -->
      :class="{ 'view-mode': isViewMode }"
      :readonly="isViewMode"
      class="mb-4"
    ></v-textarea>

    <v-textarea
      v-model="textareaValue2"
      :no-resize="isViewMode"
      :class="{ 'view-mode': isViewMode }"
      :readonly="isViewMode"
    ></v-textarea>
  </div>
</template>

3. 添加CSS穿透样式
   通过Vue3的:deep()语法穿透到Vuetify内部组件，隐藏目标元素并优化查看模式样式：

<style scoped>
/* 隐藏v-select的下拉箭头 */
.view-mode :deep(.v-select__append-inner) {
  display: none;
}

/* 可选：让查看模式下的v-select更像纯文本 */
.view-mode :deep(.v-select__selections) {
  cursor: default;
}

/* 可选：隐藏查看模式下v-textarea的边框，贴近纯文本展示 */
.view-mode :deep(.v-textarea__wrapper) {
  border: none;
  box-shadow: none;
}
</style>

关键说明 #

• :no-resize是Vuetify v-textarea的自带属性，设置为true时直接隐藏右下角的调整三角，比纯CSS更可靠
• :readonly属性不仅能禁止组件编辑，还能让组件的交互样式更符合查看模式预期
• :deep()用于在scoped样式中选中Vuetify组件的内部DOM元素，避免样式被隔离

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