524b9badf2
* feat: add form component * fix: build error * feat: add form adapter * feat: add some component * feat: add some component * feat: add example * feat: suppoer custom action button * chore: update * feat: add example * feat: add formModel,formDrawer demo * fix: build error * fix: typo * fix: ci error --------- Co-authored-by: jinmao <jinmao88@qq.com> Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
||
import type { CaptchaPoint } from '@vben/common-ui';
|
||
|
||
import { ref } from 'vue';
|
||
|
||
import { Page, PointSelectionCaptcha } from '@vben/common-ui';
|
||
|
||
import { Card } from 'ant-design-vue';
|
||
|
||
import { captchaImage, hintImage } from './base64';
|
||
|
||
const selectedPoints = ref<CaptchaPoint[]>([]);
|
||
const handleConfirm = (points: CaptchaPoint[], 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>
|