<template>
<!-- ?拖動驗證-->
? <div class="slider-check-box">
? ? <div class="slider-check" :class="rangeStatus ? 'success' : ''">
? ? ? <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
? ? ? {{ rangeStatus ? successText : startText }}
? ? </div>
? </div>
</template>
<script>
export default {
? props: {
? ? // 成功之后的函數(shù)
? ? successFun: {
? ? ? type: Function
? ? },
? ? //成功圖標(biāo)
? ? successIcon: {
? ? ? type: String,
? ? ? default: 'el-icon-success'
? ? },
? ? //成功文字
? ? successText: {
? ? ? type: String,
? ? ? default: '驗證成功'
? ? },
? ? //開始的圖標(biāo)
? ? startIcon: {
? ? ? type: String,
? ? ? default: 'el-icon-d-arrow-right'
? ? },
? ? //開始的文字
? ? startText: {
? ? ? type: String,
? ? ? default: '請拖住滑塊，拖動到最右邊'
? ? },
? ? //失敗之后的函數(shù)
? ? errorFun: {
? ? ? type: Function
? ? },
? ? //或者用值來進行監(jiān)聽
? ? 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)'
? ? ? ? ? //執(zhí)行成功的函數(shù)
? ? ? ? ? this.errorFun && this.errorFun()
? ? ? ? } else {
? ? ? ? ? this.rangeStatus = true
? ? ? ? ? if (this.status) {
? ? ? ? ? ? this.$parent[this.status] = true
? ? ? ? ? }
? ? ? ? ? //執(zhí)行成功的函數(shù)
? ? ? ? ? this.successFun && this.successFun()
? ? ? ? }
? ? ? ? document.onmousemove = null
? ? ? ? document.onmouseup = null
? ? ? }
? ? }
? }
}
</script>
<style lang="scss" scoped>
$blue: #198eeb;
@mixin jc-flex {
? display: flex;
? justify-content: center;
? align-items: center;
}
.slider-check-box {
? .slider-check {
? ? background-color: #e9e9e9;
? ? position: relative;
? ? transition: 1s all;
? ? user-select: none;
? ? color: #585858;
? ? @include jc-flex;
? ? height: 40px;
? ? &.success {
? ? ? background-color: $blue;
? ? ? color: #fff;
? ? ? i {
? ? ? ? color: $blue;
? ? ? }
? ? }
? ? i {
? ? ? position: absolute;
? ? ? left: 0;
? ? ? width: 50px;
? ? ? height: 100%;
? ? ? color: $blue;
? ? ? background-color: #fff;
? ? ? border: 1px solid #d8d8d8;
? ? ? cursor: pointer;
? ? ? font-size: 24px;
? ? ? @include jc-flex;
? ? }
? }
}
</style>

<template>
?? ?<div>
? ? ?? ?<SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>
? ? </div>
</template>

<script>
import SliderCheck from '@/components/test/SliderCheck'
export default {
? name: "index",
? components:{
? ? SliderCheck,
? },
? data(){
? ? return {},
? methods:{
? ? // 滑塊驗證成功回調(diào)
? ? handleSuccessFun() {
? ? ? console.log('滑動成功')
? ? },
? ? // 滑塊驗證失敗回調(diào)
? ? handleErrorFun() {
? ? ? console.log('滑動失敗')
? ? }
? }
?
}
</script>

<style lang="scss" scoped>

</style>