Vue 去掉 el-dropdown 悬浮时出现的边框

发表于 分类于

最近在写项目的时候用到了 Element Plus 的下拉菜单组件 el-dropdown，本来挺好用的，但是每次鼠标悬浮或者点击的时候，总会冒出来一个黑色的边框，看着特别别扭。

这个边框其实是浏览器自带的焦点样式，就是那种 tab 切换时候会显示的轮廓线。虽然从可访问性的角度来说这是个好东西，但有时候跟设计稿对不上，还是得把它干掉。

怎么解决呢？

其实很简单，就是用 CSS 把 outline 去掉就行。但是因为 el-dropdown 内部的样式是 scoped 的，所以得用样式穿透才能生效。

Vue 3 的写法

1
2
3
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}

这里要注意一下，el-dropdown 内部触发下拉的元素有个 el-tooltip__trigger 类，我们就是要把这个类上的焦点样式去掉。

Vue 2 的写法

如果你还在用 Vue 2 的话，写法稍微有点不一样：

1
2
3
::v-deep .el-tooltip__trigger:focus-visible {
  outline: unset;
}

一点小知识

顺便说一下 outline 和 border 的区别吧，刚开始学 CSS 的时候老搞混：

  • outline 不占空间，画在元素外面，不影响布局
  • border 占空间，会影响元素的尺寸

所以这个焦点边框才会”凭空出现”，不会把页面撑开或者挤跑其他元素。

完整代码

放一段完整的代码，方便直接复制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <el-dropdown>
    <span class="dropdown-link">
      下拉菜单
      <el-icon><arrow-down /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>选项一</el-dropdown-item>
        <el-dropdown-item>选项二</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>

最后

这个小问题当时还是让我找了一会，因为一开始不知道要穿透的类名是 el-tooltip__trigger，一直在 el-dropdown 那里瞎折腾。希望能帮到同样遇到这个问题的小伙伴~