vue修饰符

事件修饰符:

  • .stop

阻止事件冒泡

  • .prevent

阻止默认事件

  • .capture

事件捕获

  • .self

将事件绑定到自身

  • .once

只会触发一次

例:解决弹窗touch滚动body问题
//弹窗遮罩层
//弹窗内容层
//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

你可能感兴趣的:(vue修饰符)