Add modal event click overlay(devjin0617#14)

rkdgusrnrlrl · Aug 28, 2018 · 75fab67 · 75fab67
1 parent 6e985f8
commit 75fab67
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <!-- Modal -->
-  <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" data-toggle="modal" data-backdrop="static" data-keyboard="false">
-    <div class="modal-dialog" role="document">
+  <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" data-toggle="modal" data-backdrop="static" data-keyboard="false" @click="clickOverlay">
+    <div class="modal-dialog" role="document" @click.stop>
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -34,6 +34,7 @@ export default {
       this.confirmAfterHook = args.confirmAfter
       this.cancelBeforeHook = args.cancelBefore
       this.cancelAfterHook = args.cancelAfter
+      this.clickOverlayHook = args.clickOverlay
 
       $('#bsModal').modal('show')
     })
@@ -45,6 +46,10 @@ export default {
       this.cancelAfterHook()
       this.resetProperties()
     })
+
+    $('#bsModal').on('overlay.bs.modal', (e) => {
+      this.clickOverlayHook()
+    })
   },
   data () {
     return {
@@ -56,7 +61,8 @@ export default {
       confirmBeforeHook: () => {},
       confirmAfterHook: () => {},
       cancelBeforeHook: () => {},
-      cancelAfterHook: () => {}
+      cancelAfterHook: () => {},
+      clickOverlayHook: () => {}
     }
   },
   methods: {
@@ -80,6 +86,9 @@ export default {
       this.confirmAfterHook = () => {}
       this.cancelBeforeHook = () => {}
       this.cancelAfterHook = () => {}
+    },
+    clickOverlay: function () {
+      this.clickOverlayHook()
     }
   }
 }

diff --git a/src/examples/ModalExample.vue b/src/examples/ModalExample.vue
@@ -34,6 +34,9 @@ export default {
         },
         cancelAfter: () => {
           window.alert('닫기 이후 훅')
+        },
+        clickOverlay: () => {
+          window.alert('오버레이 클릭 훅')
         }
       })
     }