preface

H5 provides touch event for mobile terminal interaction, but touch event is invalid on PC. On PC, mouse event can be used to achieve the same effect, you can determine whether to switch the corresponding event for mobile terminal when using. The disadvantages of this writing need not be said to be not elegant and not easy to use

Vue provides many instructions to facilitate our development – such as V-for V-if V-bind… etc

There are also custom directives provided for us to implement what we want

With directives we can add touch events to elements when they are rendered, and determine and bind events inside the directive

The implementation process

Define a local directive move, bind for the rendered hook function el for the bound element binding can be interpreted as the parameter passed in

<! -- Use in template with v --><div class="container" v-move="{start,move,end}"></div>  
Copy the code
export default {
 directives: {
  move: {
            bind: (el, binding) = > {
    / * ** Determine whether it is PC or mobile* Define different event names for different devices* /  const isMobile =  navigator.userAgent.match(  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i )! = =null  const [start, move, end] = isMobile  ? ['touchstart'.'touchmove'.'touchend']  : ['mousedown'.'mousemove'.'mouseup']  / * ** Start touching* Execute the touch callback function* Listen for sliding events* Listen for touch-end events* Listener prevents mobile screen movement events* /  const startFun = e= > {  binding.value.start(e)  el.addEventListener(move, moveFun)  el.addEventListener(end, endFun)  window.addEventListener('touchmove', prevent, {  passive: false  })  }  / * ** Start sliding* Execute the sliding callback function* /  const moveFun = e= > {  binding.value.move(e)  }  / * ** End touch* Execute the end touch callback function* Destroy the slide event* Destroy ends touch event* Destroy prevents moving screen events* /  const endFun = e= > {  binding.value.end(e)  el.removeEventListener(move, moveFun)  el.removeEventListener(end, endFun)  window.removeEventListener('touchmove', prevent)  }  / * ** Block mobile screen movement* /  const prevent = e= > {  e.preventDefault()  }  / * ** Listen for touch events* /  el.addEventListener(start, startFun)  }  }  },  methods: {  / * *The event callback executes your code here* /  start: function(e) {  console.log(e)  },  move: function(e) {  console.log(e)  },  end: function(e) {  console.log(e)  }  } } Copy the code

Matters needing attention

  1. On the mobile end, there may be touch movement that triggers the screen movement at the same time, so the event that prevents the screen movement is used
  2. For performance optimization, only listen for start touch events at the beginning, then listen for other events at the beginning, and finally destroy those events at the end of the touch
  3. Cannot be accessed in custom instructionsthisSo the business logic is better written in the callback function

❝

Growing, and line and cherish

❞