【Vue】Vue3滑动拼图验证 vue3-slide-verify

安装

npm i vue3-slide-verify --save

引入

import SlideVerify from 'vue3-slide-verify';
import "vue3-slide-verify/dist/style.css";

使用

            <slide-verify
                @success="onVerifySuccess"
                slider-text="向右滑动验证"
            />

// 滑动验证状态
const isVerified = ref(false);

// 滑动验证成功回调
const onVerifySuccess = () => {
  isVerified.value = true;
  message.success('验证成功');
};

示例代码

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import SlideVerify from 'vue3-slide-verify'; // 需要先安装 vue3-slide-verify
import "vue3-slide-verify/dist/style.css";
// 表单状态
const activeKey = ref('login');
const loginForm = reactive({ username: '', password: '' });
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
});

// 滑动验证状态
const isVerified = ref(false);

// 表单校验规则
const loginRules = {
  username: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }]
};

const registerRules = {
  username: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }],
  confirmPassword: [
    { required: true, message: '请确认密码' },
    {
      validator: (rule, value) => {
        return value === registerForm.password;
      },
      message: '两次输入的密码不一致'
    }
  ]
};

// 滑动验证成功回调
const onVerifySuccess = () => {
  isVerified.value = true;
  message.success('验证成功');
};

// 提交处理
const handleLogin = () => {
  if (!isVerified.value) {
    message.warning('请先完成验证');
    return;
  }
  // 这里添加登录逻辑
  message.success('登录成功');
};

const handleRegister = () => {
  if (!isVerified.value) {
    message.warning('请先完成验证');
    return;
  }
  // 这里添加注册逻辑
  message.success('注册成功');
};
</script>

<template>
  <div class="auth-container">
    <a-card class="auth-card">
      <a-tabs v-model:activeKey="activeKey" centered>
        <!-- 登录标签页 -->
        <a-tab-pane key="login" tab="登录">
          <a-form
              :model="loginForm"
              :rules="loginRules"
              @finish="handleLogin"
              layout="vertical"
          >
            <a-form-item label="账号" name="username">
              <a-input v-model:value="loginForm.username" />
            </a-form-item>

            <a-form-item label="密码" name="password">
              <a-input-password v-model:value="loginForm.password" />
            </a-form-item>

            <slide-verify
                @success="onVerifySuccess"
                slider-text="向右滑动验证"
            />

            <a-button
                type="primary"
                html-type="submit"
                block
                class="submit-btn"
            >
              登录
            </a-button>
          </a-form>
        </a-tab-pane>

        <!-- 注册标签页 -->
        <a-tab-pane key="register" tab="注册">
          <a-form
              :model="registerForm"
              :rules="registerRules"
              @finish="handleRegister"
              layout="vertical"
          >
            <a-form-item label="账号" name="username">
              <a-input v-model:value="registerForm.username" />
            </a-form-item>

            <a-form-item label="密码" name="password">
              <a-input-password v-model:value="registerForm.password" />
            </a-form-item>

            <a-form-item label="确认密码" name="confirmPassword">
              <a-input-password v-model:value="registerForm.confirmPassword" />
            </a-form-item>

            <slide-verify
                @success="onVerifySuccess"
                slider-text="向右滑动验证"
            />

            <a-button
                type="primary"
                html-type="submit"
                block
                class="submit-btn"
            >
              注册
            </a-button>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f2f5;
}

.auth-card {
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.submit-btn {
  margin-top: 24px;
}

:deep(.ant-tabs-nav) {
  margin-bottom: 24px;
}
</style>