b1636405fc
* feat: captcha example * fix: fix lint errors * chore: event handling and methods * chore: add accessibility features ARIA labels and roles --------- Co-authored-by: vince <vince292007@gmail.com>
44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
|
||
import { Page, type Point, PointSelectionCaptcha } from '@vben/common-ui';
|
||
|
||
import { Card } from 'ant-design-vue';
|
||
|
||
import { captchaImage, hintImage } from './base64';
|
||
|
||
const selectedPoints = ref<Point[]>([]);
|
||
const handleConfirm = (points: Point[], clear: () => void) => {
|
||
selectedPoints.value = points;
|
||
clear();
|
||
};
|
||
const handleRefresh = () => {
|
||
selectedPoints.value = [];
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Page
|
||
description="通过点击图片中的特定位置来验证用户身份。"
|
||
title="验证码组件示例"
|
||
>
|
||
<Card class="mb-4" title="基本使用">
|
||
<PointSelectionCaptcha
|
||
:captcha-image="captchaImage"
|
||
:hint-image="hintImage"
|
||
class="float-left"
|
||
@confirm="handleConfirm"
|
||
@refresh="handleRefresh"
|
||
/>
|
||
<div class="float-left p-5">
|
||
<div v-for="point in selectedPoints" :key="point.i" class="flex">
|
||
<span class="mr-3 w-16">索引：{{ point.i }}</span>
|
||
<span class="mr-3 w-44">时间戳：{{ point.t }}</span>
|
||
<span class="mr-3 w-16">x：{{ point.x }}</span>
|
||
<span class="mr-3 w-16">y：{{ point.y }}</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Page>
|
||
</template>
|