vue3 antv 静态登录页面

效果图

<template>
<!-- 内容区域 -->
  <div class="main">
    <div class="from">
    <!-- 表单 model是antv里边的绑定表单数据 -->
    <a-form :model="formState" ref="formRef">
      <!-- 切换 -->
      <a-tabs :activeKey="data.customActiveKey" @change="handleTabClick">
        <a-tab-pane key="tab1" tab="账号密码登录">
          <a-form-item name="account" :rules="[{required:true,message:'请输入你的用户名'},{validator:handlUsernameOrEmail}]">
              <a-input size="large" type="text" placeholder="账户名邮箱地址" v-model:value="formState.account">
                <!-- prefix:是放在input前边 vue2 写插槽    <template slot="prefix"><user-outlined /></template> -->
                 <template #prefix><user-outlined /></template>
              </a-input>
          </a-form-item>
          <a-form-item  name = "password" :rules="[{required:true,message:'请输入你的密码'},]">
            <a-input size="large" type="password" placeholder="密码" autocomplete="false" v-model:value="formState.password">
               <template #prefix><lock-outlined /></template>
            </a-input>
          </a-form-item>
        </a-tab-pane>
           <a-tab-pane key="tab2" tab="手机号登录">
            <a-form-item>
                <a-input size="large" type="text" placeholder="手机号">
                    <template #prefix><mobile-outlined/></template>
                </a-input>
            </a-form-item>
            <a-row :gutter="16">
              <a-col :span = "16">
                <a-input size="large" type="text" placeholder="验证码">
                  <template #prefix><mail-outlined /></template>
                </a-input>
              </a-col>
              <a-col :span="8">
                <!-- blcok占据一行 -->
                <a-button blcok type="primary">获取验证码</a-button>
              </a-col>
            </a-row>
          </a-tab-pane>
      </a-tabs>

      <a-form-item class="autologin">
        <a-checkbox v-model:checked="formState.rememberMe">自动登录</a-checkbox>
        <router-link to="/user/forget">忘记密码</router-link>
      </a-form-item>

      <a-form-item>
          <a-button size="large" type="primary" htmlType="submit" block @click="submitFn">登录</a-button>
      </a-form-item>

      <div class="user-login-other">
        <span>其他登录方式</span>
        <router-link :to="{ name:'register'}">注册账户</router-link>
      </div>
    </a-form>
    </div>
  </div>
</template>
<script setup>
import { UserOutlined,LockOutlined,MobileOutlined,MailOutlined } from '@ant-design/icons-vue';
import { reactive, ref, onMounted } from "vue";
const formState = reactive({
  account: "",
  password:'',
  rememberMe:true,
});
const data = reactive({
// 绑定tab的key值
  customActiveKey:"tab1",
})
const formRef = ref();
onMounted(()=>{
  console.log('ref',formRef.value);
})
// 登录事件
async function submitFn(){
  if(data.customActiveKey === 'tab1'){//根据tab1来效验不同的内容
    try{
      const values = await formRef.value.validateFields(["account","password",]);//效验账号和密码
      console.log('succes',values);
      // 根据tab切换的情况,执行不同的登录流程
    }catch(error){
      console.log('error',values);
    } 
  }

}
// 效验
function handlUsernameOrEmail(rules,value,){
  const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+){1,2}$/;
  if(regex.test(value)){
    return Promise.resolve('成功');
  }else {
    return Promise.reject('账号是邮箱，请输入正确的邮箱');
  }
}
// 点击事件
function handleTabClick(key){
  data.customActiveKey = key;
}
</script>
<style lang="less" scoped>
.main{
  display: flex;
  justify-content: center;
  align-items: center;
}
.from{
  width: 450px;
  padding: 25px;
  border-radius: 10px;
  background-color:rgba(233,233,233,0.7) ;
}
:deep(.autologin .ant-form-item-control-input-content), .user-login-other{
  display: flex;
  justify-content: space-between;
}
</style>