页面展示
一、跳转到注册页面
1、创建注册页面(register)
<<template>
<!-- 根div -->
<div class="login_container">
<div class="login_background">
</div>
<!-- 登陆表单 -->
<div class="login_zhongform">
<div >
<h3 class="title">注册</h3>
<el-radio-group v-model="size" label="size control">
<el-radio-button value="large">large</el-radio-button>
<el-radio-button value="default">default</el-radio-button>
<el-radio-button value="small">small</el-radio-button>
</el-radio-group>
<el-radio-group v-model="labelPosition" label="position control">
<el-radio-button value="left">Left</el-radio-button>
<el-radio-button value="right">Right</el-radio-button>
<el-radio-button value="top">Top</el-radio-button>
</el-radio-group>
</div>
<br />
<el-form
ref="form"
style="max-width: 600px"
:model="sizeForm"
status-icon
:rules="rules"
label-width="auto"
:label-position="labelPosition"
:size="size"
>
<el-form-item label="账号" prop="username">
<el-input v-model="sizeForm.username" placeholder="请输入账号" autocomplete="off" >
<template #prefix>
<el-icon class="el-input__icon"><User /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="sizeForm.password" type="password" placeholder="请输入密码" autocomplete="off" >
<template #prefix>
<el-icon class="el-input__icon"><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="sizeForm.confirmPassword" type="password" placeholder="请再次输入密码" autocomplete="off" >
<template #prefix>
<el-icon class="el-input__icon"><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item class="element">
<el-button type="primary" @click="submitForm(form)">注册</el-button>
<el-button @click="resetForm(form)">重置</el-button>
<el-button @click="quit()">退出</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script lang="ts" setup>
// 导入 ref
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 作用:进行路由跳转、动态显示内容
import { useRouter } from 'vue-router';
const router = useRouter();
// 设置进入页面时,默认的两个按钮
const size = ref('large')
const labelPosition = ref('left')
const form = ref<FormInstance>()
const sizeForm = reactive({
username: '',
password: '',
confirmPassword: ''
});
// 验证用户名
const validateUsername = (rule:any,value: any, callback: any) => {
if (value === '') {
callback(new Error('用户名不能为空!'))
} else {
callback()
}
}
// 验证密码
const validatePass = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('密码不能为空!'))
} else {
if (sizeForm.confirmPassword !== '') {
if (!form.value) return
form.value.validateField('confirmPassword', () => null)
}
callback()
}
}
// 确认密码
const validatePass2 = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请重新输入密码'))
} else if (value !== sizeForm.password) {
callback(new Error("两次密码不一致!"))
} else {
callback()
}
}
const rules = reactive<FormRules<typeof sizeForm>>({
password: [{ validator: validatePass, trigger: 'blur' }],
confirmPassword: [{ validator: validatePass2, trigger: 'blur' }],
username: [{ validator: validateUsername, trigger: 'blur' }],
})
// 注册按钮
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log('submit!')
router.push('/login');
} else {
console.log('error submit!')
return false
}
})
};
// 重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
};
// 退出
function quit(){
router.push('/login');
};
</script>
<style lang="scss" scoped>
.login_container {
display: flex; /* 使用flex布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 97vh; /* 设置高度为视口高度 */
.login_background{
flex: 1;
// 背景图
background-image: url('../assets/background/2.jpg');
background-size: 100% 100% ;
height: 97vh;
}
}
// 设置注册文字
.title {
margin-bottom: 40px;
font-size: 40px; /* 设置字体大小为40像素 */
// display: flex;
// justify-content: space-evenly;
margin-left: 30%;
color: rgb(112 161 219);
}
// 设置右边的表单整体框架
.login_zhongform{
flex: 1; /* 占据剩余空间 */
margin-left: 10%;
margin-top: -10%;
}
// 整体表单的位置
.el-radio-group {
margin-right: 12px;
}
// 设置三行框的位置
.el-form-item--default {
--font-size: 14px;
--el-form-label-font-size: var(--font-size);
margin-left: -100px
}
// 表单框的高度和宽度
.el-input {
height: 50px; /* 设置输入框的高度 */
width: 75%;
}
// 设置注册和退出那行
.element{
margin-top: 5%;
margin-right: unset;
margin-left: 30%;
}
</style>
2、在Login页面增加跳转路径
对上次的代码进行部分更改,对上次忘记密码进行如下修改。
<!-- 记住我和账号注册 -->
<div class="rememberMe">
<el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
<!-- 账号注册 -->
<!-- <el-button type="primary" @click="handleRegister()">账号注册</el-button> -->
<router-link to="/register" class="zhangHaoZhuCe">账号注册?</router-link>
</div>
3、配置路由
在src/router/index.js下配置路由
import { createRouter, createWebHistory } from 'vue-router'
// 其他引用。。。
import Register from '../views/Register.vue'
//配置路由规则
const constRouter = [
// 其他路由配置。。。
// 配置注册路由
{
path: '/register', // 添加register路由规则
name: 'Register',
component: Register
},
];
// 导出router
export default router