Vue左滑组件slider使用详解

<template>
 <div class="ths_slider" ref="slider">
 <div class="main"
  @touchstart="touchstart"
  @touchmove="touchmove"
  @touchend="touchend">
  <slot name="main"></slot>
 </div>
 <div class="right" ref="right">
  <slot name="right"></slot>
 </div>
 </div>
</template>

mounted () {
 this.pageWidth = document.documentElement.clientWidth
 this.sliderEle = this.isMainSlide ? this.$refs.slider : this.$refs.right
}

touchstart (e) {
 this.originalPos = e.touches[0].pageX
 const transform = this.sliderEle.style.transform
 this.originalLeft = Number(transform ? transform.split('(')[1].split('px')[0] : 0)
 this.oriRigWidth = this.originalLeft < 0 ? Number(this.$refs.right.style.width.split('px')[0]) : 0
},
touchmove (e) {
 let moveDistance = e.touches[0].pageX - this.originalPos // >0 右滑，<0 左滑
 if (moveDistance > 0 && this.originalLeft >= 0) { // 未向左边滑动时，不能右滑
 return false
 }
 this.doSlide(moveDistance / 2 + this.originalLeft) // 除以2来控制滑动速度
},
touchend (e) {
 const moveDistance = e.changedTouches[0].pageX - this.originalPos // >0 右滑，<0 左滑
 let distance
 if (!this.isClickBack && moveDistance === 0) { // 点击时不收起右侧
 return false
 }
 if ((-moveDistance) > 50) { // 向左滑动超过阙值时,右侧滑出固定距离
 distance = this.pageWidth * this.rightWidth / 100
 } else { // 向左滑动未超过阙值，或向右滑动时，回原位
 distance = 0
 }
 this.doSlide(-distance, true)
},
/**
 * 滑动方法---位置变化 && 右侧宽度变化
 * @param {Number} distance 滑动距离
 * @param {Boolean} animate 滑动是否有动画效果
 */
doSlide (distance, animate = false) {
 this.sliderEle.style.transform = `translateX(${distance}px)`
 this.$refs.right.style.width = -distance + 'px'
 if (this.isMainSlide) {
 this.sliderEle.style.transition = animate ? 'transform .5s' : 'initial'
 this.$refs.right.style.transition = animate ? 'width .5s' : 'initial'
 } else {
 this.sliderEle.style.transition = animate ? 'transform .5s, width .5s' : 'initial'
 }
}

<t-slider class="slider">
 <template slot="main">左侧滑动</template>
 <template slot="right">
 <div class="edit">编辑</div>
 <div class="delete">删除</div>
 </template>
</t-slider>
<t-slider class="slider" :rightWidth="rightWidth" :isMainSlide="false">
 <template slot="main">
 <div>覆盖左侧</div>
 <div class="btn" @click="showRight">点击唤出</div>
 </template>
 <template slot="right">
 <div class="newContent">newContent</div>
 </template>
</t-slider>
<t-slider class="slider" :isClickBack="false">
 <template slot="main">点击不收起</template>
 <template slot="right">
 <div class="edit">编辑</div>
 <div class="delete">删除</div>
 </template>
</t-slider>

components: {TSlider},
data () {
 return {
 pageWidth: null,
 rightWidth: 80
 }
},
mounted () {
 this.pageWidth = document.documentElement.clientWidth
},
 
methods: {
 showRight () {
 this.$refs.mainSlider.doSlide(-this.pageWidth * this.rightWidth / 100, true)
 }
}