Quellcode durchsuchen

Use watcher for an internal variable showModal, add method to close modal on clicking overlay

sbkwgh vor 8 Jahren
Ursprung
Commit
090b3d34a6
1 geänderte Dateien mit 13 neuen und 3 gelöschten Zeilen
  1. 13 3
      src/components/ModalWindow.vue

+ 13 - 3
src/components/ModalWindow.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class='modal_window__overlay' :class='{"modal_window--show": showModal}'>
-		<div class='modal_window' :class='{"modal_window--show": showModal}'>
+	<div class='modal_window__overlay' :class='{"modal_window--show": internalShowModal}' @click.self='hideModal'>
+		<div class='modal_window' :class='{"modal_window--show": internalShowModal}'>
 			Placeholder content<br/>
 			Placeholder content<br/>
 			Placeholder content<br/>
@@ -18,8 +18,18 @@
 		props: ['showModal'],
 		data () {
 			return {
-
+				internalShowModal: this.showModal
+			}
+		},
+		methods: {
+			hideModal () {
+				this.internalShowModal = false;
 			}
+		},
+		mounted () {
+			this.$watch('showModal', function(newVal) {
+				this.internalShowModal = newVal;
+			});
 		}
 	}
 </script>