事件穿透效果

讲述一下事件穿透的需求，大家可以根据实际情况来考虑是否采用这种方式来制作页面，（项目中遇到了底部是地图，两侧面板，但是UI在设计的时候为了好看，会有很大的遮罩阴影部分，如果按照时间制作会导致地图可点击的区域变得很小，这个时候就考虑了使用事件穿透，即按照效果图还原了页面，也不影响地图操作），我们来看案例

按图上样式来组件化，每次我们只需管左右两侧的内容就可以了

<template>
  <div class="body">
    <header class="animated fadeInDown"> 头部 </header>
    <article>
      <div class="leftMain">
        <div @click="handleModel">
          <slot name="left"></slot>
        </div>
      </div>
      <div class="centerMain">
        <slot name="center"></slot>
      </div>
      <div class="rightMain">
        <div @click="handleModel">
          <slot name="right"></slot>
        </div>
      </div>
    </article>
    <footer class="animated fadeInUp">底部</footer>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleModel() {
      console.log("点击左右两侧模版，不触发地图事件")
    }
  }
}
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  position: relative;
}
.body header,
.body footer {
  width: 100%;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 1;
}

.body header {
  height: 8vh;
  line-height: 8vh;
  top: 0;
  pointer-events: none; /* 事件穿透 */
}
.body header::before {
  content: "";
  position: relative;
}
.body footer {
  height: 2vh;
  line-height: 2vh;
  bottom: 0;
  pointer-events: none;
}
.body article {
  width: 100%;
  height: 100%;
  position: relative;
}
.body article .leftMain,
.body article .rightMain {
  width: 6rem;
  height: calc(100% - 10vh);
  position: absolute;
  top: 8vh; /* 8vh 是头部的高度 */
  background-color: rgba(137, 43, 226, 0.4);
  z-index: 1;
  pointer-events: none; /* 事件穿透 */
  display: flex;
}
.body article .rightMain {
  justify-content: flex-end;
}
.body article .leftMain > div,
.body article .rightMain > div {
  width: 4rem;
  height: 100%;
  pointer-events: auto; /* 禁止事件穿透 */
  color: #ffffff;
  background-color: rgba(43, 226, 58, 0.37);
}

.body article .leftMain {
  left: 0.1rem;
  animation: bounceLeft 1s;
}
@keyframes bounceLeft {
  0% {
    left: -4rem;
  }
  100% {
    left: 0.1rem;
  }
}

.body article .rightMain {
  right: 0.1rem;
  animation: bounceRight 1s;
}
@keyframes bounceRight {
  0% {
    right: -4rem;
  }
  100% {
    right: 0.1rem;
  }
}

.body article .centerMain {
  width: 100%;
  height: 100%;
  position: relative;
}
.cash {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
</style>

使用组件

<template>
  <panel-model class="demo6">
    <template #left>
        测试ui设计地图上面会加遮罩，不影响地图操作，变成小手说明是可以操作地图
    </template>
    <template #center>
      <div class="gis" id="map" @click="mapHandle">
        放置地图
      </div>

    </template>
    <template #right>

    </template>
  </panel-model>
</template>

<script>
import panelModel from "./common/panelModel.vue";
export default {
  components: {
    panelModel,

  },
  data() {
    return {

    }
  },
  methods: {
    mapHandle() {
      console.log("点击地图")
    }
  }
}
</script>

<style scoped>
.gis {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>

完成，具体效果可以拿到自己项目中去实验一下，通过点击事件的操作来观察具体细节！

事件穿透效果

悦读