网站访问流量怎么赚钱,wordpress 数据库 utf8,广告设计公司改建项目,高端网站建设 aspx讲述一下事件穿透的需求#xff0c;大家可以根据实际情况来考虑是否采用这种方式来制作页面#xff0c;#xff08;项目中遇到了底部是地图#xff0c;两侧面板#xff0c;但是UI在设计的时候为了好看#xff0c;会有很大的遮罩阴影部分#xff0c;如果按照时间制作会导…讲述一下事件穿透的需求大家可以根据实际情况来考虑是否采用这种方式来制作页面项目中遇到了底部是地图两侧面板但是UI在设计的时候为了好看会有很大的遮罩阴影部分如果按照时间制作会导致地图可点击的区域变得很小这个时候就考虑了使用事件穿透即按照效果图还原了页面也不影响地图操作我们来看案例
按图上样式来组件化每次我们只需管左右两侧的内容就可以了
templatediv classbodyheader classanimated fadeInDown 头部 /headerarticlediv classleftMaindiv clickhandleModelslot nameleft/slot/div/divdiv classcenterMainslot namecenter/slot/divdiv classrightMaindiv clickhandleModelslot nameright/slot/div/div/articlefooter classanimated fadeInUp底部/footer/div
/templatescript
export default {data() {return {}},methods: {handleModel() {console.log(点击左右两侧模版不触发地图事件)}}
}
/scriptstyle 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
使用组件
templatepanel-model classdemo6template #left测试ui设计地图上面会加遮罩不影响地图操作变成小手说明是可以操作地图/templatetemplate #centerdiv classgis idmap clickmapHandle放置地图/div/templatetemplate #right/template/panel-model
/templatescript
import panelModel from ./common/panelModel.vue;
export default {components: {panelModel,},data() {return {}},methods: {mapHandle() {console.log(点击地图)}}
}
/scriptstyle scoped
.gis {width: 100%;height: 100%;cursor: pointer;
}
/style
完成具体效果可以拿到自己项目中去实验一下通过点击事件的操作来观察具体细节
