diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md index a7d1ad732..8ce42c3dd 100644 --- 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 index 66001c96f..b2690bc0d 100644 --- 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 index f188cbb18..0d7cbb911 100644 --- 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 index 6cfccc06c..296de7a0c 100644 --- 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 index 1d6e7a19d..66944696d 100644 --- 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 - : ( - + let triggerElm = null; + if (splitButton) { + triggerElm = + {this.$slots.default} - + - ); + ; + } 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 ( -
+
{triggerElm} - {this.$slots.dropdown} + {menuElm}
); } diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss index 52c8767d9..375b13919 100644 --- 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 index 84718599b..6a89f0e0e 100644 --- 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 index b68f8af1d..f3aac2f57 100644 --- 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: ` + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + + ` + }, 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 index 53df211c8..664a6e82a 100644 --- 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 }