【前端篇】基于VUE写一个简单的滑动验证组件

查看对应的后端部分

前言

在最近的项目中，登录需要用到滑动验证，网上有很多第三方可以集成，但是项目没那么着急，出于学习的目的，打算自己写一个组件。最终效果：

开发思路

1、为了兼容移动端，需要用到mouse和touch事件； 2、在鼠标按下时添加监听事件：mousemove、touchmove、mouseup、touchend； 3、在鼠标移动时，获取当前位置，赋值给某个变量，用来控制滑块css的left值；(或者改用transform的translateX) 4、在鼠标弹起时，验证是否正确；

一、画出元素

<div class="容器样式">
    <div class="底图样式"><img :src="底图"></div>
    <div class="滑块样式" @touchstart="onPointerDown($event)"
         @mousedown="onPointerDown($event)" :style="{left:currentX+'px'}">
        移动
    </div>
</div>

二、绑定事件

其中on、off是自定义工具，用于添加事件和销毁事件

export default {
    data () {
        return {
            currentX: 0,
            startX:0,
        };
    },
    methods: {
        // 获取当前X轴坐标
        getPointerX (e) {
            let touch = Math.round(e.touches[0].clientX);
            return e.type.indexOf('touch') !== -1 ? touch : Math.round(e.clientX);
        },

        /**
         * 鼠标按下
         * @param event
         */
        onPointerDown (event) {
            event.preventDefault();
            this.startX = this.getPointerX(event);
            on(window, 'mousemove', this.onPointerDrag);
            on(window, 'touchmove', this.onPointerDrag);
            on(window, 'mouseup', this.onPointerDragEnd);
            on(window, 'touchend', this.onPointerDragEnd);
        },

        /**
         * 拖拽中
         * @param event
         */
        onPointerDrag (event) {
            let diff = this.getPointerX(event) - this.startX;
            // 限定最大宽度，先写死
            if (diff > 0 && diff < 280) {
                this.currentX = diff;
            }
        },

        /**
         * 鼠标弹起
         */
        onPointerDragEnd () {
            this.requestResult();
            off(window, 'mousemove', this.onPointerDrag);
            off(window, 'touchmove', this.onPointerDrag);
            off(window, 'mouseup', this.onPointerDragEnd);
            off(window, 'touchend', this.onPointerDragEnd);
        },

        /**
         * 验证
         */
        requestResult(){
            this.$axios.get(请求地址 + this.currentX).then(() => {
                // TODO 成功
            }).catch(() => {
                // TODO 失败
            });
        }
    }
};

【前端篇】基于VUE写一个简单的滑动验证组件

前言 ​

开发思路 ​

一、画出元素 ​

二、绑定事件 ​

前言

开发思路

一、画出元素

二、绑定事件