vue自定義指令實現v tap外掛程式

2021-09-19 17:27:50 字數 2648 閱讀 2736

放棄jquery,擁抱mvvm，擁抱元件吧！

vue-touch基於hammer，對於普通簡單手勢的頁面來說過於龐大！

於是想自己實現乙個最常用的手勢tap。順著自定義指令和外掛程式文件，昨晚實現了乙個v-tap指令，丟出這篇乾貨。

自定義指令和外掛程式官方文件中也介紹比較簡單詳細，就不過多介紹。

我先說下本外掛程式就用了三個api，如果大家不了解最好先事先看下文件避免後面的**看的迷糊。

指令部分

外掛程式部分
接著我們需要像寫jquery外掛程式一樣學習寫vue外掛程式的格式。

繼續官方文件

myplugin.install = function (vue, options) )


// 3. 新增例項方法


vue.prototype.$mymethod = ...


}
是不是看的還不太明白？那我們可以直接看作者的外掛程式**。

;(function () 


vuetouch.install = function (vue) ,


update: function (fn) ,


unbind: function () 


})} if (typeof exports == "object") else if (typeof define == "function" && define.amd) )


} else if (window.vue) 


})()
我把多餘無關**都刪除了，可以發現其實格式就是如此，剩下的就是利用我們自己js的功底直接編寫即可。

ps：關於isfn:true這個屬性，我在文件中沒有查到相關資訊，個人認為可能是一種注釋,代表這個指令是需要fn的expression(這個是指令的表示式，詳見指令例項屬性)。

首先，按照外掛程式格式先寫好外層。

;(function() ;


vuetap.install = function(vue) ;


if (typeof exports == "object") else if (typeof define == "function" && define.amd) )


} else if (window.vue) 


})();
接著在我們的vuetap.install裡寫我們自己的自定義指令

vue.directive('tap', ,


update : function(fn) ,


unbind : function() {},


istap : function() ,


touchstart : function(e,self) ,


touchend : function(e,self) 


});};
由於只有update才有引數可傳，可以接收到我們expression，於是我把事件繫結處理過程都寫在了update裡。

ps: 當然也有小夥伴喜歡在這把fn都賦予在this(這裡的this是directve例項)上,最後在bind的地方繫結事件。這個我並沒有找到規範，還不知道寫哪比較好。

update : function(fn) ; //初始化我們的tap物件


if(typeof fn !== 'function') 


self.handler = function(e) ;


//把我們的start和end剝離出來，寫在directive上


//由於只有tap事件，所以我們在move過程就不需要做處理


this.el.addeventlistener('touchstart',function(e) ,false);


this.el.addeventlistener('touchend',function(e) ,false);


}
在update很簡單，就是一些初始化，事件繫結和給例項賦值的過程。

最後就是istap，touchstart，touchend的邏輯處理。

istap : function() ,


touchstart : function(e,self) ,


touchend : function(e,self)
最後有個大問題，如何能讓我們的expression可接受傳參？

那就要在我們的directive上加乙個屬性acceptstatement:true（詳見文件acceptstatement）

寫了這個v-tap外掛程式幾個心得分享給大家。

我這裡沒有對v-tap.stop， v-tap.prevent，v-tap.stop.prevent做處理，大家可以自己實現！也灰常簡單。

（我之後會對v-tap進行補充）

vue自定義指令實現v model

指令是vue中非常重要的內容，了解指令的用法可以更好的服務於業務場景，方便高效，本文主要介紹指令的基本概念和用法，簡單模擬v model實現的功能。除了內建指令，vue.js 也允許註冊自定義指令。自定義指令提供一種機制將資料的變化對映為 dom 行為。可以用vue.directive id,def...

Vue自定義指令

vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令，只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...