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

问题描述

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

图是从官网上截取的

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

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

代码实现

html部分

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

下拉菜单

沙县小吃

兰州拉面

肉夹馍

css部分

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

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

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

/deep/ .el-dropdown-menu__item.is-disabled {

pointer-events: auto !important;

cursor: not-allowed;

}

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

然后我们打印对应的两个参数

如果我们再点击肉夹馍，我们会发现，打印出来的e的内容中的disabled的值就位true，所以发现规律了，就可以做控制了。即为：只有当e.disabled的值为false的时候(说明未被禁用)，那么我们才在对应的回调中做相关的事情，否则就忽略

js代码部分

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("肉夹馍");

}

}

},

};

总结

经过这样一波操作，就能达到我们想要的效果了。最终效果图示第二张图。我们程序员，常常是解决了一个问题，又会出现新的问题，但是只要耐心思考，翻阅资料，问题基本上都可以解决的