github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tooltip, Dropdown, Popover: support tabindex attribute (#15167)

pull/15228/head
hetech 2019-04-23 15:36:41 +08:00 committed by GitHub
parent 1fe6849a63
commit 070bf1fd1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 51 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/docs/en-US/dropdown.md
View File

@ -278,6 +278,7 @@ Besides default size, Dropdown component provides three additional sizes for you
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
| 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 |
### Dropdown Slots

1
examples/docs/en-US/popover.md
View File

@ -152,6 +152,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | custom class name for popover | string | — | — |
| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
### Slot
| Name | Description |

1
examples/docs/en-US/tooltip.md
View File

@ -193,3 +193,4 @@ Disabled form elements are not supported for Tooltip, more information can be fo
| popper-class | custom class name for Tooltip's popper | string | — | — |
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |

1
examples/docs/es/dropdown.md
View File

@ -280,6 +280,7 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
| hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true |
| 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) of Dropdown | number | — | 0 |
### Dropdown Slots

1
examples/docs/es/popover.md
View File

@ -151,6 +151,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
### Slot
| Nombre | Descripción |

1
examples/docs/es/tooltip.md
View File

@ -194,3 +194,4 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
| enterable | si el mouse puede entrar al Tooltip | Boolean | — | true |
| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |

1
examples/docs/fr-FR/dropdown.md
View File

@ -280,6 +280,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
| hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément. | boolean | — | true |
| 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/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
### Dropdown Slots

1
examples/docs/fr-FR/popover.md
View File

@ -153,6 +153,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | Classe du popover. | string | — | — |
| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
### Slot

1
examples/docs/fr-FR/tooltip.md
View File

@ -194,3 +194,4 @@ Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, pl
| popper-class | Classe du popper de Tooltip. | string | — | — |
| enterable | Si la souris peut entrer dans la Tooltip. | Boolean | — | true |
| hide-after | Délai avant disparition. | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |

1
examples/docs/zh-CN/dropdown.md
View File

@ -282,6 +282,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true |
| 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 |
### Dropdown Slots

1
examples/docs/zh-CN/popover.md
View File

@ -149,6 +149,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | 为 popper 添加类名 | String | — | — |
| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
| tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
### Slot
| 参数 | 说明 |

1
examples/docs/zh-CN/tooltip.md
View File

@ -174,3 +174,4 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
| enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
| hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
| tabindex | Tooltip 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |

16
packages/dropdown/src/dropdown.vue
View File

@ -55,6 +55,10 @@
hideTimeout: {
type: Number,
default: 150
},
tabindex: {
type: Number,
default: 0
}
},
@ -116,7 +120,9 @@
hide() {
if (this.triggerElm.disabled) return;
this.removeTabindex();
this.resetTabindex(this.triggerElm);
if (this.tabindex >= 0) {
this.resetTabindex(this.triggerElm);
}
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = false;
@ -162,14 +168,14 @@
ev.preventDefault();
ev.stopPropagation();
} else if (keyCode === 13) { // enter选中
this.triggerElm.focus();
this.triggerElmFocus();
target.click();
if (this.hideOnClick) { // click关闭
this.visible = false;
}
} else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
this.hide();
this.triggerElm.focus();
this.triggerElmFocus();
}
},
resetTabindex(ele) { // 下次tab时组件聚焦元素
@ -189,7 +195,7 @@
if (!this.splitButton) { // 自定义
this.triggerElm.setAttribute('role', 'button');
this.triggerElm.setAttribute('tabindex', '0');
this.triggerElm.setAttribute('tabindex', this.tabindex);
this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
}
},
@ -230,7 +236,7 @@
}
this.$emit('command', command, instance);
},
focus() {
triggerElmFocus() {
this.triggerElm.focus && this.triggerElm.focus();
},
initDomOperation() {

9
packages/popover/src/main.vue
View File

@ -58,6 +58,10 @@ export default {
transition: {
type: String,
default: 'fade-in-linear'
},
tabindex: {
type: Number,
default: 0
}
},
@ -86,7 +90,7 @@ export default {
if (reference) {
addClass(reference, 'el-popover__reference');
reference.setAttribute('aria-describedby', this.tooltipId);
reference.setAttribute('tabindex', 0); // tab序列
reference.setAttribute('tabindex', this.tabindex); // tab序列
popper.setAttribute('tabindex', 0);
if (this.trigger !== 'click') {
@ -113,6 +117,9 @@ export default {
on(reference, 'mouseleave', this.handleMouseLeave);
on(popper, 'mouseleave', this.handleMouseLeave);
} else if (this.trigger === 'focus') {
if (this.tabindex < 0) {
console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
}
if (reference.querySelector('input, textarea')) {
on(reference, 'focusin', this.doShow);
on(reference, 'focusout', this.doClose);

16
packages/tooltip/src/main.js
View File

@ -48,6 +48,10 @@ export default {
hideAfter: {
type: Number,
default: 0
},
tabindex: {
type: Number,
default: 0
}
},
@ -226,10 +230,12 @@ export default {
destroyed() {
const reference = this.referenceElm;
off(reference, 'mouseenter', this.show);
off(reference, 'mouseleave', this.hide);
off(reference, 'focus', this.handleFocus);
off(reference, 'blur', this.handleBlur);
off(reference, 'click', this.removeFocusing);
if (reference.nodeType === 1) {
off(reference, 'mouseenter', this.show);
off(reference, 'mouseleave', this.hide);
off(reference, 'focus', this.handleFocus);
off(reference, 'blur', this.handleBlur);
off(reference, 'click', this.removeFocusing);
}
}
};

3
types/dropdown.d.ts vendored
View File

@ -23,4 +23,7 @@ export declare class ElDropdown extends ElementUIComponent {
/** Whether to hide menu after clicking menu-item */
hideOnClick: boolean
/** Dropdown tabindex */
tabindex: number
}

3
types/popover.d.ts vendored
View File

@ -61,5 +61,8 @@ export declare class ElPopover extends ElementUIComponent {
/** Delay of appearance when trigger is hover, in milliseconds */
openDelay: number
/** Popover tabindex */
tabindex: number
$slots: PopoverSlots
}

3
types/tooltip.d.ts vendored
View File

@ -46,4 +46,7 @@ export declare class ElTooltip extends ElementUIComponent {
/** Timeout in milliseconds to hide tooltip */
hideAfter: string
/** Tooltip tabindex */
tabindex: number
}