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