前言: 2022年国庆期间,学习了一下Vue Vben Admin前台框架,整个界面优雅漂亮,使用账号密码登录功能部分(如下图,原来没有红色部分),并没有做图形验证码的开发,所以这部分功能就需要自己去实现。
云里雾里的看了两天的代码,总结了一下三个字 “天真了”。一直搞后台开发,对前台的知识掌握还是太少了。 Vue3.0、Vite 、 Ant-Design-Vue 、TypeScript 这些。。。有点上头了。
废话少说,不能被困难吓倒。经过一天的折腾初步实现了自己的想法。
以下是验证码组件的代码(如下图)
<template>
<a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
<template #addonAfter>
<span></span>
<img id="canvas" @click="onClickImage" :src="imgurl" />
点击刷新图片
</template>
</a-input>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useGlobSetting } from '/@/hooks/setting';
import { useDesign } from '/@/hooks/web/useDesign';
import { buildUUID } from '/@/utils/uuid';
const props = {
value: { type: String },
size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
};
export default defineComponent({
name: 'CaptchaInput',
props,
setup(props) {
const { prefixCls } = useDesign('countdown-input');
const [state] = useRuleFormItem(props);
const codeKey = buildUUID();
const { myapiUrl } = useGlobSetting();
const imgurl = ref();
const getCaptcha = async () => {
return new URL(
myapiUrl + '/captcha/' + codeKey + `?timestamp=${new Date().getTime()}`,
import.meta.url,
).href;
};
watchEffect(() => {
getCaptcha().then((data: any) => {
imgurl.value = data;
});
});
const onClickImage = () => {
getCaptcha().then((data: any) => {
imgurl.value = data;
});
};
return { prefixCls, state, onClickImage, imgurl };
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-countdown-input';
.@{prefix-cls} {
.ant-input-group-addon {
padding-right: 0;
background-color: transparent;
border: none;
}
}
</style>
在LoginForm.vue添加组件即可。
<FormItem name="code" class="enter-x">
<Captcha
size="large"
class="fix-auto-fill"
v-model:value="formData.code"
:placeholder="t('sys.login.code')"
/>
</FormItem>
还有很多不完善的地方还需要时间。。。