前端滑动验证码

最新推荐文章于 2025-06-18 22:38:28 发布

原创

最新推荐文章于 2025-06-18 22:38:28 发布 · 884 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端

效果：

完整源码：

<template>
    <div class="flex-center">
        <div id="dragContainer">
           <!-- 绿色区域 -->
           <div id="dragBg"></div>
           <!-- 滑动容器文本 -->
           <div id="dragText"></div>
           <!-- 拖动元素 -->
           <div id="dragHandler" class="dragHandlerBg"></div>
        </div>
        <div class="btn" @click="initDrag">初始化</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              dragContainer: null,
              dragBg: null,
              dragText: null,
              dragHandler: null,
              maxHandlerOffset: null,
            }
        },
        mounted() {
            //获取滑动控件容器,灰色背景
            this.dragContainer = document.getElementById("dragContainer");
            //获取滑块左边部分,绿色背景
            this.dragBg = document.getElementById("dragBg");
            //获取滑动验证容器文本
            this.dragText = document.getElementById("dragText");
            //获取滑块
            this.dragHandler = document.getElementById("dragHandler");
            //滑块的最大偏移量 = 滑动验证容器文本长度 - 滑块长度
            this.maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
            // 初始化
            this.initDrag();
        },
        methods: {
            // 初始化
            initDrag() {
                //在滑动验证容器文本写入“拖动滑块验证”
                this.dragText.textContent = "拖动