Vue @click.stop 与 @mousewheel.prevent

it2024-03-15  55


mixins的使用


@click.stop 点击子标签不需要触发父标签的事件

<div @click="tempClick"> <div @click.stop="subTempClick"></div> </div>

盖上遮罩之后不需要下面内容支持滚动

@mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件 <div class="mask"></div> <div class="content" @mousewheel.prevent> <div class="sub"></div> </div>

同时还可以使用 js 来完成

handlePrimaryClick () { this.isShowMask = true let el = document.getElementsByTagName('body')[0] el.style.overflow = (this.isShowMask ? "hidden" : "scroll") }

给 body 的 overflow 设置 “hidden” || “scroll” 。

最新回复(0)