Element-Ui定制Dropdown组件

1.效果

说明：移入后新增图标，然后移入后图标变色。当然大家可以想到用@mouseover移入事件来实现移入颜色的变化，但是在使用Dropdown组件的时候，不支持这种写法。因此采用了原生的遍历对象的形式，为每一个item对象绑定鼠标移入和移除事件。

2.实现步骤

2.1静态组件

2.2js

说明：isHoverOne指第一个el-dropdown-item，然后依次类推

export default {
  name: "index",
  data() {
    return {
      dropdownArr: ["原生", "启动", "起飞"],
      fill: ["#D2D2D2", "#00A3FF"],
      isHoverOne: false,
      isHoverTwo: false,
      isHoverThree: false,
    }

  },
  mounted() {
    let self = this
    // 获取所有的  元素
    // 遍历元素并为每个元素添加 mouseover 事件监听器
    // 移入事件
    const handleMouseOver = (self, index) => {
      switch (index) {
        case 0:
          self.isHoverOne = true;
          break;
        case 1:
          self.isHoverTwo = true;
          break;
        case 2:
          self.isHoverThree = true;
          break;
      }
    };
    // 移除事件
    const handleMouseOut = (self, index) => {
      switch (index) {
        case 0:
          self.isHoverOne = false;
          break;
        case 1:
          self.isHoverTwo = false;
          break;
        case 2:
          self.isHoverThree = false;
          break;
      }
    };

    const dropdownItems = self.$refs.dropItem;
    // 遍历每一个dropdownitem对象，为每一个item绑定鼠标移入和移除事件
    dropdownItems.forEach((item, index) => {
      item.$el.addEventListener("mouseover", () => handleMouseOver(self, index));
      item.$el.addEventListener("mouseout", () => handleMouseOut(self, index));
    });

  },
  methods: {}
}

问题：这种写法不行了！

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

正确写法： 

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

2.3css

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

/* 移入后展现的el-dropdown-menu样式修改*/
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: transparent;
}

/*下拉框的元素*/
#dropdown-menu-9186 {
  background-color: gray;
}

/*下拉框里面的字体颜色*/
.el-dropdown-menu__item {
  color: red;
}