vue 사용자 정의 지침은 v-tap 플러그인을 구현합니다.

vue-touch는 해머 기반이므로 일반적인 간단한 제스처 페이지에는 너무 큽니다!

그래서 가장 많이 사용되는 제스처 탭 중 하나를 직접 구현해보고 싶었습니다. 사용자 정의 지침과 플러그인 문서에 따라 어젯밤에 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 표현이 필요함을 나타내는 주석일 수 있다고 생각합니다(이것은 명령어의 표현입니다. , 자세한 내용은 명령 예를 참조하십시오) 속성).

그냥 하세요

먼저 플러그인 형식에 맞게 외부 레이어를 작성합니다.

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

그런 다음 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) {
 
  }
 });
};

업데이트만 전달할 매개변수가 있고 표현식을 받을 수 있으므로 업데이트에 이벤트 바인딩 프로세스를 작성했습니다.

PS: 물론 일부 친구는 여기에 모든 fn을 할당하고(여기서는 directve 인스턴스임) 마지막으로 바인드 위치에서 이벤트를 바인딩하는 것을 좋아합니다. 이에 대한 기준을 찾지 못했고, 어떤 것을 쓰는 것이 좋은지 모르겠습니다.

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

업데이트는 초기화, 이벤트 바인딩, 인스턴스에 값 할당 등의 과정이 매우 간단합니다.
마지막 단계는 isTap, touchstart, 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);
}

마지막으로 큰 질문이 있습니다. 표현식에서 매개변수를 허용하려면 어떻게 해야 할까요?

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

그런 다음 지시어에 acceptStatement:true 속성을 추가해야 합니다(자세한 내용은 acceptStatement 문서 참조)

요약
몇 가지 경험을 여러분과 공유하기 위해 이 v-tap 플러그인을 작성했습니다.
1. 업데이트에서는 vm이나 dom이 아닌 지시문 인스턴스를 가리킵니다.
2. directive('name',{}) 객체에서 사용자 지정 가능한 특성과 메서드를 사용할 수 있습니다. 호출은 self.xxx입니다
3. 인라인 문을 허용하도록 사용자 정의 지침을 활성화합니다. acceptStatement:true
4. 최종 인터페이스 Vue.use(obj)를 잊지 마세요
v-tap이 없습니다. .stop here , v-tap.prevent, v-tap.stop.prevent가 처리를 수행하므로 직접 구현할 수 있습니다! 또한 매우 간단합니다.