000172e482
* chore(@vben/common-ui): 增加拖拽校验组件 * chore: 增加样式 * Merge branch 'main' into wangjue-verify-comp * chore: 封装action组件 * chore: 拆分完成拖拽功能 * chore: 样式调整为tailwindcss语法 * chore: 导出check图标 * chore: 拖动的图标变为@vben/icons的 * chore: 完成插槽功能迁移 * fix: ci error * chore: 适配暗黑主题 * chore: 国际化 * chore: resolve conflict * chore: 迁移v2的图片旋转校验组件 * chore: 完善选择校验demo * chore: 转换为tailwindcss * chore: 替换为系统的颜色变量 * chore: 使用interface代替组件的props声明 * chore: 调整props * chore: 优化demo背景 * chore: follow suggest * chore: rm unnecessary style tag * chore: update demo * perf: improve the experience of Captcha components --------- Co-authored-by: vince <vince292007@gmail.com> Co-authored-by: Vben <ann.vben@gmail.com>
29 lines
796 B
Vue
29 lines
796 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
import { Page, SliderRotateCaptcha } from '@vben/common-ui';
|
|
import { preferences } from '@vben/preferences';
|
|
import { useUserStore } from '@vben/stores';
|
|
|
|
import { Card, message } from 'ant-design-vue';
|
|
|
|
const userStore = useUserStore();
|
|
function handleSuccess() {
|
|
message.success('success!');
|
|
}
|
|
|
|
const avatar = computed(() => {
|
|
return userStore.userInfo?.avatar || preferences.app.defaultAvatar;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Page description="用于前端简单的拖动校验场景" title="滑块旋转校验">
|
|
<Card class="mb-5" title="基本示例">
|
|
<div class="flex items-center justify-center p-4">
|
|
<SliderRotateCaptcha :src="avatar" @success="handleSuccess" />
|
|
</div>
|
|
</Card>
|
|
</Page>
|
|
</template>
|