el-dropdown-item选中变色

### 实现 `el-dropdown-item` 组件选中后变色的效果

为了使 `el-dropdown-item` 在被选中时改变颜色，可以通过自定义 CSS 类来覆盖默认样式。具体方法如下：

通过使用深度选择器 `::v-deep` 或者 `/deep/` 来穿透作用域，从而允许外部样式影响内部组件的样式[^2]。

/* 修改选中的 el-dropdown-item 的背景颜色 */
.el-dropdown-menu .el-dropdown-menu__item.selected {
    background-color: #f0f0f0;
}

/* 修改选中的 el-dropdown-item 的文字颜色 */
.el-dropdown-menu .el-dropdown-menu__item.selected {
    color: #2e49ad;
}

如果希望进一步定制未选中状态下的样式，可以添加更多特定的选择器：

/* 非选中状态下鼠标悬停时的背景颜色 */
.el-dropdown-menu__item:hover:not(.is-disabled) {
    background-color: transparent !important;
}

/* 设置下拉菜单项的文字颜色 */
.el-dropdown-menu__item {
    color: red;
}

对于 Vue 单文件组件 (SFC)，推荐使用 `::v-deep` 进行样式穿透：

<style scoped>
::v-deep .el-dropdown-menu .el-dropdown-menu__item.selected {
    background-color: #f0f0f0;
    color: #2e49ad;
}
</style>

此外，在 JavaScript 中处理事件监听也可以增强用户体验，例如当用户将鼠标移到选项上时触发某些行为:

item.$el.addEventListener("mouseover", () => handleMouseOver(self, index));
item.$el.addEventListener("mouseout", () => handleMouseOut(self, index));