在vue-vben-admin登录功能中集成图形验证码组件

前言： 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>

还有很多不完善的地方还需要时间。。。