blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Dialog): support keyboard events (#10359)

Browse Source 
* feat(dialog): keyboard events are supported

* chore: prevention interruption

* chore: add the corresponding event
This commit is contained in:
zoy-l 2022-03-08 19:47:30 +08:00 committed by GitHub
parent 82e345bbef
commit 7612ff9310
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/dialog/Dialog.js
View File

@ -1,4 +1,4 @@
import { createNamespace, addUnit } from '../utils';
import { createNamespace, addUnit, noop } from '../utils';
import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
import { PopupMixin } from '../mixins/popup';
import Button from '../button';
@ -97,12 +97,37 @@ export default createComponent({
onOpened() {
this.$emit('opened');
this.$nextTick(() => {
this.$refs.dialog?.focus();
});
},
onClosed() {
this.$emit('closed');
},
onKeydown(event) {
if (event.key === 'Escape' || event.key === 'Enter') {
// skip keyboard events of child elements
if (event.target !== this.$refs.dialog) {
return;
}
const onEventType = {
Enter: this.showConfirmButton
? () => this.handleAction('confirm')
: noop,
Escape: this.showCancelButton
? () => this.handleAction('cancel')
: noop,
};
onEventType[event.key]();
this.$emit('keydown', event);
}
},
genRoundButtons() {
return (
<GoodsAction class={bem('footer')}>
@ -221,6 +246,9 @@ export default createComponent({
aria-labelledby={this.title || message}
class={[bem([this.theme]), this.className]}
style={{ width: addUnit(this.width) }}
ref="dialog"
tabIndex={0}
onKeydown={this.onKeydown}
>
{Title}
{this.genContent(title, messageSlot)}

2
src/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
<div role="dialog" aria-labelledby="标题" tabindex="0" class="van-dialog" style="display: none;" name="van-dialog-bounce">
<div class="van-dialog__header">标题</div>
<div class="van-dialog__content"><img src="https://img01.yzcdn.cn/vant/apple-3.jpg"></div>
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">

8
src/dialog/test/__snapshots__/index.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;text&lt;/span&gt;</div>`;
exports[`button color 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
<div class="van-button__content"><span class="van-button__text">取消</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
@ -13,7 +13,7 @@ exports[`button color 1`] = `
`;
exports[`button text 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
<div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
@ -23,7 +23,7 @@ exports[`button text 1`] = `
`;
exports[`default slot 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
<div class="van-dialog__content">Custom Message</div>
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
<div class="van-button__content"><span class="van-button__text">确认</span></div>
@ -32,7 +32,7 @@ exports[`default slot 1`] = `
`;
exports[`title slot 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
<div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
<div class="van-button__content"><span class="van-button__text">确认</span></div>