vue 点击空白处才会改变右侧栏内容

要实现如下功能：

点击左图中红框区域，改变右侧栏内容，从11111变成33333

点击右图中蓝框以外的空白区域，右侧栏内容变回1111111

 父组件中：

        // 点击空白处返回最初的右侧边栏内容
        handleALL(event){
          var one = document.getElementById("box1");
            var two = document.getElementById("box2");
            var three = document.getElementById("card");
            var four = document.getElementById("col");        
            if(!one.contains(event.target) && !two.contains(event.target) && !three.contains(event.target) && !four.contains(event.target)){
              this.$refs.dtwcardform.showType1 = true
              this.$refs.dtwcardform.showType2 = false
            }
               
        }

one two three four可以理解为图中蓝色框部分，排除掉这几个部分，剩下的空白区域被点击则改变右侧边栏内容

子组件完整代码：

<template>
  <div>    
    <el-card id="card" :body-style="{ padding: '2px' }" class="box-card">     
      <div class="hoverdiv">
        <img :src="input[0].name" class="image2" style="cursor:pointer;" @click="handleone">
        <el-input class="hoverinput" type="textarea" :rows="2" v-model="input[1].name" @click.native="tuNameDrawer = true" :placeholder="placeholder" maxlength="30" show-word-limit @focus="blurSearchFor()" @blur="handleInputBlur" ref="tuname" id="a" />
      </div>
      <div class="bottom clearfix" style="margin:5px 25px">
        <el-col :span="6">
          <img :src="input[0].name" class="image3" style="cursor:pointer;" @click="handleone">
        </el-col>
        <el-col :span="18">
          <el-input type="textarea" :rows="2" v-model="input[2].name" placeholder="编辑文本，最多显示30个字。编辑文本，最多显示30个字" maxlength="30" show-word-limit @blur="handleInputBlur" ref="tuintroduce" />
        </el-col>
      </div>
    </el-card>

    <!-- 右侧栏——设置 -->
    <section class="settings" v-show="showType1" id="box1">
      <div class="settings-header">
        <h3 class="herder-title">设置</h3>
      </div>
      <div class="settings-body">
        <el-card>
          <div>
            1111111111111111111111
          </div>
        </el-card>
      </div>
    </section>
    <!-- 右侧栏——图片设置 -->
    <section class="settings" v-show="showType2" id="box2">
      <div class="settings-header">
        <h3 class="herder-title">图片设置</h3>
      </div>
      <div class="settings-body">
        <el-card>
          <div>
            <p class="wenzi">333333333333333333333333</p>
          </div>
        </el-card>
      </div>
    </section>
  </div>
</template>

<script>
import editTableVue from '../../tool/gen/editTable.vue'

  export default {
    data(){
      return{
        input: [
          {name:require('../../../assets/images/tuwen2.jpg')},  // 0  图片
          {name:''},  // 1  编辑文本
          {name:''},  // 2  编辑文本描述
        ],
        tuNameDrawer: false,
        placeholder: '编辑文本，最多显示30个字。编辑文本，最多显示30个字',
        cursorIndex:'', 
        showType1: true,
        showType2: false,
        radio: 3,
      }
    },
    methods:{
      handleone(){
        this.showType1 = false
        this.showType2 = true
      },
      blurSearchFor(){
        if(this.placeholder == '编辑文本，最多显示30个字。编辑文本，最多显示30个字'){
          this.placeholder = ''
        }
      },
      //获取光标位置
      handleInputBlur(e){
        if(e.srcElement.id === 'a'){
          this.placeholder = '编辑文本，最多显示30个字。编辑文本，最多显示30个字'
        }
        this.cursorIndex = e.srcElement.selectionStart; 
      },
    },
 }
</script>

<style lang="scss">
.image2 {
  width: 100%;
  display: block;
  height: 260px;
}
.image3{
  width: 60px;
  display: block;
  height: 54px;
} 
.hoverdiv{
  position: relative;
}
.hoverinput{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 5px 5px; 
  cursor: pointer;
}
.hoverdiv .el-textarea__inner{
  height: 60px;
  /* 使input框的背景变透明 */
  background-color: rgba(144, 147, 153, 0.2);
  /* 使边框也变透明 */
  border-color: rgba(144, 147, 153, 0.2);
  /* 给边框加阴影能够使其有立体感 */
  // box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
  /* 改变获取焦点后的竖线颜色 */
  // caret-color: rgba(0, 255, 255,0.8);
  color:#FFFFFF;
  &::placeholder{
    font-size: 16px;
    color:#FFFFFF;
  }
}
.hoverdiv .el-input__count{
    background-color: transparent;
  }
 
.bottom {
  margin-top: 13px;
  line-height: 12px;
  padding: 2px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
.text1 {
  font-size: 15px;
  color: black;
  line-height: 18px;
}

.point{
  cursor: pointer;
}

.button{
  width: 100%;
}

.map {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}
.bm-view{
  width: 100%;
  height: 300px;
  margin-top: 20px;   
}
.settings{
  position: fixed;
  top: 60px;
  bottom: 0;
  right: 0;
  width: 380px;
  border: 1px solid #dcdcdc;
  border-radius: 2px;
  background-color: #f8f8fa;
  z-index: 2;
}
.settings-header{
  position: relative;
  height: 35px;
  line-height: 35px;
  margin-left: 8px;
  margin-right: 8px;
  vertical-align: middle;
  border-bottom: 1px solid #dcdcdc;
  box-sizing: border-box;
  z-index: 10;
}
.herder-title{
  text-align: left;
  padding-left: 5px;
  font-weight: 600;
  font-size: 14px;
  color: #29304e;
  position: relative;
}
.herder-title:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: #1890ff;
  opacity: 1;
  border-radius: 2px;
}
.settings-body{
  padding-left: 16px;
  padding-right: 16px;
  position: absolute;
  top: 60px;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
.wenzi{
  text-align: left;
}
</style>

参考：https://www.cnblogs.com/zhifei9/p/15216308.html