vue点击当前盒子以外任意地方隐藏当前盒子

方法一: contains方法 用于判断DOM元素的包含关系;

需要注意的是:它以HTMLElement为参数,且返回布尔值。

复制代码
 document.addEventListener('click', (el) => {
        console.log(this.$refs.content.contains(el.target));
      })
复制代码
<template>
    <button @click.stop='showBox'>点击展示隐藏盒子</button>
    <div ref='box' v-show="flag">要隐藏的盒子</div>
</template>
<script>
    export default {
        data(){
           return{
              flag:false
           }
        },
        mounted() {
            document.addEventListener('click', this.hideBox);
        },
        methods:{
            hideBox(e){
                //判断是否点击的是盒子之外
               if (!this.$refs.box.contains(e.target)) {
                   this.flag = false
               }
            },
            showBox(){
                this.flag = !this.flag
            },
        }
    }
</script>

方法二: 可以给盒子加上阻止冒泡 .stop

相关推荐
前端小书生13 小时前
React 组件渲染
前端·react.js
奔跑的蜗牛ing13 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
sjd_积跬步至千里13 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙13 小时前
前端基础避坑:3 个实用知识点的简单用法
前端
journs13 小时前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙13 小时前
elpis项目DSL设计分享
前端
李李记13 小时前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞13 小时前
快速掌握 ProseMirror 的核心概念
前端
ygria14 小时前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
墨渊君15 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css