cct-touch
v1.0.7
Published
touch移动端触摸事件
Downloads
22
Maintainers
Readme
cct-touch 移动端touch事件/vue事件指令
- 该项目导出两个模块一个是Touch类一个是vueTouch对象
- Touch类是纯原生的事件类,它与技术框架没有关联完全独立,这是非常重要的,它将不限制框架,无论vue还是react或者原生的都可以使用
- vueTouch对象主要是给vue使用的,按需加载,然后绑定全局的v-touch指令
- 如果你用的是react也可以参考vueTouch写一个可以植入react的代码
安装
// npm
npm install --save cct-touch
// cnpm
cnpm install --save cct-touch
// yarn
yarn add cct-touch
支持的事件类型
- tap
- longtap
- start(touchstart)
- end(touchend)
- move(touchmove)
- cancel(touchcancel)
Touch类使用示例
import {Touch} from 'cct-touch';
const element = document.body;
//为元素初始化touch对象,以下配置项的数值均为默认值
const obj = new Touch(
element,// 需要绑定事件的dom元素
{
tapTime: 30,// 触发tap事件的最小时间,即touchend-touchstart执行的时间
longtapTime: 400,//触发longtap事件的最小时间,注意若触发了longtap则不会触发tap
moveTolerance: 20,// 触摸时允许移动的误差范围,tap longtap时如果移动移动范围走过这个值则不会触发这些事件,因为可能是想滑动,同时hoverClass也会判断这个移动范围,超出范围也不会添加hoverClass
hoverTime: 60,// hover模拟触发的最小时间,当触摸开始后延迟60毫秒判断是否添加hoverClass
hoverClass: '',//触发hover时添加的类名
});
// 绑定事件,第二个参数为可选参数
obj.tap(function(event){
// TODO
},{
self:false,// 是否仅当前元素触发事件
stop:false,// 是否阻止冒泡
prevent:false//是否阻止默认行为
});
vueTouch使用示例
使用了vueTouch后将绑定v-touch指令与v-touch-class指令
import Vue from 'vue';
import {vueTouch} from 'cct-touch';
// 绑定指令时的配置为全局配置,仅hoverClass可以通过v-touch-class为元素单独设置
Vue.use(vueTouch,{
tapTime: 30,
longtapTime: 400,
moveTolerance: 20,
hoverTime: 60,
hoverClass: '',
})
v-touch指令绑定事件
v-touch指令支持.stop .self .prevent等修饰符
示例:
<button v-touch:tap="callback">tap</button>
<button v-touch:longtap="callback">longtap</button>
<button v-touch:tap.self.stop="callback">self stop</button>
<button v-touch:start="callback">touchstart</button>
<button v-touch:end="callback">touchend</button>
<button v-touch:cancel="callback">touchcancel</button>
<button v-touch:move="callback">touchmove</button>
v-touch-class指令 设置hover效果
v-touch-class用于指定模拟hover效果时添加的hoverClass类名
可以使用全局配置也可以通过该指定对指定的元素设置指定的hoverClass
示例:
<button v-touch-class="test">hover</button>