vue3的滑块

前言

这是复制别人的代码，源码是vue2，然后我修改成VUE3的。

代码

<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus?'success':''" >
      <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
      {{rangeStatus?successText:startText}}
    </div>
  </div>
</template>
<script>
import {defineComponent, ref, watch} from "vue";
export default defineComponent({
  props: {
    //成功图标
    successIcon: {
      type: String,
      default: 'el-icon-success'
    },
    //成功文字
    successText: {
      type: String,
      default: '验证成功'
    },
    //开始的图标
    startIcon: {
      type: String,
      default: 'el-icon-d-arrow-right'
    },
    //开始的文字
    startText: {
      type: String,
      default: '拖动滑块到最右边'
    },
  },
  setup(prop,content) {
    //滑块移动
    const disX = ref(0)
    const rangeStatus = ref(false)
    const yuansu = ref(null)
    watch(rangeStatus,(newvalue,oldvalue)=>{
      if(!newvalue){
        console.log("触发监听")
        yuansu.value.style.transition = '.5s all';
        yuansu.value.style.transform = 'translateX(0)';
      }
    })
    function rangeMove(e){
      yuansu.value = e.target;
      let ele = e.target;
      let startX = e.clientX;
      let eleWidth = ele.offsetWidth;
      let parentWidth =  ele.parentElement.offsetWidth;
      let MaxX = parentWidth - eleWidth;
      if(rangeStatus.value){//不运行
        return false;
      }
      document.onmousemove = (e) => {
        let endX = e.clientX;
        disX.value = endX - startX;
        if(disX.value<=0){
          disX.value = 0;
        }
        if(disX.value>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
          disX.value = MaxX;
        }
        ele.style.transition = '.1s all';
        ele.style.transform = 'translateX('+disX.value+'px)';
        e.preventDefault();
      }
      document.onmouseup = ()=> {
        if(disX.value !== MaxX){
          ele.style.transition = '.5s all';
          ele.style.transform = 'translateX(0)';
        }else{
          //执行成功的函数
          rangeStatus.value = true
          content.emit("get")
        }
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
    return {
      rangeMove,
      disX,
      rangeStatus,
    }
  }
});
</script>
<style lang="scss" scoped>
@mixin jc-flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.jc-component__range{
  .jc-range{
    background-color: #FFCCCC;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #333;
    @include jc-flex;
    height: 45px; /*no*/
    &.success{
      background-color: #7AC23C;
      color: #fff;
      i{
        color: #7AC23C;
      }
    }
    i{
      position: absolute;
      left: 0;
      width: 60px;/*no*/
      height: 100%;
      color: #919191;
      background-color: #fff;
      border: 1px solid #bbb;
      cursor: pointer;
      @include jc-flex;
    }
  }
}
</style>

源码地址：忘了，擦。