四十五、vue进阶之手势事件

vue touch网站：https://github.com/vuejs/vue-touch/tree/next

（1）安装

npm install --save vue-touch@next

（2）使用

 

<template>
    <div>
      <v-touch v-on:swipeleft="onSwipeLeft">
        <!-- 手势作用区域demo。onSwipeLeft是自己定义的方法 -->
        <div style="background:pink;height:100px">
          左滑
        </div>
      </v-touch>

      <v-touch v-on:swiperight="onSwipeRight">
        <!-- 手势作用区域demo。onSwipeLeft是自己定义的方法 -->
        <div style="background:gray;height:100px">
          右滑
        </div>
      </v-touch>

      <v-touch v-on:swiperight="onSwipeRight" v-on:swipeleft="onSwipeLeft">
        <!-- 手势作用区域demo。onSwipeLeft是自己定义的方法 -->
        <div style="background:black;height:100px;color:white">
          即能左滑又能右滑
        </div>
      </v-touch>
        
         
    </div>
</template>