vue-mb-touch

vue-mb-touch 是一個vue的移動端的事件項(xiàng)目,內(nèi)置了點(diǎn)擊(press)事件，長按(press)事件

安裝

npm install vue-mb-touch

使用方法

1. 安裝
2. 引入
3. 在需要監(jiān)聽tap或者press的元素上添加 v-touch 指令 ，后面就可以 像監(jiān)聽 click 事件 一樣 使用v-on:tap="fn"的方式監(jiān)聽tap和press事件了

示例

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


````
> 開啟代理模式


````vue

<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 時(shí)，可以傳入一個全局配置對象。該對象目前支持 maxDistance 與 pressTime， maxDistance 用于手指在屏幕上移動多長距離內(nèi)可觸發(fā)事件默認(rèn)10，pressTime 用于手機(jī)按住屏幕多長時(shí)間觸發(fā)長按事件,默認(rèn)650。具體操作如下：

import Vue from 'vue';
import vueMobileTouch from "vue-mb-touch";

Vue.use(vueMobileTouch, {maxDistance: 10,pressTime: 650});

指令參數(shù)

注意

如果是在vue封裝的組件上使用 v-touch 指令, 在監(jiān)聽事件時(shí)，需要加上 native 參數(shù)