问题形容

饿了么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>

总结

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

咱们程序员，经常是解决了一个问题，又会呈现新的问题，然而只有急躁思考，翻阅材料，问题基本上都能够解决的