vue.js 如何绑定点击空白部分某个div隐藏

Question

页面左侧有一个按钮，点击后划出一个面板，当用户点击页面空白处时，面板关闭，怎么绑定用户点击空白处这个事件呢

Answer 1

<button @click="togglePanel">点击</buttton> 
<div v-show="visible" ref="main">弹出层</div>

export default {
    data () {
        return {
            visible: false
        }
    },
    methods: {
        togglePanel () {
            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.contains(e.target)) {
                this.hide()
            }
        }
    },
    beforeDestroy () {
        this.hide()
    }
}

Answer 2

牛逼了，直接是请输入代码、、、

Answer 3

做个遮罩层，像弹出框那样，在遮罩层添加事件

Answer 4

document 加事件判断 e.target

Answer 5

this.$refs.main.contains is not a function 为啥会出现这个