事件穿透效果

讲述一下事件穿透的需求,大家可以根据实际情况来考虑是否采用这种方式来制作页面,(项目中遇到了底部是地图,两侧面板,但是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>

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

相关推荐
袁煦丞17 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆18 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记29 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆29 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360229 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军30 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句32 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜33 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI33 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课34 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试