问题形容
饿了么 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>
总结
通过这样一波操作,就能达到咱们想要的成果了。最终成果图示第二张图。
咱们程序员,经常是解决了一个问题,又会呈现新的问题,然而只有急躁思考,翻阅材料,问题基本上都能够解决的