解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式

问题描述

饿了么ui中的下拉菜单组件，若是某个下拉菜单被咱们禁用了之后，颜色会置灰，点击也没反应了。可是存在的问题就是，当鼠标悬浮到对应的禁用项上面的时候，咱们会神奇的发现，竟然没出现鼠标禁用的样式，官方给出的居然仍是一个箭头的样式。问题图以下：

图是从官网上截取的

其实并不影响产品的使用，可是有的时候咱们想要优化一下效果。使其达到鼠标移入出现禁用样式，以下图，就是咱们想要的效果

禁用的时候鼠标悬浮时应为禁用的样式

代码实现

html部分

html部分就是常规操做，给下拉菜单绑定一个点击菜单项触发的事件回调，由于待会咱们要点击这个下拉菜单。

<template>
  <div id="app">
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="沙县小吃">
          沙县小吃
        </el-dropdown-item>
        <el-dropdown-item command="兰州拉面">
          兰州拉面
        </el-dropdown-item>
        <el-dropdown-item command="肉夹馍" disabled>
          肉夹馍
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

css部分

审查禁用菜单项以后的DOM元素样式

pointer-events简介：简而言之给一个DOM元素加上这个语句后，那么这个DOM的点击事件就会失效，就是点击了没反应

解决方案就是咱们不使用这个语句了，而后给禁用项加上cursor: not-allowed;就会出现鼠标悬浮禁用样式。

<style lang="less" scoped>
/deep/ .el-dropdown-menu__item.is-disabled {
  pointer-events: auto !important;
  cursor: not-allowed;
}
</style>

不过会产生一个新问题，就是：禁用项的样式虽然是有了，可是禁用项也能够点击了。这个就是不该该的，固然有问题就会有解决方案，咱们能够经过js去控制是否能够点击。至于怎么控制，咱们先看一下官方文档。

而后咱们打印对应的两个参数

若是咱们再点击肉夹馍，咱们会发现，打印出来的e的内容中的disabled的值就位true，因此发现规律了，就能够作控制了。即为：只有当e.disabled的值为false的时候（说明未被禁用），那么咱们才在对应的回调中作相关的事情，不然就忽略

js代码部分

<script>
export default {
  name: "app",
  data() {
    return {};
  },
  methods: {
    handleCommand(whichSelect,e){
      // 必须为禁用才能作一些事情
      if(whichSelect == "沙县小吃" && e.disabled == false){
        console.log("沙县小吃");
      }else if(whichSelect == "兰州拉面" && e.disabled == false){
        console.log("兰州拉面");
      }else if(whichSelect == "肉夹馍" && e.disabled == false){
        console.log("肉夹馍");
      }
    }
  },
};
</script>

总结

通过这样一波操做，就能达到咱们想要的效果了。最终效果图示第二张图。

咱们程序员，经常是解决了一个问题，又会出现新的问题，可是只要耐心思考，翻阅资料，问题基本上均可以解决的