vue 点击空白区域隐藏div_vue点击空白区域隐藏指定div-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61928334/article/details/126034524

在Vue项目中，可以通过监听document的点击事件并判断事件目标来实现点击空白区域隐藏div的效果。通常在组件的mounted生命周期钩子中绑定事件，并使用`const _this = this`保存上下文。具体做法包括在按钮点击事件中显示div，以及在外围添加点击事件以关闭div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue的mounted中写,在vue中，jq的this并没有指向当前的data，需const _this = this 改变this指向

const _this = this 
    $(document).click(function(e) {
      console.log('e', e)
      if (_this.debug === 0) { // 如果当前是显示的，则将标志位设置为1
        console.log('0')
        _this.debug = 1
        return
      }
      if (_this.debug === 1) { // 当目前为隐藏时或者已经在展示状态时判断
        // console.log('1')
        // console.log('1', (e.target).parents('.content'))
        // console.log('133', e.target)
        if ($(e.target).parents('.content').length === 0) { // 如果未点击对应位置则隐藏
          // _this.is_select_show = false
        }
      }
    })

在“点击”按钮出现的div的事件中

openAddress() {
      this.is_select_show = !this.is_select_show
      if (this.is_select_show) {
        this.debug = 0 // 保存当前为展示的状态
      } else {
        this.debug = 1
      }
    },

二：第二种方法

1，我是表单里面有个按钮带点击显示隐藏2，点击openAddress显示panelShow节点的内容，id很重要“el-form-item id=“myPanel””

<el-form-item id="myPanel" label="地址信息:" prop="area_id">
                  <el-button
                    class="address"
                    style="color:#c0c4cc; white-space:normal; max-width:600px;width:350px;min-height:40px;"
                    @click="openAddress()" >
                    <div style="text-align:left;">
                      <span style="color:black">{{ areas_name }}</span>
                      <span v-if="!areas_name" style="color:#dcdfe6">请选择省/市/区/街道</span>
                      <i class="el-icon-arrow-down adress_i" />
                    </div>
                  </el-button>
                  <div v-if="panelShow" style="width:360px">
                    <addressSelect
                      :isempty="isempty"
                      :address-select-show="is_select_show"
                      :left-value="-75"
                      :top-value="41"
                      @getAddressDetail="getAddressDetail"/>
                  </div>
                </el-form-item>

2，在外需要点击影藏的地方添加点击事件

 <div ref="allBrand" class="mains" @click="hidePanel" ></div>

hidePanel(event) {
      var myPanel = document.getElementById('myPanel')// 得到点击出现的节点
      if (myPanel) {
        this.panelShow = true// 有改节点的时候，显示，解决第二次点击openAddress按钮出现的bug
        if (!(myPanel.contains(event.target))) { // 这句是说如果我们点击到了id为myPanel以外的区域，为false
          this.panelShow = false// 消失
        }
      }
    },