技术底层逻辑

<template>
  <div>
    <div class="box1" @click="clickAll">
      <div id="bg" @click="handleclick"><i class="el-icon-edit"></i></div>
      <div class="box" v-show="flag">
        <el-input></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false
    }
  },
  methods: {
  // 开关逻辑 点击按钮出现div 再次点击隐藏div
    handleclick() {
      this.flag = !this.flag
    },
  // 点击空白区域逻辑 获取到dom元素 然后 判断
    clickAll(event) {
      let one = document.getElementById('bg')
      if (one) {
        if (!one.contains(event.target)) {
          this.flag = false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box1 {
  width: 1000px;
  height: 1000px;
  background-color: yellow;

  .bg {
    width: 300px;
    height: 100px;
    background: red;
  }
}
</style>

业务上具体使用场景

就是某个用户列表 实现模糊搜索 产品让加一个icon 点击打开弹框 再次点击关闭弹框 也可以通过点击其他dom区域关闭这个弹框 其他需求也是同理。

业务上具体使用场景原型图（开发ing）