【vue】vue +element 搭建项目，点击空白处关闭弹窗

<template>
    <div class="step2">
        <el-button @click="togglePanel($event)">点击</el-button>
        <div class="shaw-box" v-if="visible" ref="main">弹出层</div>
    </div>
</template>
<style>
    .shaw-box{
        width:200px;
        height:200px;
        border:1px solid red;
        margin-top:10px;
    }
</style>

<script>
  export default {
    data() {
      return {
        visible:false,
      }
    },
    methods: {
        togglePanel (event) { 
　　　　　　　　//阻止冒泡
　　　　　　　　event || (event = window.event);
　　
　　　　　　　　event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

　　　　　　　　this.visible ? this.hide() : this.show()
        },
        show () {
            this.visible = true
            document.addEventListener('click', this.hidePanel, false)
        },

        hide () {
            this.visible = false
            document.removeEventListener('click', this.hidePanel, false)
        },

        hidePanel (e) {
            if (this.$refs.main && !this.$refs.main.contains(e.target)) {//点击除弹出层外的空白区域

                this.hide()
            }
        },
    },
    beforeDestroy () {
        this.hide()
    }
  }
</script>

 

 

作者：smile.轉角

QQ：493177502