滑块验证_

1.废话不多说直接上样式图

2.直接上代码

注意： 图片的原图大小要和外框大小一样，可以叫ui给，缩放图片会导致background-position有点问题（暂时没时间去研究，就这样吧）

<template>
	<div class="content" v-cloak>
		<div class="login" @mousemove="mousemove($event)" @mouseup="mouseup($event)" >
            <div class="footer" @mouseenter='frameshow=true' @mouseleave='frameshow=false'>
                <slot name='out_span_slot'></slot>
                 <i class='fa fa-check-circle font_result_succ font_result' v-if='status == "success"'></i>
                 <i class='fa fa-times-circle-o font_result_err font_result'  v-if='status == "err"'></i>
                 <i class='fa fa-genderless  font_result font_result_reset'  v-if='status == "refalsh"' @click='resetPos'></i>
                <span class="moveDot" ref='moveDot' :style="{left: move.x + 'px', width: elem.FRAME_WIDTH}" @mousedown="mousedown($event)"  >
                    <slot name='in_span_slot'></slot>
                </span>
                <div class="frame"  v-if='frameshow' :style="{background: 'url(' + bgSrc +') no-repeat'}">
                    <div class="puzzle" :style="{'left': move.x + 'px','top': pos.y + 'px', 'backgroundPosition': '-'+ pos.x +'px -'+ pos.y +'px', width: elem.DOT_WIDH, height: elem.DOT_HEIGHT, background: 'url(' + bgSrc +') no-repeat'}"></div>
                    <div class="puzzle_bottom" :style="{left: pos.x + 'px', top: pos.y + 'px', width: elem.DOT_WIDH, height: elem.DOT_HEIGHT}"></div>
                </div>
            </div>
		</div>
	</div>
</template>

3.可以设置 滑块的宽高，底图片的宽高

props: ['FRAME_WIDTH', 'FRAME_HEIGHT', 'DOT_WIDH', 'DOT_HEIGHT', ],

<script>
export default {
    name: 'mangement',
    data() {
        return {
            bgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528974656400&di=1038e1c8dc068d6854495af4c893f407&imgtype=0&src=http%3A%2F%2Ffile.fh21static.com%2Ffhfile1%2FM00%2F65%2FE6%2FoYYBAFrxFuSAfY6XAAEezZwAQpI465.jpg',
            move:{
                x: 0,
            },
            pos: {
                x: 200,
                y: 100
            },
            elem: {
                FRAME_WIDTH: this.FRAME_WIDTH || 400,
                FRAME_HEIGHT: this.FRAME_HEIGHT || 300,
                DOT_WIDH: this.DOT_WIDH || 50,
                DOT_HEIGHT: this.DOT_HEIGHT || 50,
                NAV_WIDTH: this.NAV_WIDTH || 30,
                NAV_HEIGHT: this.NAV_HEIGHT || 30,
            },
            temp: {
                x: 0,
                click: false,
            },
            status: 'refalsh', //success | err
            frameshow: true,
        }
    },
    props: ['FRAME_WIDTH', 'FRAME_HEIGHT', 'DOT_WIDH', 'DOT_HEIGHT', ],
    computed: {
     
    },
    mounted() {
        this.resetPos();
    },
    methods: {
        mousedown(e) {
            this.temp.click = true;
            var oEvent= e || event;
            this.temp.x = oEvent.clientX;
        },
        mousemove(e) {
            if(this.temp.x) {
                var oEvent= e || event;
                this.move.x = (oEvent.clientX - this.temp.x);           
                if(this.move.x >= (this.elem.FRAME_WIDTH - this.elem.NAV_WIDTH)) {
                    this.move.x = this.elem.FRAME_WIDTH - this.elem.NAV_WIDTH;               
                }else if(this.move.x <= 0) {
                    this.move.x = 0;
                }
            }
        },
        mouseup(e) {
            if(this.temp.x) {
                var oEvent= e || event;
                this.temp.x = false;
                if(Math.abs(this.move.x - this.pos.x) <= 5) {
                    this.status = 'success';
                }else{
                    this.status = 'err';
                }
                setTimeout(() => {    
                    this.resetPos();
                    this.status = 'refalsh';
                },1000)
            }
          
        },
        mouseenter() {
            alert(2)
        },
        resetPos() {
            this.move.x = 0;
            this.pos.x = Math.random()*(this.elem.FRAME_WIDTH - this.elem.DOT_WIDH*2) + this.elem.DOT_WIDH;
            this.pos.y = Math.random()*(this.elem.FRAME_HEIGHT - this.elem.DOT_HEIGHT*2) + this.elem.DOT_HEIGHT;
        }


    }

}
</script>

<style scoped>
    .font_result{
        font-size: 30px;
        color: #47a8d4;
        position: absolute;
        left: 105%;
        top: 0px;
    }
    .font_result_err{
        color: red;
    }
    .font_result_reset{
        cursor: pointer;
    }
     .footer{
        width: 400px;
        height: 30px;
        border-radius: 15px;
        background: #ddd;
        position: relative;
        margin:200px;
    }
    .footer .moveDot{
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0px;
        top: 0px;
        display: block;
        background: #47a8d4;
        border-radius: 40%;
        cursor: pointer;
        z-index: 4;
    }
    .frame{
        width: 400px;
        height: 300px; 
        position: absolute;
        left: 0px;
        top: 100%;
        border-radius: 10px;
    }
	.frame .puzzle{
        background-position: -400px -200px;
		width: 50px;
		height: 50px;
		border: 1px solid #ccc;
        position: absolute;
        left: 0px;
        top: 0px;
        box-shadow: 0px 0px 5px 0px #ddd;
        z-index: 2;
        border-radius: 3px;
	}
    .puzzle_bottom{
        width: 50px;
		height: 50px;
        background-color: #ccc;
		background-position: -0px -0px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        border-radius: 3px;
        opacity: 0.6;
    }
   
</style>