问题描述
饿了么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>
总结
经过这样一波操作,就能达到我们想要的效果了。最终效果图示第二张图。
我们程序员,常常是解决了一个问题,又会出现新的问题,但是只要耐心思考,翻阅资料,问题基本上都可以解决的