dev/dcp-web-gate/src_old/components/JcRange.vue

<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus?'success':''" >
        <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
        <span style="margin-left: 20px;">{{rangeStatus?successText:startText}}</span>
    </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
            }
        },
        data(){
            return {
                disX : 0,
                rangeStatus: false
            }
        },
      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-flex{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .jc-flex >>> .el-form-item__content {
            line-height: 70px !important;
        }
        .jc-component__range i{
           position: absolute;
           left: 0;
           width: 50px;/*no*/
           height: 70px;
           color: #3fcd26;
           background-color: #fff;
           border: 1px solid #d8d8d8;
           cursor: pointer;
           line-height: 70px;
           font-size: 24px;
        }
        .success{
            background-color: #3bc923;
            color: #fff;
            line-height: 70px;
        }
        .jc-component__range.jc-range{
                background-color: #e9e9e9;
                position: relative;
                transition: 1s all;
                user-select: none;
                color: #585858;
                @include jc-flex;
                height: 70px; /*no*/
        }
        .jc-range {
            line-height: 70px !important;
        }
        .success i{
            color: #3bc923;
            line-height: 70px;
            margin-left: 10px;
        }
        .el-icon-d-arrow-right:before,
        .el-icon-success:before {
            margin-left: 10px;
        }
</style>