vue滑动删除组件

说明：该组件基于jquery和flexible.js（设计稿宽为750px）

vue移动端滑动删除组件

git地址

<template>
	<div class="slider_delete" :style="{webkitTransform:'translate3d('+transformX+'rem,0,0)'}" 
		@touchstart.stop="touchStart($event)" 
		@touchend.stop="touchEnd($event)"
		@touchmove.stop="touchMove($event)">
		<slot></slot>
	</div>
</template>
<script>
	/* 
	 * 滑动配置。distance 滑动距离
	 */
	export default({
		data(){
			return {
				startPos:{x:0,y:0},
				endPos:{x:0,y:0},
				transformX:0,
				transformStartX:0,
				
			}
		},
		props:['sliderConf'],
		methods:{
			touchStart(e){
				e.preventDefault();
				this.startPos.x = e.targetTouches[0].screenX;
				this.transformStartX = this.transformX;
			},
			touchMove(e){
				e.preventDefault();
				var x = e.targetTouches[0].screenX;
				var temp = (x - this.startPos.x)/75;
				if(temp > this.sliderConf.distance || (this.transformX == 0 && temp > 0) ){
					this.transformX = 0;
				}else{
					this.transformX =this.transformStartX + temp;
				}
			},
			touchEnd(e){
				e.preventDefault();
				if(this.transformX > 0){
					this.transformX = 0;
				}
				if(this.transformX < 0){
					this.transformX = -this.sliderConf.distance;
				}
			}
		}
	})
</script>
<style>
	.slider_delete{
		position: absolute;
		left: 0;
		z-index: 100;
	}
</style>

使用

<template>
	<div class="delete_div">
		<slider_delete :sliderConf="sliderConf">
			<div class="content"></div>
		</slider_delete>
		<div class="delete_button"></div>
	</div>
</template>
<script>
	import SliderDelete from "components/slider_delete.vue";
	export default({
		data(){
			return {
				sliderConf:{//滑动配置
					distance:1.4,
				}
			}
		},
		components:{
			"slider_delete":SliderDelete,
		}
	})
</script>
<style>
	.content{
		background-color: black;
		width: 10rem;
		height: 3rem;
	}
	.delete_button{
		position: absolute;
		background-color: red;
		right: 0;
		width: 1.4rem;
		height: 3rem;
	}
	.delete_div{
		position: relative;
	}
</style>