Dropdown: add disabled property (#21235)

ElemeFE · Aug 19, 2021 · c50a0bf · c50a0bf
1 parent eeb9a93
commit c50a0bf
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 17 deletions.
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
@@ -279,6 +279,7 @@ Besides default size, Dropdown component provides three additional sizes for you
 | show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
 | hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
 | tabindex     | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
+| disabled     | whether the Dropdown is disabled | boolean | — | false |
 
 ### Dropdown Slots
 

diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md
@@ -281,6 +281,7 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | show-timeout  | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 250         |
 | hide-timeout  | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 150         |
 | tabindex      | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Dropdown | number              |          —         | 0           |
+| disabled      | si el desplegable está desactivado       | boolean | —                                      | false       |
 
 ### Dropdown Slots
 

diff --git a/examples/docs/fr-FR/dropdown.md b/examples/docs/fr-FR/dropdown.md
@@ -281,6 +281,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
 | show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
 | hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |
 | tabindex     | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Dropdown | number | — | 0 |
+| disabled     | Si le Dropdown est désactivé | boolean | — | false |
 
 ### Dropdown Slots
 

diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
@@ -283,6 +283,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
 | hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |
 | tabindex      | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
+| disabled      | 是否禁用        | boolean         | —                      | false |
 
 ### Dropdown Slots
 

diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
@@ -59,6 +59,10 @@
       tabindex: {
         type: Number,
         default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -111,14 +115,14 @@
         };
       },
       show() {
-        if (this.triggerElm.disabled) return;
+        if (this.disabled) return;
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = true;
         }, this.trigger === 'click' ? 0 : this.showTimeout);
       },
       hide() {
-        if (this.triggerElm.disabled) return;
+        if (this.disabled) return;
         this.removeTabindex();
         if (this.tabindex >= 0) {
           this.resetTabindex(this.triggerElm);
@@ -129,7 +133,7 @@
         }, this.trigger === 'click' ? 0 : this.hideTimeout);
       },
       handleClick() {
-        if (this.triggerElm.disabled) return;
+        if (this.disabled) return;
         if (this.visible) {
           this.hide();
         } else {
@@ -250,28 +254,38 @@
     },
 
     render(h) {
-      let { hide, splitButton, type, dropdownSize } = this;
+      let { hide, splitButton, type, dropdownSize, disabled } = this;
 
       const handleMainButtonClick = (event) => {
         this.$emit('click', event);
         hide();
       };
 
-      let triggerElm = !splitButton
-        ? this.$slots.default
-        : (<el-button-group>
-          <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
+      let triggerElm = null;
+      if (splitButton) {
+        triggerElm = <el-button-group>
+          <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick} disabled={disabled}>
             {this.$slots.default}
           </el-button>
-          <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
+          <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button" disabled={disabled}>
             <i class="el-dropdown__icon el-icon-arrow-down"></i>
           </el-button>
-        </el-button-group>);
+        </el-button-group>;
+      } else {
+        triggerElm = this.$slots.default;
+        const vnodeData = triggerElm[0].data || {};
+        let { attrs = {} } = vnodeData;
+        if (disabled && !attrs.disabled) {
+          attrs.disabled = true;
+          vnodeData.attrs = attrs;
+        }
+      }
+      const menuElm = disabled ? null : this.$slots.dropdown;
 
       return (
-        <div class="el-dropdown" v-clickoutside={hide}>
+        <div class="el-dropdown" v-clickoutside={hide} aria-disabled={disabled}>
           {triggerElm}
-          {this.$slots.dropdown}
+          {menuElm}
         </div>
       );
     }

diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
@@ -224,10 +224,12 @@
       margin-right: -1px;
     }
 
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 1;
+    &:not(.is-disabled) {
+      &:hover,
+      &:focus,
+      &:active {
+        z-index: 1;
+      }
     }
 
     @include when(active) {

diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
@@ -40,7 +40,7 @@
     }
 
     &:hover {
-      &::before {
+      &:not(.is-disabled)::before {
         top: 0;
         bottom: 0;
       }
@@ -60,6 +60,11 @@
       outline-width: 0;
     }
   }
+
+  [disabled] {
+    cursor: not-allowed;
+    color: $--font-color-disabled-base;
+  }
 }
 
 @include b(dropdown-menu) {

diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js
@@ -280,4 +280,32 @@ describe('Dropdown', () => {
       }, 100);
     }, 300);
   });
+  it('dropdown disabled', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown" disabled>
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+
+    triggerEvent(triggerElm, 'mouseenter');
+    setTimeout(() => {
+      expect(dropdownElm.querySelectorAll('.el-dropdown-link[disabled]').length).equal(1);
+      expect(dropdown.visible).to.be.false;
+      done();
+    }, 10);
+  });
 });
diff --git a/types/dropdown.d.ts b/types/dropdown.d.ts
@@ -32,4 +32,7 @@ export declare class ElDropdown extends ElementUIComponent {
 
   /** Dropdown tabindex */
   tabindex: number
+
+  /** Whether Dropdown is disabled */
+  disabled: boolean
 }