美文网首页
vue修饰符

vue修饰符

作者: coder丶L | 来源:发表于2019-09-27 10:55 被阅读0次

事件修饰符:

  • .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

相关文章

  • 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前...

  • 2018-10-11

    vue 修饰符sync【 vue sync修饰符示例】 先看下一个参考的文章:深入理解vue 修饰符sync【 v...

  • Vue事件修饰符

    Vue 事件修饰符 事件修饰符结合使用

  • vue中的修饰符

    事件修饰符 使用vue,让代码中只有纯粹的数据逻辑,而不是去处理DOM事件细节。 ---事件修饰符vue事件修饰符...

  • 2020-12-29

    Vue修饰符和事件 Vue修饰符:用来修饰事件的操作例如: 代码举例:阻止默认动作 1、v-on和其他支持的修饰符...

  • Vue面试考点准备03

    1、Vue中的修饰符有哪些? 修饰符是用于限定类型以及类型成员的声明的一种符号。Vue中修饰符分为如下五种:表单修...

  • Vue事件修饰符详解

    Vue事件修饰符详解(转) 整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,...

  • 在vue中使用.stop阻止单击事件继续传播

    一、vue的事件修饰符 为了不在方法中处理DOM事件细节,vue中提供6个事件修饰符。分别是: .stop .pr...

  • 31.Vue v-model 修饰符

    与 Vue事件修饰符 类似,v-model也有修饰符,用于控制数据同步。 案例

  • Vue-day3

    Vue常用指令 修饰符 表单修饰符 v-model.lazy:change事件,失去焦点才改变.number ①限...

网友评论

      本文标题:vue修饰符

      本文链接:https://www.haomeiwen.com/subject/xdnhyctx.html