点击弹框外的部分弹框消失

自己写个弹框，两个小点，一个是垂直居中，一个是点击弹框外的部分弹框消失，点击弹框弹框不消失

环境是vue的环境，比较简单

<template>
    
   <div class="dialog" @click="closeDilaog" v-if="showDialog">
       <div class="dialog-content" ref="content">
           内容部分
       </div>
   </div>
</template>

<script>
    
    export default {
        data() {
            return {
                showDialog: false
            }
        },
        methods: {
           closeDilaog(e) {
               const content = this.$refs.content;
                if(!_con.isEqualNode(e.target) && e.target.contains(_con)) {
                  this.showDialog = !this.showDialog
                }
           }
       }
    }
</script>

<style>
    
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
         100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
    }
    .dialog-content {
         200px;
        height: 200px;
        background: lightblue;
    }
</style>