vue修饰符

事件修饰符:

  • .stop

阻止事件冒泡

  • .prevent

阻止默认事件

  • .capture

事件捕获

  • .self

将事件绑定到自身

  • .once

只会触发一次

例:解决弹窗touch滚动body问题
//弹窗遮罩层
<div class="dialog" @touchstart.prevent="close()" @touchmove.prevent="">
//弹窗内容层
    <div class="box" @touchstart.stop=""></div>
</div>
//1、@touchstart.prevent="close()"关闭弹窗,此时触摸弹窗内容层也会导致弹窗关闭
//2、@touchstart.stop=""阻止冒泡,防止触摸时触发父级元素时间,但此时触摸移动内容层会导致body滚动
//3、@touchmove.prevent=""阻止默认事件,避免触摸移动时导致body滚动

此方法适用于弹窗内部无滚动区域的情况,如在弹窗内部存在滚动区域,须在滚动区域添加@touchmove.stop=""。此时,在ios系统中存在触摸滚动区域(内容没有超出滚动区时)会导致body滚动,暂未解决

按键修饰符:

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容