vue中怎么用AlloyFinger？

Question

vue里面如何引入触屏的AlloyFinger啊，看了官方的也不会弄，有报错，下面是我的代码：

// main.js
import Vue from 'vue'
import App from './App'
// 下面两种都试了，都报错
// import AlloyFingerVue from 'AlloyFinger'
// Vue.use(AlloyFingerVue)
import AlloyFinger from 'AlloyFinger'
Vue.use(AlloyFinger)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

报错信息

Answer 1

不是给你用法了吗

Vue.use(AlloyFingerVue); // use AlloyFinger's plugin

var h = new Vue({
    el: '#cnt',
    methods: {
        tap: function() { console.log('onTap'); },
        multipointStart: function() { console.log('onMultipointStart'); },
        longTap: function() { console.log('onLongTap'); },
        swipe: function(evt) {
            console.log("swipe" + evt.direction);
            console.log('onSwipe');
        },
        pinch: function(evt) { 
            console.log(evt.scale);
            console.log('onPinch'); 
        },
        rotate: function(evt) {
            console.log(evt.angle);
            console.log('onRotate'); 
        },
        pressMove: function(evt) { 
            console.log(evt.deltaX);
            console.log(evt.deltaY);
            console.log('onPressMove'); 
        },
        multipointEnd: function() { console.log('onMultipointEnd'); },
        doubleTap: function() { console.log('onDoubleTap'); },
        singleTap: function () { console.log('onSingleTap'); },

        touchStart: function() { console.log('onTouchStart'); },
        touchMove: function() { console.log('onTouchMove'); },
        touchEnd: function() { console.log('onTouchEnd'); },
        touchCancel: function() { console.log('onTouchCancel'); }
    }
});

你还需要创建一个 vue 实例，

Answer 2

/* eslint-disable no-unused-vars */
import AlloyFinger from 'alloyfinger/alloy_finger' // 手势库
import AlloyFingerVue from 'alloyfinger/vue/alloy_finger.vue'
Vue.use(AlloyFingerVue, {
  AlloyFinger
})

Answer 3

/*可以当插件使用 main.js*/
import AlloyFinger from 'alloyfinger'
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger.vue'
Vue.use(AlloyFingerPlugin,{
  AlloyFinger
})

/*.vue*/
<template>
    <div class="page-content" v-finger:swipe="swipeHandler">
      <transition name="fade">
        <router-view />
      </transition>
    </div>
</template>

finger是提供的插件里面提供的指令