美文网首页
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修饰符

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