mirror of https://github.com/ElemeFE/element
Dropdown: add disabled property (#21235)
SHIODA Masaharu
GitHub
parent
eeb9a93e86
commit
c50a0bf978
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,4 +32,7 @@ export declare class ElDropdown extends ElementUIComponent {
|
|||
|
||||
/** Dropdown tabindex */
|
||||
tabindex: number
|
||||
|
||||
/** Whether Dropdown is disabled */
|
||||
disabled: boolean
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue