Vueモバイル端末が指のスライド効果を実現

<テンプレート lang="html">
  <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove">
    <div class="back-r" 
 @touchstart.prevent="タッチ開始" @touchmove.prevent="タッチ移動"
 @touchend="タッチ終了"
 ref="右"></div>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ（） {
  },
  作成された() {
    this.touch = {}
  },
  メソッド: {
    タッチスタート(e) {
      定数touch = e.touches[0]
   
  //クリック時の位置 this.touch.startX = touch.pageX
      this.touch.startY = touch.pageY
   console.log('----',this.$refs.right.clientWidth)
    },
//クリックを開始するtouchMove(e) {
      console.log("移動");
      定数touch = e.touches[0]
   //スライド位置と初期位置の差 const deltaX = touch.pageX - this.touch.startX
   コンソールログ(デルタX)
      定数 deltaY = touch.pageY - this.touch.startY;
      //右幅を印刷 console.log('----',this.$refs.right.clientWidth+'px') 
   const rwidth = this.$refs.right.clientWidth
   //右の幅を変更します this.$refs.right.style.width = (this.$refs.right.clientWidth + Math.floor(deltaX/50)) +'px'
   //幅が0未満か400より大きいかを判断する
   rwidth<0の場合{
    this.$refs.right.style.width = 0
   } そうでない場合(rwidth>400){
    this.$refs.right.style.width = 400+'px'
   } 
   console.log('----',this.$refs.right.clientWidth+'px')

    },
    タッチ終了() {
      console.log("終了");
      // console.log(this.percent);
    }
  }
}
</スクリプト>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
体{
  マージン:0;
  パディング: 0;
  オーバーフロー: 非表示;
  タッチアクション:なし;
}
。戻る{
 幅: 100%
 高さ: 100ピクセル
 境界線 10px 実線 #0000FF
 オーバーフロー: 非表示;
}
  
  
  .back-r{
   // 表示: インラインブロック
   // 垂直位置合わせ: 上
   位置: 相対
   幅: 400ピクセル
   高さ: 100%
   オーバーフロー: 非表示;
   背景色: 黄色
  }
    
</スタイル>