el-popover 切换不同的图片和内容

<template>
 <div class="weTel">
    <div class="cents">
      <div @mouseenter="getTelop('top1')" :class="top_type===0?'top hand isp': 'topAvtive isp hand'">
        <img v-if="top_type" :src="require('@/assets/images/lian1.png')" alt="">
        <img v-else :src="require('@/assets/images/lian3.png')" alt="">
      </div>
      <div @mouseenter="getTelop('top2')" :class="top_type1===0?'top hand isp': 'topAvtive isp hand'">
        <img v-if="top_type1" :src="require('@/assets/images/lian2.png')" alt="">
        <img v-else :src="require('@/assets/images/lian4.png')" alt="">
      </div>
    </div>
    <el-popover placement="left" width="160" v-model="visible">
      <div class="title" v-if="valIndex==='top1'">
        <div> xxxx</div>
        <div class="tel">86-029-84506360</div>
      </div>
      <div class="code" v-if="valIndex==='top2'" >
        <img :src="require('@/assets/images/lian5.png')" alt="">
        <div class="codText">
          <div> xx x</div>
          <div> xxx</div>
        </div>
      </div>
   </el-popover>
 </div>
</template>
<script>
	export default {
		data() {
			return {
        top_type:0,
        top_type1:0,
        valIndex:'',
        visible: false,
			}
		},
		computed: {},
		created() {
		},
		mounted() {},
		methods: {
      getTelop(valIndex){
        this.valIndex=valIndex
        if(this.valIndex==='top1'){
          this.top_type1 = 0
          if(this.top_type === 0){
            this.top_type = 1
            this.visible=true
          }else{
            this.top_type = 0
            this.visible=false
          }
        }else if(this.valIndex==='top2'){
          this.top_type = 0
          if(this.top_type1 === 0){
            this.top_type1 = 1
            this.visible=true
          }else{
            this.top_type1 = 0
            this.visible=false
          }   
          
        }
      },
		}
	}
</script>
<style lang="scss" scoped>
::v-deep .el-popover {
  margin-left:-195px;
  bottom: 25%;
}
.weTel{
  z-index:9999;
  position: fixed;
  right: 0;
  top: 30%;
  width: 120px;
  border-radius: 20px;
  text-align: center;
  .cents{
    padding-left:18%;
    .isp{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      line-height: 53px;
      margin-bottom:10px;
      border: 2px solid #FFFFFF;
      text-align: center;
      img{
       width: 20px;
       height: 20px;
      }
    }
    .top{  
      background: #FBFBFB;
      box-shadow: -1px 0px 16px 0px rgba(193, 201, 218, 0.07);
    }
    .topAvtive{
      background: linear-gradient(-90deg, #5E90FF, #1B61FD);
      box-shadow: 0px 1px 16px 0px rgba(193, 201, 218, 0.07);
    }
  }
  .title{
    height: 45px;
    font-size: 14px;
    color: #454C5D;
    .tel{
     font-weight: bold;
     color: #4285F4;
     line-height: 26px; 
    }
  }
  .code{
    text-align: center;
    img{
      width: 98px;
      height: 98px;
    }
    .codText{
      font-size: 14px;
      color: #454C5D;
    }
  }
}

</style>

代码他有些重复，可以自己简洁一点，如图

最后还要加 移除事件 @mouseleave ，方法在这里省略，这个一定要加，不然会出现错误