12、vue手机端监听 上滑 下滑 左滑 右划

安装依赖：npm install vue-touch@next --save
//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

<template>
  <div class="hello">
            <v-touch 
                @swipeup="swiperup" 
                @swipedown="swiperdown" 
                @swipeleft="swiperleft" 
                @swiperight="swiperright">
              <div class="menu-container">    
                      判断滑动区域，需要包裹在   v-touch标签里面
              </div>
              </v-touch>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name:"开始"
    }
  },
  methods: {
      swiperup: function () {
             console.log("上划")
             alert("上划")
            },
            swiperdown: function () {
             console.log("下滑")
             alert("下滑")
            },
            swiperleft: function () {
             console.log("左滑")
             alert("左滑")
            },
            swiperright: function () {
             console.log("右滑")
             alert("右滑")
            }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.menu-container{
    width: 100%;
    height: 100px;
    background: red;
}
</style>