vue实现点击空白处改变dom状态实现显隐

说明：最近在写h5项目文章回复功能，给出需求是，点击回复的默认按钮，出现带输入框和发布按钮的div代替当前，当焦点失去的时候隐藏盒子（本来想在输入框焦点问题动手的，但是想到滑动文章内容就失去焦点隐藏有点不太好），效果图如下：

初始状态下：

点击后，并且滑动文章不会消失，点击文章内容即可隐藏

实现代码：

<div ref="searchMain" class="box-footer">    // 这里一定要绑定ref（searchMain）
        <div v-show="elbox2_comments">  // elbox2_comments控制显隐藏 默认为false 自己加到data即可
          <el-card>
            <div class="commentsFB">
              <div style="width: 80vw;">
                <el-input v-model="elbox2_input" placeholder="请输入内容" />
              </div>
              <div @click="release">
                <el-button type="primary">发布</el-button>
              </div>
            </div>
          </el-card>
        </div>
        <div v-show="elbox2_commentsTab">
          <el-card shadow="always">
            <div class="article_elbox">
              <div v-if="item.give_like == 1" class="elbox1" @click="outLike">
                <!-- <i :class="likes ? 'icon-aixin' : 'icon-aixin1' " class="iconfont" /> -->
                <i class="iconfont icon-aixin" />
                <span>已点赞</span>
              </div>
              <div v-if="item.give_like == 0" class="elbox1" @click="ShowLike">
                <!-- <i :class="likes ? 'icon-aixin' : 'icon-aixin1' " class="iconfont" /> -->
                <i class="iconfont icon-aixin1" />
                <span>点赞</span>
              </div>
              <div>
                <span>|</span>
              </div>
              <div class="elbox2" @click="goMedInfo">   // 回复点击触发goMedInfo方法
                <i class="el-icon-chat-dot-square" />
                <span>回复</span>
              </div>
              <div>
                <span>|</span>
              </div>
              <div class="elbox3">
                <i class="el-icon-link" />
                <span>分享</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>

点击回复触发方法：

// 回复调用方法
    goMedInfo(imageArr) {
      this.elbox2_comments ? this.hide() : this.show()
    },
    // 点击空白处的方法
     show() {
      this.elbox2_comments = true
      document.addEventListener('click', this.hidePanel, false)
    },

    hide() {
      this.elbox2_comments = false
      document.removeEventListener('click', this.hidePanel, false)
    },

    hidePanel(e) {
      console.log(e) // 判断ref中是否有子集
      if (!this.$refs.searchMain.contains(e.target)) {   // 这里如果没有ref（searchMain）的话contains会报错，所以ref一定要找到正确的父级div
        this.hide()
      }
    }

到这里就完成了，其实很简单就是判断状态，通过ref来检查有没有子集，然后再次改变dom的显隐