Das mobile Vue-Terminal realisiert den Finger-Gleiteffekt

<template lang="html">
  <div class="zurück" ref="zurück" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove">
    <div Klasse="zurück-r" 
 @touchstart.prevent="touchStarten" @touchmove.prevent="touchBewegen"
 @touchend="BerührungEnde"
 ref="rechts"></div>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() {
  },
  erstellt() {
    dies.berühren = {}
  },
  Methoden: {
    touchStart(e) {
      const touch = e.touches[0]
   
  //Die Position beim Klicken auf this.touch.startX = touch.pageX
      dies.touch.startY = touch.pageY
   Konsole.log('----',this.$refs.right.clientWidth)
    },
//Starten Sie den Klick touchMove(e) {
      console.log("verschieben");
      const touch = e.touches[0]
   //Die Differenz zwischen der Gleitposition und der Ausgangsposition const deltaX = touch.pageX - this.touch.startX
   console.log(deltaX)
      const deltaY = touch.pageY - this.touch.startY;
      //Rechte Breite drucken console.log('----',this.$refs.right.clientWidth+'px') 
   const rwidth = this.$refs.right.clientWidth
   //Ändern Sie die Breite rechts this.$refs.right.style.width = (this.$refs.right.clientWidth + Math.floor(deltaX/50)) +'px'
   //Beurteilen Sie, ob die Breite kleiner als 0 oder größer als 400 ist
   wenn (rwidth<0) {
    dies.$refs.right.style.width = 0
   } sonst wenn(rwidth>400){
    dies.$refs.right.style.width = 400+'px'
   } 
   Konsole.log('----',this.$refs.right.clientWidth+'px')

    },
    touchEnd() {
      console.log("Ende");
      // konsole.log(dieses.Prozent);
    }
  }
}
</Skript>
 
<style scoped lang="Stift" rel="stylesheet/Stift">
Körper{
  Rand: 0;
  Polsterung: 0;
  Überlauf: versteckt;
  Berührungsaktion: keine;
}
.zurück{
 Breite: 100%
 Höhe: 100px
 Rand 10px durchgezogen #0000FF
 Überlauf: versteckt;
}
  
  
  .zurück-r{
   // Anzeige: Inline-Block
   // vertikale Ausrichtung: oben
   Position: relativ
   Breite: 400px
   Höhe: 100%
   Überlauf: versteckt;
   Hintergrundfarbe: gelb
  }
    
</Stil>