Technologieaustausch

Responsive Entwicklung der Front-End-Vue3-Anmeldeseite

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

eine Anmeldeseite

Ich ging direkt zum Code

Die Struktur ist so

Loginseite

  1. <template>
  2.   <a-layout class="login-box">
  3.     <a-layout-content class="login-content">
  4.       <a-row align="middle" justify="center" class="login-content-main">
  5.         <a-col class="login-content-bgc" :pull="1">
  6.           <img :src="loginBg" width="480">
  7.           <h2>{{ '开箱即用的中后台管理系统' }}</h2>
  8.           <p style="margin-top: 15px">✨✨✨ 欢迎使用 'ZY·Admin' '1.0.0' </p>
  9.           <p style="margin-top: 15px">
  10.             <a href='https://gitee.com/Z568_568/vue3-antd-plus/stargazers'>
  11.               <imgs src='https://gitee.com/Z568_568/vue3-antd-plus/badge/star.svg?theme=dark' alt='star' />
  12.             </a>
  13.             <a href='https://gitee.com/Z568_568/vue3-antd-plus/members'><img
  14.                 src='https://gitee.com/Z568_568/vue3-antd-plus/badge/fork.svg?theme=dark' alt='fork' /></a>
  15.           </p>
  16.         </a-col>
  17.  
  18.         <a-col class="login-content-form">
  19.           <div v-if="!isShow" style="max-width: 500px;">
  20.             <LoginForm @onRegisterBtn="isShow = 1" />
  21.           </div>
  22.           <div v-if="isShow" style="max-width: 500px;">
  23.             <RegisterForm @onLoginBtn="isShow = 0" />
  24.           </div>
  25.         </a-col>
  26.       </a-row>
  27.     </a-layout-content>
  28.   </a-layout>
  29. </template>
  30.  
  31. <script lang="ts" setup>
  32. import { reactive, ref, computed } from 'vue';
  33. import LoginForm from "./components/LoginForm.vue";
  34. import loginBg from '@/assets/login-bg.png';
  35.  
  36. import RegisterForm from "./components/RegisterForm.vue";
  37. const formState = reactive({
  38.   username: 'admin',
  39.   password: 'admin',
  40.   code: '',
  41.   remember: true,
  42. });
  43. const isShow = ref(0)
  44. const onFinish = values => {
  45.   console.log('Success:', values);
  46.   // authStore.login()
  47.  
  48. };
  49. const onFinishFailed = errorInfo => {
  50.   console.log('Failed:', errorInfo);
  51. };
  52. const disabled = computed(() => {
  53.   return !(formState.username && formState.password);
  54. });
  55.  
  56. </script>
  57.  
  58. <style lang="less" scoped>
  59. @import "../../style/index.less";
  60.  
  61. .login-box {
  62.   width: 100%;
  63.   height: 100%;
  64.   box-sizing: border-box;
  65.   // background-color: #ffffff;
  66.  
  67.   .login-logo,
  68.   .login-footer {
  69.     // color: #444343;
  70.     // background-color: #ffffff;
  71.  
  72.   }
  73.  
  74.   .login-content {
  75.     height: 100%;
  76.  
  77.     .login-content-main {
  78.       height: 100%;
  79.  
  80.       .login-content-bgc {
  81.         text-align: center;
  82.         padding-bottom: 100px;
  83.       }
  84.  
  85.       .login-content-form {
  86.         border: 1px solid #e3e3e3;
  87.         background-color: #fff;
  88.         padding: 60px;
  89.         border-radius: 8px;
  90.         overflow: hidden;
  91.         box-sizing: border-box;
  92.  
  93.         .login-title {
  94.           margin-bottom: 30px;
  95.         }
  96.  
  97.         .login-form {
  98.           max-width: 400px;
  99.           background-color: #fff;
  100.           overflow: hidden;
  101.  
  102.           .login-form-button {
  103.             margin-right: 15px;
  104.           }
  105.         }
  106.       }
  107.     }
  108.   }
  109.  
  110.   .login-footer {
  111.     text-align: center;
  112.     font-size: .8rem;
  113.     // color: #828181;
  114.   }
  115. }
  116. </style>

Login Formular

  1. <template>
  2.   <div v-show="getShow">
  3.     <h2 class="login-title">登录</h2>
  4.     <a-form loading :model="state.formState" name="normal_login" class="login-form" @finish="onFinish"
  5.       @submit="handleSubmit" @finishFailed="onFinishFailed">
  6.       <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
  7.         <a-input v-model:value="state.formState.username" allowClear autocomplete="off" size="large" placeholder="用户名">
  8.           <template #prefix>
  9.             <IconFont type="icon-yonghuming" style="font-size: 18px" />
  10.           </template>
  11.         </a-input>
  12.       </a-form-item>
  13.       <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
  14.         <a-input-password v-model:value="state.formState.password" allowClear autocomplete="off" placeholder="密码"
  15.           size="large">
  16.           <template #prefix>
  17.             <IconFont type="icon-mima" style="font-size: 18px" />
  18.           </template>
  19.         </a-input-password>
  20.       </a-form-item>
  21.       <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
  22.         <div style="display: flex">
  23.           <a-input v-model:value="state.formState.code" allowClear autocomplete="off" size="large" placeholder="验证码">
  24.             <template #prefix>
  25.               <IconFont type="icon-yanzhengma" style="font-size: 18px" />
  26.             </template>
  27.           </a-input>
  28.           <div class="login-code" v-html="state.captchaSvg" @click="getCaptcha"></div>
  29.         </div>
  30.       </a-form-item>
  31.       <a-form-item>
  32.         <a-form-item name="remember" no-style>
  33.           <a-checkbox v-model:checked="state.formState.remember">记住密码</a-checkbox>
  34.         </a-form-item>
  35.       </a-form-item>
  36.       <a-form-item>
  37.         <a-button type="primary" style="width: 100%" :disabled="disabled" @click="loginSuccess" html-type="submit"
  38.           size="large" class="login-form-button">
  39.           登录
  40.         </a-button>
  41.       </a-form-item>
  42.     </a-form>
  43.     <div>
  44.       <a-space class="login-btn-list">
  45.         <a-button @click="setLoginState" class="login-form-button">
  46.           注册
  47.         </a-button>
  48.  
  49.       </a-space>
  50.     </div>
  51.  
  52.   </div>
  53. </template>
  54.  
  55. <script setup lang="ts">
  56. import { defineComponent, onMounted, reactive, ref, UnwrapRef, computed } from "vue";
  57. const getShow = ref("login")
  58. const emit = defineEmits(["onRegisterBtn"])
  59. const router = useRouter();
  60. import { useRouter } from "vue-router";
  61. const userStore = useUserStore();
  62. import { timeFix } from "@/utils/util";
  63. import { getSmsCaptcha, get2step } from "@/api/login";
  64. import { useUserStore } from "@/store/modules/user";
  65. import { notification, message } from "ant-design-vue";
  66. const customActiveKey = ref<string>("tab1");
  67. import md5 from "md5";
  68. import { FormState } from "./types";
  69. import { useForm } from "ant-design-vue/lib/form";
  70. const formRef: UnwrapRef<FormState> = reactive({
  71.   rememberMe: false,
  72.   username: "",
  73.   password: "",
  74.   mobile: "",
  75.   captcha: "",
  76. });
  77. // const { validate, validateInfos } = useForm(formRef, rulesRef);
  78.  
  79. const state = reactive({
  80.   formState: {
  81.     username: 'admin',
  82.     password: 'admin',
  83.   },
  84.   captchaSvg: ''
  85. })
  86. const setLoginState = () => {
  87.  
  88.   emit("onRegisterBtn")
  89. }
  90. const rulesRef = reactive({
  91.   rememberMe: [{ trigger: "checked" }],
  92.   username: [
  93.     {
  94.       required: true,
  95.       // message: t("user.username.required"),
  96.     },
  97.     {
  98.       // validator: handleUsernameOrEmail,
  99.       trigger: "change",
  100.     },
  101.   ],
  102.   password: [{ required: true, }, {}],
  103.   mobile: [
  104.     {
  105.       required: true,
  106.       pattern: /^1[34578]d{9}$/,
  107.       // message: t("user.login.mobile.placeholder"),
  108.       validateTrigger: "change",
  109.     },
  110.   ],
  111.   captcha: [
  112.     {
  113.       required: true,
  114.       // message: t("user.verification-code.required"),
  115.       validateTrigger: "blur",
  116.     },
  117.   ],
  118. });
  119.  
  120. const loginSuccess = (res?) => {
  121.   router.push({ path: "/" });
  122.   // 延迟 1 秒显示欢迎信息
  123.   setTimeout(() => {
  124.     const user = res ? `${res.username}` : "";
  125.     notification.success({
  126.       message: `欢迎${user}`,
  127.       description: `欢迎回来`,
  128.     });
  129.   }, 1000);
  130. };
  131.  
  132. const getCaptcha = () => {
  133.   /* authCaptcha().then(res => {
  134.      state.captchaSvg = ref(res.data)
  135.    }).catch(err => {
  136.    })*/
  137.  
  138.   let res = {
  139.     "status": 1,
  140.     "message": "成功.",
  141.     "data": "<svg xmlns="http://www.w3.org/2000/svg" width="90" height="38" viewBox="0,0,90,38"><path fill="#57dfbd" d="M22.96 21.19L22.99 21.23L22.93 21.16Q23.58 21.03 24.97 20.88L25.02 20.94L25.00 20.92Q25.00 21.59 25.00 22.22L24.99 22.22L25.00 23.46L25.05 23.50Q24.30 23.58 23.48 23.65L23.34 23.52L23.34 23.52Q22.50 23.54 21.68 23.50L21.64 23.46L21.64 23.46Q18.90 29.59 15.54 34.11L15.63 34.21L15.54 34.11Q13.16 34.84 11.89 35.44L11.81 35.35L11.91 35.46Q15.94 29.84 18.93 23.67L18.77 23.51L16.20 23.52L16.22 23.54Q16.33 22.34 16.22 21.03L16.08 20.89L16.18 20.99Q18.03 21.13 20.05 21.13L20.03 21.10L22.01 17.59L22.00 17.58Q22.94 15.68 24.14 14.11L24.19 14.16L24.06 14.03Q22.49 14.14 20.92 14.14L21.04 14.27L20.91 14.13Q15.01 14.22 11.31 12.05L11.25 11.99L10.73 10.42L10.74 10.43Q10.39 9.60 10.02 8.74L9.98 8.70L9.93 8.65Q14.20 11.24 19.81 11.46L19.89 11.54L19.78 11.44Q24.90 11.73 29.95 9.78L29.89 9.73L30.02 9.86Q29.75 10.19 29.26 11.05L29.31 11.09L29.27 11.05Q25.74 15.75 22.93 21.17ZM30.84 12.40L30.81 12.37L31.79 10.39L31.89 10.49Q30.86 10.88 29.21 11.59L29.21 11.59L29.40 11.29L29.38 11.27Q29.46 11.09 29.57 10.98L29.59 10.99L29.57 10.98Q29.93 10.29 30.64 8.98L30.65 9.00L30.63 8.97Q25.45 11.27 19.81 11.05L19.88 11.13L19.89 11.13Q13.97 10.86 9.29 7.94L9.18 7.82L9.29 7.93Q10.30 9.77 11.12 12.38L11.04 12.30L11.12 12.39Q12.15 12.96 12.93 13.26L13.02 13.35L13.04 13.37Q13.19 13.71 13.64 15.54L13.59 15.49L13.54 15.44Q16.57 16.60 21.99 16.45L22.02 16.48L22.02 16.48Q21.81 17.13 19.87 20.83L19.91 20.87L19.91 20.87Q17.79 20.77 15.84 20.58L15.86 20.60L15.89 20.63Q15.85 21.33 15.85 22.19L15.97 22.32L15.91 23.94L17.49 23.88L17.51 25.28L17.51 25.28Q13.70 32.58 10.98 36.09L10.94 36.05L10.92 36.04Q12.64 35.44 14.25 34.95L14.14 34.85L14.09 34.80Q13.47 35.75 12.13 37.43L12.09 37.40L12.16 37.47Q15.36 36.47 17.75 36.25L17.62 36.12L17.62 36.12Q20.58 32.50 23.64 25.84L23.71 25.90L27.01 26.03L26.95 25.96Q26.94 25.14 26.94 24.24L26.88 24.18L26.85 22.39L26.83 22.37Q26.61 22.41 26.06 22.45L26.07 22.45L26.00 22.38Q25.49 22.45 25.22 22.45L25.20 22.42L25.39 22.61Q25.27 22.38 25.31 22.23L25.29 22.21L25.29 21.96L25.30 21.96Q27.78 16.93 30.81 12.36Z"/><path d="M8 10 C60 11,56 4,77 3" stroke="#e994e9" fill="none"/><path fill="#8da6f0" d="M59.96 34.13L59.83 33.99L59.81 33.97Q58.47 34.10 56.94 33.68L56.91 33.65L56.91 33.66Q55.69 32.74 55.55 31.13L55.68 31.27L55.59 31.17Q55.63 31.07 55.82 28.49L55.83 28.50L55.70 28.37Q56.77 28.24 58.75 27.87L58.82 27.94L58.65 28.70L58.60 28.65Q58.25 30.28 59.63 30.84L59.69 30.90L59.72 30.93Q60.43 31.19 62.49 31.19L62.48 31.18L62.60 31.30Q64.05 31.04 64.24 30.96L64.23 30.95L64.27 30.99Q65.20 30.87 65.91 30.39L65.95 30.43L65.91 30.39Q67.28 29.44 67.09 27.38L67.19 27.48L67.21 27.50Q67.02 25.11 65.32 23.57L65.27 23.52L65.22 23.47Q63.49 21.92 61.06 21.92L61.06 21.91L61.11 21.74L61.11 21.74Q61.47 21.69 62.33 21.61L62.32 21.60L62.40 21.68Q64.26 21.56 65.61 20.35L65.52 20.26L65.47 20.21Q66.84 19.01 66.99 17.18L67.07 17.26L66.96 17.15Q67.16 16.94 67.16 16.61L67.09 16.53L67.13 16.58Q67.03 14.98 65.69 14.09L65.84 14.24L65.80 14.20Q64.63 13.44 63.06 13.55L63.10 13.60L63.00 13.49Q61.83 13.45 60.64 13.86L60.55 13.77L60.50 13.72Q59.17 14.33 58.87 15.46L58.87 15.46L58.90 15.49Q58.71 16.23 58.79 16.98L58.78 16.98L58.75 16.94Q57.65 16.63 55.63 15.92L55.78 16.07L55.59 15.88Q55.37 14.24 55.41 13.42L55.43 13.44L55.44 13.45Q55.70 12.10 56.74 11.43L56.75 11.43L56.63 11.32Q58.05 10.75 59.62 10.75L59.54 10.67L59.59 10.72Q62.77 10.76 65.87 11.02L65.76 10.91L65.91 11.06Q70.74 11.33 70.44 15.03L70.44 15.03L70.57 15.15Q70.42 16.54 69.94 18.08L70.02 18.16L70.00 18.14Q69.03 21.10 66.71 22.00L66.74 22.02L66.78 22.06Q69.30 22.53 69.90 25.82L69.98 25.89L69.88 25.80Q70.15 26.96 70.22 28.94L70.15 28.87L70.24 28.96Q70.42 33.36 65.89 33.81L65.86 33.77L65.86 33.78Q65.12 33.82 59.92 34.08ZM65.08 36.33L65.12 36.37L65.04 36.29Q65.58 36.27 68.39 36.34L68.40 36.35L68.41 36.37Q70.11 36.42 71.71 35.78L71.66 35.73L71.79 35.86Q72.87 34.84 72.68 33.12L72.65 33.09L72.80 33.24Q72.69 31.93 72.39 30.21L72.38 30.20L72.34 30.16Q71.51 25.63 69.61 24.03L69.72 24.14L69.60 23.83L69.56 23.75L69.51 23.70Q71.18 22.24 71.93 17.94L71.89 17.89L71.89 17.90Q71.93 17.45 72.04 16.52L72.05 16.53L72.00 16.48Q72.19 15.84 72.12 15.17L72.17 15.22L72.14 15.20Q72.00 13.56 70.73 12.89L70.69 12.84L70.67 12.90L70.54 12.77Q70.24 11.80 69.12 11.27L69.19 11.35L69.09 11.25Q67.60 10.58 62.55 10.28L62.63 10.36L62.72 10.45Q60.90 10.20 59.33 10.20L59.43 10.30L59.36 10.23Q57.81 10.25 56.31 10.88L56.29 10.86L56.37 10.94Q55.10 11.62 55.10 13.34L55.09 13.33L55.17 13.41Q55.14 12.97 55.41 16.26L55.49 16.34L55.36 16.21Q55.70 16.33 57.31 16.93L57.29 16.90L57.24 16.86Q57.24 17.38 57.20 17.87L57.27 17.94L57.22 17.89Q57.30 18.45 57.33 18.97L57.35 18.99L57.36 19.00Q59.01 19.26 60.99 19.37L61.15 19.54L61.02 19.40Q60.90 17.38 61.99 16.56L62.14 16.71L62.16 16.73Q62.81 15.92 64.79 15.70L64.88 15.79L64.96 15.86Q65.94 15.72 66.50 15.91L66.63 16.04L66.65 16.06Q66.55 16.03 66.58 16.14L66.71 16.27L66.70 16.45L66.77 16.97L66.84 17.04Q66.67 17.05 66.63 17.20L66.68 17.25L66.72 17.29Q66.62 18.95 65.13 20.11L65.05 20.03L65.19 20.18Q64.14 20.92 62.16 21.11L62.27 21.21L62.16 21.11Q61.58 21.39 60.72 21.39L60.73 21.40L60.63 21.30Q60.66 21.62 60.81 22.29L60.90 22.38L60.94 22.43Q62.62 22.38 64.04 23.09L64.04 23.10L63.99 23.16L62.40 23.29L62.38 23.27Q62.40 23.59 62.51 24.19L62.51 24.18L62.50 24.18Q64.69 24.20 66.37 25.51L66.24 25.37L66.21 25.34Q66.56 25.85 66.86 27.45L66.91 27.50L66.86 27.45Q66.97 30.25 64.09 30.66L64.17 30.74L64.13 30.70Q62.14 31.03 61.58 31.00L61.52 30.93L61.57 30.98Q61.12 30.87 60.60 30.79L60.54 30.74L60.49 30.24L60.55 29.74L60.70 29.48L60.65 29.09L60.64 29.08Q59.87 29.32 59.08 29.51L58.95 29.38L59.05 29.48Q58.89 29.13 58.89 28.94L59.00 29.05L58.95 29.00Q59.09 28.92 59.09 28.69L58.97 28.57L59.04 28.65Q59.00 28.15 59.15 27.44L59.13 27.42L59.13 27.43Q57.41 27.76 55.58 28.10L55.52 28.04L55.45 27.97Q55.44 28.45 55.33 29.55L55.43 29.65L55.47 29.69Q55.38 30.81 55.38 31.41L55.36 31.39L55.30 31.33Q55.46 33.43 56.80 34.18L56.71 34.09L56.72 34.10Q58.25 36.41 62.89 36.23L62.73 36.07L62.91 36.25Q63.47 36.06 64.97 36.21Z"/><path fill="#52dfdf" d="M42.49 33.14L42.62 33.27L42.59 33.24Q41.87 33.15 41.20 33.19L41.12 33.11L41.12 33.11Q40.50 33.28 39.83 33.28L39.77 33.22L39.81 33.26Q40.32 29.95 40.32 26.59L40.33 26.60L40.34 26.62Q38.57 26.67 37.67 26.67L37.53 26.54L37.61 26.61Q36.83 26.65 35.03 26.58L34.97 26.51L35.01 26.55Q34.96 26.21 34.78 23.78L34.71 23.71L34.84 23.84Q37.30 24.32 40.22 24.32L40.17 24.28L40.26 24.36Q39.98 20.00 39.56 17.46L39.60 17.49L39.63 17.53Q40.40 17.62 41.18 17.62L41.20 17.64L42.83 17.66L42.81 17.64Q42.61 21.85 42.61 24.39L42.50 24.28L42.55 24.33Q44.60 24.25 47.74 23.92L47.74 23.91L47.79 23.97Q47.76 25.36 47.76 26.56L47.73 26.52L47.72 26.52Q47.39 26.45 46.60 26.48L46.64 26.52L46.57 26.45Q45.57 26.42 44.97 26.46L45.03 26.51L45.16 26.65Q45.14 26.63 42.53 26.63L42.36 26.47L42.47 29.94L42.35 29.82Q42.46 31.54 42.57 33.22ZM48.19 23.47L48.21 23.49L48.23 23.51Q46.35 23.80 44.52 23.88L44.44 23.79L44.55 23.91Q44.68 20.71 45.09 18.88L45.15 18.94L45.11 18.89Q44.50 19.03 43.11 19.18L43.12 19.18L43.20 17.06L43.35 17.21Q40.65 17.09 39.01 16.98L39.02 16.99L39.03 17.01Q39.61 20.09 39.80 23.90L39.77 23.87L39.88 23.98Q38.06 23.85 34.44 23.25L34.32 23.14L34.33 23.15Q34.75 24.47 34.75 27.05L34.76 27.06L36.20 27.00L36.08 26.88Q36.20 27.70 36.05 29.09L35.99 29.03L39.85 28.74L39.96 28.85Q39.67 31.88 39.37 33.68L39.38 33.69L39.39 33.70Q40.14 33.70 41.52 33.59L41.48 33.54L41.50 33.57Q41.60 34.35 41.57 35.65L41.48 35.57L41.42 35.50Q41.91 35.47 45.46 35.62L45.64 35.81L45.59 35.75Q44.57 32.60 44.35 28.71L44.52 28.88L44.44 28.81Q47.60 28.79 49.65 29.16L49.79 29.29L49.74 29.25Q49.58 28.34 49.58 27.41L49.50 27.32L49.57 25.53L49.49 25.45Q49.28 25.45 48.75 25.49L48.78 25.52L48.10 25.62L48.12 25.64Q48.03 24.77 48.14 23.42Z"/></svg>",
  142.     "time": 1694588381965
  143.   }
  144.   state.captchaSvg = ref(res.data)
  145.  
  146. }
  147.  
  148. const handleSubmit = (e: Event) => {
  149.   e.preventDefault();
  150.   const loginParams = { 
  151.     ...state.formState,
  152.     captcha: "",
  153.    };
  154.   // delete loginParams.username
  155.  
  156.   userStore
  157.     .Login(loginParams)
  158.     .then((res) => loginSuccess(res))
  159.     .catch((err) => requestFailed(err))
  160.     .finally(() => {
  161.       state.loginBtn = false;
  162.     });
  163.   return
  164.   state.loginBtn = true;
  165.   const validateFieldsKey =
  166.     customActiveKey.value === "tab1"
  167.       ? ["username", "password"]
  168.       : ["mobile", "captcha"];
  169.  
  170.   validate(validateFieldsKey)
  171.     .then((result) => {
  172.       // console.log(res, toRaw(formRef));
  173.       const loginParams = { ...result };
  174.       // delete loginParams.username
  175.       loginParams[!state.loginType ? "email" : "username"] =
  176.         result.username;
  177.       loginParams.password = md5(result.password);
  178.  
  179.     })
  180.     .catch((err) => {
  181.       console.log(err);
  182.       setTimeout(() => {
  183.         state.loginBtn = false;
  184.       }, 600);
  185.     });
  186. };
  187.  
  188. const setOtherUser = () => {
  189.   state.formState.username = 'test'
  190. }
  191.  
  192. // const onFinish = values => {
  193. //   authStore.login(values).then(res => {
  194. //   }).catch(err => {
  195. //     getCaptcha()
  196. //   })
  197. // };
  198. // const onFinishFailed = errorInfo => {
  199. //   console.log('Failed:', errorInfo);
  200. // };
  201. const disabled = computed(() => {
  202.   return !(state.formState.username && state.formState.password);
  203. });
  204.  
  205. getCaptcha()
  206.  
  207. </script>
  208.  
  209. <style lang="less" scoped>
  210. .login-title {
  211.   margin-bottom: 30px;
  212. }
  213.  
  214. .hr {
  215.   font-size: .9rem;
  216.   color: #575656;
  217. }
  218.  
  219. .login-form {
  220.   max-width: 400px;
  221.   background-color: #fff;
  222.   overflow: hidden;
  223.  
  224.   .login-code {
  225.     cursor: pointer;
  226.   }
  227. }
  228.  
  229. .login-btn-list {
  230.   display: flex;
  231.   flex-wrap: wrap;
  232. }
  233.  
  234. .other-login-type {
  235.   display: flex;
  236.   justify-content: space-around;
  237.   align-items: center;
  238.   font-size: 22px;
  239.  
  240.   .type-item {
  241.     cursor: pointer;
  242.  
  243.     &:hover {
  244.       // color: $color-primary !important;
  245.     }
  246.   }
  247. }
  248. </style>

registrieren

  1. <template>
  2.   <div v-show="getShow">
  3.     <h2 class="register-title">注册</h2>
  4.     <a-form loading :model="state.registerState" name="normal_register" class="register-form" @finish="onFinish"
  5.       @finishFailed="onFinishFailed">
  6.       <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
  7.         <a-input v-model:value="state.registerState.username" allowClear autocomplete="off" size="large"
  8.           placeholder="用户名">
  9.           <template #prefix>
  10.             <IconFont type="icon-yonghuming" style="font-size: 18px" />
  11.           </template>
  12.         </a-input>
  13.       </a-form-item>
  14.  
  15.       <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
  16.         <a-input-password v-model:value="state.registerState.password" allowClear autocomplete="off" placeholder="密码"
  17.           size="large">
  18.           <template #prefix>
  19.             <IconFont type="icon-mima" style="font-size: 18px" />
  20.           </template>
  21.         </a-input-password>
  22.       </a-form-item>
  23.       <a-form-item name="nickname" :rules="[{ required: true, message: '请输入昵称!' }]">
  24.         <a-input v-model:value="state.registerState.nickname" allowClear autocomplete="off" size="large"
  25.           placeholder="昵称">
  26.           <template #prefix>
  27.             <IconFont type="icon-yonghuming" style="font-size: 18px" />
  28.           </template>
  29.         </a-input>
  30.       </a-form-item>
  31.       <a-form-item name="email">
  32.         <a-input v-model:value="state.registerState.email" allowClear autocomplete="off" size="large" placeholder="邮箱">
  33.           <template #prefix>
  34.             <IconFont type="icon-yonghuming" style="font-size: 18px" />
  35.           </template>
  36.         </a-input>
  37.       </a-form-item>
  38.  
  39.       <a-form-item>
  40.         <a-button type="primary" style="width: 100%" :disabled="disabled" html-type="submit" size="large"
  41.           class="register-form-button">
  42.           注册
  43.         </a-button>
  44.       </a-form-item>
  45.       <a-form-item>
  46.         <a-button @click="handleBackLogin" style="width: 100%" size="large" class="register-form-button">
  47.           返回登录
  48.         </a-button>
  49.       </a-form-item>
  50.     </a-form>
  51.   </div>
  52. </template>
  53.  
  54. <script setup>
  55. import { reactive, ref, computed } from 'vue';
  56. const getShow = ref("register")
  57. const emit = defineEmits(["onLoginBtn"])
  58.  
  59. const state = reactive({
  60.   registerState: {
  61.     username: '',
  62.     password: '',
  63.   }
  64. })
  65.  
  66. const onFinish = values => {
  67.   authRegister(values).then(res => {
  68.     res.status && ZyNotification.success(res.message || '注册成功')
  69.     handleBackLogin()
  70.   })
  71.  
  72. };
  73. const handleBackLogin = () => {
  74.   emit("onLoginBtn")
  75. }
  76. const onFinishFailed = errorInfo => {
  77.   console.log('Failed:', errorInfo);
  78. };
  79. const disabled = computed(() => {
  80.   return !(state.registerState.username && state.registerState.password);
  81. });
  82.  
  83. </script>
  84.  
  85. <style lang="less" scoped>
  86. .register-title {
  87.   margin-bottom: 30px;
  88. }
  89.  
  90. .register-form {
  91.   max-width: 400px;
  92.   background-color: #fff;
  93.   // overflow: hidden;
  94.  
  95.   .register-form-button {
  96.     margin-right: 15px;
  97.   }
  98. }
  99. </style>

Das Obige basiert ausschließlich auf dem HTML-CSS-Stil von ant-design-vue3

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet, Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post