如何移除Vuetify 3中v-expansion-panel选中项的高亮边框？

你遇到的高亮是手风琴面板被点击后获得焦点时的默认样式，以下几种方法可以实现点击项时直接隐藏该高亮：

方法一：点击后手动失焦 #

你已经在面板上绑定了@click="LoseFocus"，只需在组件中实现这个方法，让面板内部的可聚焦元素失去焦点即可：

组合式API（Vue 3） #

<script setup>
import { ref } from 'vue'
const openedPanel = ref(null)

const LoseFocus = (event) => {
  // 定位到手风琴面板内的可聚焦元素并失焦
  const focusEl = event.currentTarget.querySelector('[tabindex]')
  focusEl?.blur()
}
</script>

选项式API #

<script>
export default {
  data() {
    return {
      openedPanel: null
    }
  },
  methods: {
    LoseFocus(event) {
      const focusEl = event.currentTarget.querySelector('[tabindex]')
      if (focusEl) focusEl.blur()
    }
  }
}
</script>

方法二：CSS直接覆盖焦点样式 #

如果不想通过JS处理，可以用CSS深度选择器覆盖Vuetify的默认焦点样式（若使用scoped样式，必须加::v-deep）：

<style scoped>
/* 移除所有手风琴面板的焦点高亮 */
::v-deep .v-expansion-panel:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* 仅移除激活状态面板的焦点高亮 */
::v-deep .v-expansion-panel--active:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
</style>

方法三：结合自定义类优化 #

你已经给面板绑定了自定义类atom-accordion-active，可以在这个类里针对性移除焦点样式：

<style scoped>
::v-deep .atom-accordion-active :focus {
  outline: none;
  box-shadow: none;
}
</style>

注意：方法二和三会移除焦点样式，若需要保留键盘导航的可访问性，优先选择方法一。

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