事件穿透效果

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

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

html 复制代码
<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>

使用组件

html 复制代码
<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>

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

相关推荐
兆。3 分钟前
掌握 PyQt5:从零开始的桌面应用开发
开发语言·爬虫·python·qt
尘浮生6 分钟前
Java项目实战II基于Spring Boot的光影视频平台(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·maven·intellij-idea
明月看潮生26 分钟前
青少年编程与数学 02-003 Go语言网络编程 15课题、Go语言URL编程
开发语言·网络·青少年编程·golang·编程与数学
南宫理的日知录37 分钟前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
逊嘘1 小时前
【Java语言】抽象类与接口
java·开发语言·jvm
Half-up1 小时前
C语言心型代码解析
c语言·开发语言
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome