vue点击按钮实现弹窗式滑块验证码(比较完整）

最新推荐文章于 2024-08-13 11:55:31 发布

梁小茹

最新推荐文章于 2024-08-13 11:55:31 发布

阅读量1.7k

点赞数 6

分类专栏： vue滑块验证

本文链接：https://blog.csdn.net/weixin_46653486/article/details/118190320

版权

本文介绍如何在Vue中利用dialog控制弹窗显示关闭，实现一个完整的弹窗式滑块验证码功能。包括对应的CSS样式和JavaScript代码实现。

摘要由CSDN通过智能技术生成

整个页面是个弹窗 dialogbuttonVisible 控制弹窗的显示关闭
效果图：
在这里插入图片描述
test.vue:

          <div class="verification-wrap">
                    <el-button type="text" @click="verificationButton"
                      >点击进行验证</el-button
                    >
                    //弹出层
                    <el-dialog
                      title="请完成安全验证"
                      :visible.sync="dialogbuttonVisible"
                      width="30%"
                    >
                      <div class="verification-slide">
                        //整个滑块验证
                        //again: 检测到非人为操作滑动时触发的回调函数
                        //success: 返回时间参数，单位为毫秒
                        //refresh: 点击刷新按钮后的回调函数
                        //accuracy: 滑动验证的误差范围，默认值 5
                        //fulfilled: 刷新成功之后的回调函数
                        //r : 滑块突出圆的半径
                        //l : 滑块的边长
                        //