Benutzerdefinierte Vue-Anweisungen implementieren das V-Tap-Plug-In

vue-touch basiert auf einem Hammer, der für normale einfache Gestenseiten zu groß ist!

Deshalb wollte ich selbst eine der am häufigsten verwendeten Gestentipps implementieren. Den benutzerdefinierten Anweisungen und der Plug-In-Dokumentation folgend, habe ich gestern Abend eine V-Tap-Anweisung implementiert und diesen Artikel veröffentlicht.

Einführung in Anweisungen und Plug-Ins
Benutzerdefinierte Anweisungen und Plug-Ins werden auch in der offiziellen Dokumentation auf relativ einfache und detaillierte Weise vorgestellt, sodass ich sie nicht im Detail vorstellen werde.
Lassen Sie mich zunächst sagen, dass dieses Plug-in drei APIs verwendet. Wenn Sie diese nicht verstehen, lesen Sie am besten die Dokumentation im Voraus, um Verwirrung im nachfolgenden Code zu vermeiden.

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

Plug-in-Teil
Vue.use()

Dann müssen wir das Format zum Schreiben von Vue-Plug-Ins lernen, genau wie das Schreiben von jQuery-Plug-Ins.

Weiter zum offiziellen Dokument

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

Verstehen Sie das nicht? Dann können wir uns direkt den Plug-in-Code des Autors ansehen.

;(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)
 }
 
})()

Ich habe den gesamten überflüssigen irrelevanten Code gelöscht und festgestellt, dass das Format tatsächlich so ist. Der Rest besteht darin, unsere eigenen js-Fähigkeiten zu verwenden, um ihn zu schreiben direkt.
PS: Bezüglich des Attributs „isFn:true“ habe ich im Dokument keine relevanten Informationen gefunden. Ich persönlich denke, dass es sich möglicherweise um einen Kommentar handelt, der darauf hinweist, dass diese Anweisung einen Ausdruck von fn erfordert (dies ist der Ausdruck der Anweisung). Weitere Informationen finden Sie im Anweisungsbeispiel.) Eigenschaft).

Mach es einfach

Schreiben Sie zunächst die äußere Ebene entsprechend dem Plug-in-Format.

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

Dann schreiben Sie unsere eigenen benutzerdefinierten Anweisungen in unserem vueTap.install

Vue.directive('tap', {
  isFn : true,
  bind : function() {
 
  },
  update : function(fn) {
 
  },
  unbind : function() {},
  isTap : function() {
   //判断是否为tap
  },
  touchstart : function(e,self) {
 
  },
  touchend : function(e,self) {
 
  }
 });
};

Da nur update Parameter zum Übergeben hat und unseren Ausdruck empfangen kann, habe ich den Ereignisbindungsprozess in update geschrieben.

PS: Natürlich möchten einige Freunde diesem alle Fn zuweisen (dies ist hier eine direkte Instanz) und das Ereignis schließlich am Bindungsort binden. Ich habe den Standard dafür nicht gefunden und weiß nicht, welcher besser zu schreiben ist.

update : function(fn) {
 var self = this; //存下this，方便以后用
  //在directive上绑定的属性和方法
  //都可通过self.xxx self.touchstart()获取
  self.tapObj = {}; //初始化我们的tap对象
 
 if(typeof fn !== 'function') {
 //你别给我搞事！
  return console.error('The param of directive "v-tap" must be a function!');
 }
 
 self.handler = function(e) { //给当前directive存个handler方便之后调用
  e.tapObj = self.tapObj;
  //把我们的tap对象赋值给原生event对象上，方便回调里获取参数
  fn.call(self,e);
 };
 
 //把我们的start和end剥离出来，写在directive上
 //由于只有tap事件，所以我们在move过程就不需要做处理
 this.el.addEventListener('touchstart',function(e) {
  self.touchstart(e,self);
 },false);
 
 this.el.addEventListener('touchend',function(e) {
  self.touchend(e,self,fn);
 },false);
 
}

Das Update ist sehr einfach und umfasst den Prozess der Initialisierung, der Ereignisbindung und der Zuweisung von Werten zu Instanzen.
Der letzte Schritt ist die logische Verarbeitung von isTap, touchstart und touchend.

isTap : function() {
 var tapObj = this.tapObj;
 return this.time < 150 && 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);
}

Schließlich stellt sich die große Frage: Wie können wir dafür sorgen, dass unser Ausdruck Parameter akzeptiert?

<ul>
 <li v-for="el in list"
  v-tap="args($index,el,$event)"
   >
  {{el.name}}---{{el.age}}
 </li>
</ul>

Dann müssen wir unserer Direktive ein Attribut „acceptStatement:true“ hinzufügen (Einzelheiten finden Sie im Dokument „acceptStatement“)

Zusammenfassung
Ich habe dieses V-Tap-Plugin geschrieben, um einige Erfahrungen mit Ihnen zu teilen.
1. Dies in update verweist auf die Direktiveninstanz, nicht auf vm, noch auf dom
2 Anpassbare Attribute und Methoden können im Direktivenobjekt ('name', {}) verwendet werden. Der Aufruf lautet self.xxx
3. Aktivieren Sie benutzerdefinierte Anweisungen, um Inline-Anweisungen zu akzeptieren. AcceptStatement:true
4 Vergessen Sie nicht die endgültige Schnittstelle Vue.use(obj)
Ich habe kein V-Tap .stop hier, v-tap.prevent, v-tap.stop.prevent führen die Verarbeitung durch, Sie können sie selbst implementieren! Auch ganz einfach.