vue登录时滑块验证

最新推荐文章于 2025-09-02 20:52:58 发布

原创

最新推荐文章于 2025-09-02 20:52:58 发布 · 2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue.js #前端

1.效果图

在这里插入图片描述

2. 新建 SliderCheck.vue组件

<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: {
   
   
    // 成功之后的函数
    successFun: {
   
   
      type: Function
    },
    //成功图标
    successIcon: {
   
   
      type: String,
      default: 'el-icon-success'
    },
    //成功文字
    successText: {
   
   
      type: String,
      default: '验证成功'
    },
    //开始的图标
    startIcon: {
   
   
      type: String,
      default: 'el-icon-d-arrow-right'