vue自定义指令实现v-tap插件(1/3)

本篇文章主要介绍了"vue自定义指令实现v-tap插件"，主要涉及到心得分享,github方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 前言放弃jQuery,拥抱MVVM，拥抱组件吧！vue-touch基于hammer，对于普通简单手势的页面来说过于庞大！于是想自己实现一个最常用的手势tap。顺...

前言

放弃jQuery,拥抱MVVM，拥抱组件吧！

vue-touch基于hammer，对于普通简单手势的页面来说过于庞大！

于是想自己实现一个最常用的手势tap。顺着自定义指令和插件文档，昨晚实现了一个v-tap指令，丢出这篇干货。

指令与插件介绍

自定义指令和插件官方文档中也介绍比较简单详细，就不过多介绍。

我先说下本插件就用了三个API，如果大家不了解最好先事先看下文档避免后面的代码看的迷糊。

指令部分

• 1.update(nVal,oVal)
• 2.acceptStatement

插件部分

• Vue.use()

接着我们需要像写jQuery插件一样学习写Vue插件的格式。

继续官方文档

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = ...
  // 2. 添加全局资源
  Vue.directive('my-directive', {})
  // 3. 添加实例方法
  Vue.prototype.$myMethod = ...
}

是不是看的还不太明白？那我们可以直接看作者的插件代码。

;(function () {

  var vueTouch = {}

  vueTouch.install = function (Vue) {

    Vue.directive('touch', {

      isFn: true,
      acceptStatement: true,

      bind: function () {

      },

      update: function (fn) {

      },

      unbind: function () {

      }
    })
  }

  if (typeof exports == "object") {
    module.exports = vueTouch
  } else if (typeof define == "function" && define.amd) {
    define([], function(){ return vueTouch })
  } else if (window.Vue) {
    window.VueTouch = vueTouch
    Vue.use(vueTouch)
  }

})()

我把多余无关代码都删除了，可以发现其实格式就是如此，剩下的就是利用我们自己js的功底直接编写即可。

PS：关于 isFn:true 这个属性，我在文档中没有查到相关信息，个人认为可能是一种注释,代表这个指令是需要fn的expression(这个是指令的表达式，详见指令实例属性)。

Just do it

首先，按照插件格式先写好外层。