index.vue

<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus ? 'success' : '' ">
      <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon" id="rangeMove"></i>
      {{ rangeStatus ? successText : startText}}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 成功之后的函数
    successFun: {
      type: Function
    },
    //成功图标
    successIcon: {
      type: String,
      default: "el-icon-success"
    },
    //成功文字
    successText: {
      type: String,
      default: ''
    },
    //开始的图标
    startIcon: {
      type: String,
      default: "el-icon-d-arrow-right"
    },
    //开始的文字
    startText: {
      type: String,
      default: ''
    },
    //失败之后的函数
    errorFun: {
      type: Function
    },
    //或者用值来进行监听
    status: {
      type: String
	},
	codeStatus: {
      type: String
	},
  },
  name: "Silder",
  data() {
    return {
        rangeStatus:'',
    };
  },
  watch: {
	codeStatus(nVal, oVal) {
      if (nVal === 'error') {
		  this.rangeStatus = false
		  document.getElementById('rangeMove').style.transform = 'translateX(0)'
	  }
    },
  },
  methods: {
    rangeMove(e){
			let ele = e.target;
			let startX = e.clientX;
			let eleWidth = ele.offsetWidth;
			let parentWidth =  ele.parentElement.offsetWidth;
			let MaxX = parentWidth - eleWidth;
			if(this.rangeStatus){//不运行
				return false;
			}
			document.onmousemove = (e) => {
				let endX = e.clientX;
				this.disX = endX - startX;
				if(this.disX <= 0){
					this.disX = 0;
				}
				if(this.disX >= MaxX - eleWidth){//减去滑块的宽度,体验效果更好
					this.disX = MaxX;
				}
				ele.style.transition = '.1s all';
				ele.style.transform = 'translateX('+this.disX+'px)';
				e.preventDefault();
			}
			document.onmouseup = ()=> {
				if(this.disX !== MaxX){
					ele.style.transition = '.5s all';
					ele.style.transform = 'translateX(0)';
					//执行失败的函数
					this.errorFun && this.errorFun();
				}else{
					this.rangeStatus = true;
					if(this.status){
						this.$parent[this.status] = true;
					}
					//执行成功的函数
					this.successFun && this.successFun();
				}
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}
  
  }
};
</script>
<style scoped>
.jc-component__range {
	width: 300px;
	height: 36px;
}

.jc-range{
	background-color: #e9e9e9;
	position: relative;
	transition: 1s all;
	user-select: none;
	color: #585858;
	display: flex;
	font-size: 14px;
	justify-content: center;
	align-items: center;
	height: 36px; /*no*/
}
.jc-range i{
	position: absolute;
	left: 0;
	width: 36px;/*no*/
	height: 36px;
	color: #666;
	background-color: #fff;
	border: 1px solid #D9D9D9;
	font-size: 17px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
.jc-range.success{
	background-color: #3BB7FF;
	color: #fff;
}
.jc-range.success i{
	color: #3BB7FF;
}
</style>