lesson 133: close the dialog when clicking the background

This commit is contained in:
Andreas Zweili 2021-02-08 20:06:16 +01:00
parent 8977c9b49a
commit 12f7f0e9ab
2 changed files with 8 additions and 3 deletions

View File

@ -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>

View File

@ -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>