Skip to content

Latest commit

 

History

History
76 lines (55 loc) · 2.86 KB

README.md

File metadata and controls

76 lines (55 loc) · 2.86 KB

vue-long-press

Vue long press directive plugin，一个 Vue 长按事件指令插件，长按时间隔默认800ms，可通过对象字面量参数配置

Fork from:https://github.com/huajianduzhuo/vueConfig/tree/master/plugins/LongTap

Use

main.js

import LongPress from '@/plugin/LongPress'

Vue.use(LongPress)

App.vue

<mu-container class="button-wrapper">
    <mu-button v-longpress="{handler: longpress,params:{token:'263499118'}}" color="info">LongPress 1</mu-button>
    <mu-button v-longpress="()=>longpress({token:'263499118'})" color="success">LongPress 2</mu-button>
    <mu-button v-longpress="(event,el,vNode)=>longpress2(event,el,vNode,{token:'263499118'})" color="warning">LongPress 3</mu-button>
    
    // 不能用以下方式绑定方法
    // <mu-button v-longpress="longpress({token:'263499118'})" color="success">LongPress 4</mu-button>
</mu-container>
methods: {
    longpress(data) {
        console.log(data.token)
    },
    longpress2(event,el.vNode,data) {
        console.log(event)
        console.log(el)
        console.log(vNode)
        console.log(data.token)
    }
}

对象字面量配置参数

使用对象字面量方式绑定长按事件，可以配置一些参数

参数 类型 是否必需 默认值 说明
handler 函数 是 无 长按事件回调函数
time integer 否 800 单位：ms，长按间隔时间，必须超过 500ms
disX number 否 10 单位：px，判断手指是否移动了的间隔，若为负数，则允许 X 方向上的移动
disY number 否 10 单位：px，判断手指是否移动了的间隔，若为负数，则允许 Y 方向上的移动
params any 否 无 长按事件回调函数

长按回调函数参数（没有配置 params 时）

参数 类型 说明
event Event
el DOM元素 触发长按事件的元素
vNode vNode 触发长按事件的虚拟节点

长按回调函数参数（配置 params 时）

参数 类型 说明
params any 对象字面量配置的参数

长按时元素样式

长按元素时，可以为该元素添加激活时的样式，只需要添加一个全局的样式 longtap-active 即可，若有与元素本身的样式重复的，应添加 !important。

该样式在点击时也会应用。

demo