vue点击某个div出现下拉框，点击其他区域下拉框消失

最新推荐文章于 2023-12-03 20:52:24 发布

林剑河

最新推荐文章于 2023-12-03 20:52:24 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/ljhljh1/article/details/115464946

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Vue.js中如何使用watch监听属性变化，并在元素失去焦点时触发事件。当`show_login_out`属性变为真时，启动监听，添加点击事件监听器；反之则移除监听。点击事件外部时，关闭`show_login_out`，实现组件的显示与隐藏控制。

摘要由CSDN通过智能技术生成

1、场景

2、代码

 watch:{
        show_login_out(newVal, oldVal){
            if(newVal === true){
                alert('开始监听')
                // 若显示，则监听失去焦点事件。
                document.addEventListener('click',this.click_out_side, true);
            }else{
                alert('事件销毁')
                // 不显示，销毁监听事件。
                document.removeEventListener("click", this.click_out_side, true);
            }
        }
    },
    methods:{
        click_out_side(e){
            if(!this.$el.contains(e.target)){
                alert('触发点击外面')
                this.show_login_out = false;
            }
        },
   }