取消文件选择不再把弹窗一起关掉
input[type=file] 在用户取消选择时发出的 cancel 事件会冒泡,带 DropFile 的三个弹窗把它当成了 dialog 自己的 Esc 取消。cancel 处理器现在只认 target 是 dialog 本身的事件。
This commit is contained in:
@@ -90,6 +90,16 @@ function submit() {
|
|||||||
emit('submit', plan.value)
|
emit('submit', plan.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Esc 关弹窗走这里。文件选择框被取消时 input 的 cancel 事件会冒泡到 dialog,
|
||||||
|
* 不是发给 dialog 自己的一律不理——否则取消选文件会把整个弹窗带关。
|
||||||
|
*/
|
||||||
|
function onCancel(event: Event) {
|
||||||
|
if (event.target !== dialog.value) return
|
||||||
|
event.preventDefault()
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
|
||||||
/** 点在遮罩上就关闭。内容区的点击 target 是 form 里的元素,到不了 dialog 本身。 */
|
/** 点在遮罩上就关闭。内容区的点击 target 是 form 里的元素,到不了 dialog 本身。 */
|
||||||
function onBackdrop(event: MouseEvent) {
|
function onBackdrop(event: MouseEvent) {
|
||||||
if (event.target === dialog.value) emit('close')
|
if (event.target === dialog.value) emit('close')
|
||||||
@@ -102,7 +112,7 @@ function onBackdrop(event: MouseEvent) {
|
|||||||
class="dlg"
|
class="dlg"
|
||||||
@click="onBackdrop"
|
@click="onBackdrop"
|
||||||
@close="emit('close')"
|
@close="emit('close')"
|
||||||
@cancel.prevent="emit('close')"
|
@cancel="onCancel"
|
||||||
>
|
>
|
||||||
<form method="dialog" @submit.prevent="submit">
|
<form method="dialog" @submit.prevent="submit">
|
||||||
<header class="dlg-head">
|
<header class="dlg-head">
|
||||||
|
|||||||
@@ -112,6 +112,16 @@ function submit() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Esc 关弹窗走这里。文件选择框被取消时 input 的 cancel 事件会冒泡到 dialog,
|
||||||
|
* 不是发给 dialog 自己的一律不理——否则取消选文件会把整个弹窗带关。
|
||||||
|
*/
|
||||||
|
function onCancel(event: Event) {
|
||||||
|
if (event.target !== dialog.value) return
|
||||||
|
event.preventDefault()
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
|
||||||
/** 点在遮罩上就关闭。内容区的点击 target 是 form 里的元素,到不了 dialog 本身。 */
|
/** 点在遮罩上就关闭。内容区的点击 target 是 form 里的元素,到不了 dialog 本身。 */
|
||||||
function onBackdrop(event: MouseEvent) {
|
function onBackdrop(event: MouseEvent) {
|
||||||
if (event.target === dialog.value) emit('close')
|
if (event.target === dialog.value) emit('close')
|
||||||
@@ -124,7 +134,7 @@ function onBackdrop(event: MouseEvent) {
|
|||||||
class="dlg"
|
class="dlg"
|
||||||
@click="onBackdrop"
|
@click="onBackdrop"
|
||||||
@close="emit('close')"
|
@close="emit('close')"
|
||||||
@cancel.prevent="emit('close')"
|
@cancel="onCancel"
|
||||||
>
|
>
|
||||||
<form method="dialog" @submit.prevent="submit">
|
<form method="dialog" @submit.prevent="submit">
|
||||||
<header class="dlg-head">
|
<header class="dlg-head">
|
||||||
|
|||||||
@@ -99,6 +99,16 @@ function submit() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Esc 关弹窗走这里。文件选择框被取消时 input 的 cancel 事件会冒泡到 dialog,
|
||||||
|
* 不是发给 dialog 自己的一律不理——否则取消选文件会把整个弹窗带关。
|
||||||
|
*/
|
||||||
|
function onCancel(event: Event) {
|
||||||
|
if (event.target !== dialog.value) return
|
||||||
|
event.preventDefault()
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
|
||||||
/** 点在遮罩上就关闭。内容区的点击 target 是 form 里的元素,到不了 dialog 本身。 */
|
/** 点在遮罩上就关闭。内容区的点击 target 是 form 里的元素,到不了 dialog 本身。 */
|
||||||
function onBackdrop(event: MouseEvent) {
|
function onBackdrop(event: MouseEvent) {
|
||||||
if (event.target === dialog.value) emit('close')
|
if (event.target === dialog.value) emit('close')
|
||||||
@@ -111,7 +121,7 @@ function onBackdrop(event: MouseEvent) {
|
|||||||
class="dlg"
|
class="dlg"
|
||||||
@click="onBackdrop"
|
@click="onBackdrop"
|
||||||
@close="emit('close')"
|
@close="emit('close')"
|
||||||
@cancel.prevent="emit('close')"
|
@cancel="onCancel"
|
||||||
>
|
>
|
||||||
<form method="dialog" @submit.prevent="submit">
|
<form method="dialog" @submit.prevent="submit">
|
||||||
<header class="dlg-head">
|
<header class="dlg-head">
|
||||||
|
|||||||
Reference in New Issue
Block a user