Vue custom instructions to implement V-TAP plug-in _javascript skills

Source: Internet
Author: User
Tags abs instance method

Give up jquery, Embrace MVVM, embrace components!

Vue-touch based on Hammer, for ordinary simple gestures of the page is too large!
So I want to realize one of the most commonly used gestures tap. Along with the custom instructions and plugin documentation, a V-TAP directive was implemented last night, and the dry goods were thrown out.

Introduction to instructions and Plug-ins
Custom directives and plug-ins the official document also describes the more simple and detailed, not too much introduction.
Let me first say that this plugin used three APIs, if you do not understand the best to first look at the document to avoid the following code to see the confused.

Instruction section
1.update (nval,oval)

Plug-in section
Vue.use ()

Then we need to learn the format of writing Vue plug-ins like the jquery plugin.

Continue the Official document

Myplugin.install = function (Vue, options) {
 //1. Add Global method or property
 Vue.myglobalmethod = ...
 2. Add Global resource
 vue.directive (' My-directive ', {})
 //3. Add instance method
 vue.prototype. $myMethod = ...

Do you not know what you're looking at? Then we can look directly at the author's plug-in code.

;(function () {

 var vuetouch = {}

 vuetouch.install = function (Vue) {

 vue.directive (' Touch ', {

  isfn:true ,

  bind:function () {


  update:function (FN) {


  unbind:function () {


 if (typeof exports = = "Object") {
 module.exports = Vuetouch
 } else if (typeof Defi NE = = "function" && define.amd) {
 define ([], function () {return vuetouch})
 } else if (window. Vue) {
 window. Vuetouch = Vuetouch
 vue.use (vuetouch)

) ()

I have unnecessary extraneous code are deleted, you can find that the format is so, the rest is to use our own JS foundation of the direct writing can.
PS: About isfn:true This attribute, I did not find the relevant information in the document, personally think that may be a note, representing this directive is the need for FN expression (this is the instruction of the expression, see the instruction instance properties).

Just Do it

First, write the outer layer in the plug-in format.

;(function () {
 var vuetap = {};
 Vuetap.install = function (Vue) {


 if (typeof exports = = "Object") {
  module.exports = Vuetap;
 } else if (typeof define = "function" && defin E.AMD) {
  define ([], function () {return vuetap})
 } else if (window. Vue) {
  Window.vuetap = Vuetap;
  Vue.use (VUETAP);

) ();

And then write our own custom instructions in our vuetap.install .

Vue.directive (' tap ', {
  bind:function () {

  update:function (FN) {

  , Unbind:function () {},
  istap:function () {
   //judgment is tap
  touchstart:function (e,self) {

  },< C27/>touchend:function (e,self) {


Since only update has parameters to pass, we can receive expression, so I have the event binding process written in the update.

PS: Of course, there are small partners like to give the FN in this (here is the directve instance), and finally bind the event in bind place. I did not find the specification, I do not know what to write better.

Update:function (FN) {
 var self = this;//save this to facilitate future use
  //directive binding properties and methods
  //All through SELF.XXX Self.touchstart () gets
  self.tapobj = {};//Initializes our Tap object

 if (typeof fn!== ' function ') {
 //You Don't mess with me! return
  console.error (' The param of Directive "V-TAP" must to be a function! ');

 Self.handler = function (e) {///directive save a handler convenient after the current to call
  e.tapobj = self.tapobj; 
  We assign the tap object to the original event object to facilitate the retrieval of the parameter (self,e) in the callback;

 Peel our start and end out, write on directive
 //As there is only tap event, so we don't need to deal with the move process
 this.el.addEventListener (' Touchstart ', function (e) {
  self.touchstart (e,self);

 This.el.addEventListener (' Touchend ', function (e) {
  self.touchend (E,SELF,FN);


In the update is very simple, is some initialization, event binding and the process of assigning values to the instance.
Finally, it is the istap,touchstart,touchend logic processing.

Istap:function () {
 var tapobj = this.tapobj;
 Return This.time < && math.abs (Tapobj.distancex) < 2 && Math.Abs (Tapobj.distancey) < 2;
touchstart:function (e,self) {
 var touches = e.touches[0];
 var tapobj = self.tapobj;
 Tapobj.pagex = Touches.pagex;
 Tapobj.pagey = Touches.pagey;
 Tapobj.clientx = Touches.clientx;
 Tapobj.clienty = Touches.clienty;
 Self.time = +new Date ();
touchend:function (e,self) {
 var touches = e.changedtouches[0];
 var tapobj = self.tapobj;
 Self.time = +new Date ()-self.time;
 Tapobj.distancex = Tapobj.pagex-touches.pagex;
 Tapobj.distancey = Tapobj.pagey-touches.pagey;

 if (Self.istap (tapobj))
  Self.handler (e);

Finally, there is a big question, how can we make our expression acceptable?

 <li v-for= "El in List"
  v-tap= "args ($index, El, $event)"
  {{}}}---{{ El.age}}

That's going to add a property to our directive Acceptstatement:true (see document Acceptstatement)

wrote this V-tap plugin a few tips to share with you.
1. In update, this point is directive instance, not VM, nor DOM
2. You can customize properties and methods in the directive (' name ', {}) object. Call is
3. Open the custom command to accept the inline statement acceptstatement:true
4. Final interface Don't forget Vue.use (obj)
I do not have to v-tap.stop, v-tap.prevent,v-tap.stop.prevent do processing, we can achieve their own! Also ash is often simple.
(I'll add to V-tap later)

Finally threw out GitHub address: Https://

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.