vue-vben-admin/playground/src/views/examples/captcha/slider-captcha.vue

<script lang="ts" setup>
import type {
  CaptchaVerifyPassingData,
  SliderCaptchaActionType,
} from '@vben/common-ui';

import { ref } from 'vue';

import { Page, SliderCaptcha } from '@vben/common-ui';
import { Bell, Sun } from '@vben/icons';

import { Button, Card, message } from 'ant-design-vue';

function handleSuccess(data: CaptchaVerifyPassingData) {
  const { time } = data;
  message.success(`校验成功,耗时${time}秒`);
}
function handleBtnClick(elRef?: SliderCaptchaActionType) {
  if (!elRef) {
    return;
  }
  elRef.resume();
}

const el1 = ref<SliderCaptchaActionType>();
const el2 = ref<SliderCaptchaActionType>();
const el3 = ref<SliderCaptchaActionType>();
const el4 = ref<SliderCaptchaActionType>();
const el5 = ref<SliderCaptchaActionType>();
</script>

<template>
  <Page description="用于前端简单的拖动校验场景" title="滑块校验">
    <Card class="mb-5" title="基础示例">
      <div class="flex items-center justify-center p-4 px-[30%]">
        <SliderCaptcha ref="el1" @success="handleSuccess" />
        <Button class="ml-2" type="primary" @click="handleBtnClick(el1)">
          还原
        </Button>
      </div>
    </Card>
    <Card class="mb-5" title="自定义圆角">
      <div class="flex items-center justify-center p-4 px-[30%]">
        <SliderCaptcha
          ref="el2"
          class="rounded-full"
          @success="handleSuccess"
        />
        <Button class="ml-2" type="primary" @click="handleBtnClick(el2)">
          还原
        </Button>
      </div>
    </Card>
    <Card class="mb-5" title="自定义背景色">
      <div class="flex items-center justify-center p-4 px-[30%]">
        <SliderCaptcha
          ref="el3"
          :bar-style="{
            backgroundColor: '#018ffb',
          }"
          success-text="校验成功"
          text="拖动以进行校验"
          @success="handleSuccess"
        />
        <Button class="ml-2" type="primary" @click="handleBtnClick(el3)">
          还原
        </Button>
      </div>
    </Card>
    <Card class="mb-5" title="自定义拖拽图标">
      <div class="flex items-center justify-center p-4 px-[30%]">
        <SliderCaptcha ref="el4" @success="handleSuccess">
          <template #actionIcon="{ isPassing }">
            <Bell v-if="isPassing" />
            <Sun v-else />
          </template>
        </SliderCaptcha>
        <Button class="ml-2" type="primary" @click="handleBtnClick(el4)">
          还原
        </Button>
      </div>
    </Card>
    <Card class="mb-5" title="自定义文本">
      <div class="flex items-center justify-center p-4 px-[30%]">
        <SliderCaptcha
          ref="el5"
          success-text="成功"
          text="拖动"
          @success="handleSuccess"
        />
        <Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
          还原
        </Button>
      </div>
    </Card>
    <Card class="mb-5" title="自定义内容(slot)">
      <div class="flex items-center justify-center p-4 px-[30%]">
        <SliderCaptcha ref="el5" @success="handleSuccess">
          <template #text="{ isPassing }">
            <template v-if="isPassing">
              <Bell class="mr-2 size-4" />
              成功
            </template>
            <template v-else>
              拖动
              <Sun class="ml-2 size-4" />
            </template>
          </template>
        </SliderCaptcha>
        <Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
          还原
        </Button>
      </div>
    </Card>
  </Page>
</template>