子元件中程式碼如下：

<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus?'success':''" >
        <div class="backbg"></div>
        <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
        <div>{{rangeStatus?successText:startText}}</div>
    </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;
            let leftBox = document.getElementsByClassName('backbg')[0];
            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 = ()=> {
                leftBox.style.width = 0+'px'
                leftBox.style.transition = '.5s all';
                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 lang="scss" scoped>
@mixin jc-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.backbg{
    width: 0;
    height: 100%;
    background-color: #4092ff;
    position: absolute;
    left: 0;
}
.jc-component__range{
    .jc-range{
        background-color: #e9e9e9;
        position: relative;
        transition: 1s all;
        user-select: none;
        color: #585858;
        @include jc-flex;
        height: 50px; /*no*/
        &.success{
            background-color: #4092ff;
            color: #fff;
            i{
                color: #4092ff;
            }
        }
        i{
            position: absolute;
            left: 0;
            width: 40px;/*no*/
            height: 98%;
            color: #4092ff;
            background-color: #fff;
            border: 1px solid #d8d8d8;
            cursor: pointer;
            font-size: 24px;
            @include jc-flex;
        }
    }
}
</style>

父元件呼叫：

<JcRange :successFun="onMpanelSuccess" :errorFun="onMpanelError"></JcRange>

引入子元件：

import JcRange from "@/components/JcRange.vue";

components: {
    JcRange
},

父元件寫成功回撥和失敗回撥：

onMpanelSuccess(){
     
},
onMpanelError(){

},

若滑塊需多次呼叫（如更新資訊時，為防止惡意調介面，則每次更新資訊都進行滑塊驗證），可使用v-if控制顯示隱藏

<div v-if="showUpdatVerify">
     <JcRange :successFun="onMpanelSuccess" :errorFun="onMpanelError"></JcRange>
</div>

效果如下：

（未拖動）

（拖動中）

（驗證成功）

參考連結：https://blog.csdn.net/qq_43487181/article/details/94143663