解決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>

總結

通過這樣一波操做，就能達到咱們想要的效果了。最終效果圖示第二張圖。

咱們程序員，經常是解決了一個問題，又會出現新的問題，可是隻要耐心思考，翻閱資料，問題基本上均可以解決的