代码拉取完成,页面将自动刷新
同步操作将从 13434979720/vue-mb-touch 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
vue-mb-touch 是一个vue的移动端的事件项目,内置了点击(press)事件,长按(press)事件
demo 后面会抽空写出来
npm install vue-mb-touch
<template>
<div v-touch.press.tap @tap="tap" @press="press">
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch);
@Component
export default class Home extends Vue {
public tap() {
/** tap */
}
public press(e: Event) {
/** press */
}
public data() {
return {
};
}
}
</script>
开启代理模式
<template>
<ul v-touch.proxy @tap="tap($event)" >
<li data-proxy data-index="1"></li>
<li data-proxy data-index="2"></li>
<li data-proxy data-index="3"></li>
</ul>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch);
@Component
export default class Home extends Vue {
public tap(e: event) {
const currentTarget = e.currentTarget as HTMLElement;
console.log(currentTarget.tagName.toLowerCase()); // li
console.log(JSON.stringify(currentTarget.dataset)); // {proxy: "", index: "1"}
}
public data() {
return {
};
}
}
</script>
在引入 vue-mb-touch 时,可以传入一个全局配置对象。该对象目前支持 maxDistance 与 pressTime, maxDistance 用于手指在屏幕上移动多长距离内可触发事件默认10,pressTime 用于手机按住屏幕多长时间触发长按事件,默认650。具体操作如下:
import Vue from 'vue';
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch, {maxDistance: 10,pressTime: 650});
参数名 | 描述 |
---|---|
tap | 是否开启tap事件,默认不开启,但是在tap和press都不开启时,则自动开启 |
press | 是否开启press事件,默认不开启 |
stop | 是否阻止事件冒泡,默认不阻止 |
prevent | 是否阻止游览器默认行为,默认不阻止 |
passive | 是否为passive监听器,如果有该参数,则阻止游览器默认行为无效 |
capture | 是否为捕获监听器,默认不是 |
proxy | 是否开启事件代理模式,默认不开启, 开启后台 在需要触发事件的目标元素上添加 data-proxy 即可 |
如果是在vue封装的组件上使用 v-touch 指令, 在监听事件时,需要加上 native 参数
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。