前端队长の技术博客

  1. js获取dom方式
    1. 方式一
    2. 方式二 (added in 20200422)
  2. vue方式
    1. 补充

js获取dom方式

直接上代码:

方式一

mounted: function () {
    let that = this;
    $(document).on('click', function (e) {
        let dom = $('.myDiv')[0]; // 自定义div的class

        if (dom) {
            // 如果点击的区域不在自定义dom范围
            if (!dom.contains((e.target))) {
                that.showMyDiv = false;
            }
        } 
    });
},
beforeDestroy() {
    $(document).off('click');
}

方式二 (added in 20200422)

mounted() {
    window.addEventListener('click',this.close,true);
},
destroyed() {
    window.removeEventListener('click',this.close,true);
},
methods:{
    close(e) {
         // 点击的部位不是该组件根dom元素
          if (e.target !== this.$el) {
              this.showTip = false;
          } 
    }
}

vue方式

(added in 20200114)

最近看代码的时候,发现了一个使用vue的方式关闭弹框,而不时使用dom的方式。

该方式更加简洁,性能也更好。

上面代码,当showMyDiv == true 的时候显示弹框,于是我们在整个组件页面(如果这只是一个子组件的话,看下面补充部分)的根元素上绑定一个点击事件:@click=closeMyDiv ,然后在点击触发弹框的元素弹框本身的元素上绑定@click.stop ,这样我们在需要弹框的时候不会触发closeMyDiv事件。

过程是这样的:当点击closeMyDiv的时候,如果能响应,说明一定点击的是其他区域。此时判断showMyDiv 的状态,如果为true,说明弹框出现了,需要消失,则设置showMyDiv = false 即可。

代码如下:

closeMyDiv() {
     this.showMyDiv = false;
}

该方法不需要获取dom元素,毕竟获取dom元素会消耗浏览器性能。

补充

(added in 20200422)

如果该组件只是子组件的话,就不能在整个组件页面的根元素上绑定一个点击事件,因为这个组件只是整个页面的一小部分。

处理方式:

mounted() {
    window.addEventListener('click',this.close,true);
},
destroyed() {
    window.removeEventListener('click',this.close,true);
},
methods:{
    close(e) {
         this.showMyDiv = false; // 整个页面的点击都关闭
    }
}

然后一样,在点击触发弹框的元素弹框本身的元素上绑定@click.stop

(完)

(完)