lesson 133: close the dialog when clicking the background
This commit is contained in:
parent
8977c9b49a
commit
12f7f0e9ab
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div @click="$emit('close')"></div>
|
||||||
<dialog open>
|
<dialog open>
|
||||||
<header>
|
<header>
|
||||||
<slot name="header">
|
<slot name="header">
|
||||||
|
@ -17,7 +17,8 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
required: false
|
required: false
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
emits: ['close']
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -24,7 +24,11 @@
|
||||||
</form>
|
</form>
|
||||||
</base-card>
|
</base-card>
|
||||||
<teleport to="body">
|
<teleport to="body">
|
||||||
<base-dialog v-if="inputIsInvalid" title="Input may not be empty">
|
<base-dialog
|
||||||
|
v-if="inputIsInvalid"
|
||||||
|
title="Input may not be empty"
|
||||||
|
@close="resetErrorDialog"
|
||||||
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<p>Unfortunately some inputs seem to be empty.</p>
|
<p>Unfortunately some inputs seem to be empty.</p>
|
||||||
<p>Please correct this and try again.</p>
|
<p>Please correct this and try again.</p>
|
||||||
|
|
Reference in New Issue