ElemeFE / ElemeFE/element

[Feature Request] messageBox.confirm确认按钮回车按键事件异常触发问题

Open
#22,721 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Existing Component

### Component Name
messageBox

### Description
事情是这样,项目中想要实现输入框绑定回车键的keydown事件触发messageBox.confirm,然后点击confirm的确定后再显示dialog弹窗。
现在的问题是输入框回车后会显示confirm弹窗但会马上消失然后出现dialog弹窗,查看elementUI源码发现confirm弹窗出现后会在确认按钮聚且也绑定了keydown.enter事件。
不明白的点在于confirm弹窗出现时keydown事件已经触发完了,怎么会触发confirm弹窗“确定”按键的keydown事件。我看了饿了么ui源码,confirm弹窗是插入到body元素下的,应该也不是事件冒泡引起的吧。
诡异的是我用elementUI源码运行npm run dev:play在play/index.vue重现代码没有出现这个问题,但是用vue-cli创建个新项目却会出现这个问题。

下面是vue文件代码。我找到了解决问题的方法:一、使用setTimeout弹出confirm弹窗,二、在输入框的事件绑定后加个“.prevent”事件修饰符。但是不明白为什么出现这样的问题。按照我的理解通过输入框的按键事件调出confirm弹窗后不应该触发这个弹窗“确认”按钮的回车事件,希望有人能够解惑。

```html




Try Element




export default {
name: 'HelloWorld',
data() {
return {
visible: false,
input: 'asd',
input1: 'jffdgs'
}
},
methods: {
showDialog() {
console.log('ghlsdfhlksglsdf')

setTimeout(() => {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('11111111111111111')
this.visible = true
this.$nextTick(() => {
this.$refs.dialogInput.focus()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}, 0);
},
showDialog1 () {
console.log(22222222222)
}
}
}

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.