vue 监听点击除某元素外其他的元素

1.使用ref绑定到要隐藏的元素身上,使用document.addEventListener给全局添加监听事件.
2.使用contains方法判断绑定的元素是否存在于页面的DOM中(包含关系),只会返回布尔值,咱们默认返回false.
3.button按钮记得阻止冒泡,否则点击事件将失效.

<template>
    <div id="box">
    <div>
        <span v-show="flag" ref="shows">过重重关卡看盛世的烟花,赢尽了天下输了她。</span>
        <button @click.stop="btn">按钮</button>
    </div>
      </div>
</template>

<script>
    export default {

        data(){
            return {
                flag:  false
            }
        },
        created() {
        this.text()
    },
        methods:{
           text() {
        document.addEventListener("click", e => {
            if (this.$refs.shows) {
                let self = this.$refs.shows.contains(e.target);
                    if (!self) {
                        this.flag = false;
                    }
             }
            })
        },
        btn() {
            this.flag = !this.flag
        }
        },
    }
</script>