3-代码抽离

提示

基于第二步编辑的代码

文件结构如图：

1. 抽离登录界面表单

1. 在 components 文件夹内创建 LoginForm.vue 文件，并将登陆表单抽离到此处

<!-- 组件化 -->
<template>
    <el-form ref="loginForm" :model="loginUser" :rules="rules" class="loginForm sign-in-form">
        <div class="titletext">登录Demo</div>
        <el-form-item prop="email">
            <el-input v-model="loginUser.email" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="loginUser.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleLogin('loginForm')" class="submit-btn">登陆</el-button>
        </el-form-item>
         <div class="register-btn" >立即注册</div>
    </el-form>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'

//  setup 中使用 defineProps 来获取父组件传递的值
const props = defineProps({
    loginUser: {
        type: Object,
        required: true
    },
    rules: {
        type: Object,
        required: true
    }
})

// @ts-ignore
const { ctx } = getCurrentInstance()

const handleLogin = (formName: String): void => {
    ctx.$refs[formName].validate((valid: boolean) => {
        if (valid) {
            alert('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>

<style lang="less">

.loginForm {
    position: relative;
    top: 10px;
}

.titletext {
    width: 100%;
    text-align: center;
    color: #409EFF;
    font-size: 24px;
    margin: -20px 0 20px 0;
}

.submit-btn {
    width: 100%
}

.register-btn {
    text-align: center;
    font-size: 0.5rem;
    color: cornflowerblue;
    cursor: pointer;
}

</style>

2. 抽离登陆数据验证

1. 在 src 文件夹内创建 utils 文件夹，接着在utils 文件夹内创建 loginValidators.ts 文件 并将数据验证抽离到此处

// 登录表单数据验证

import { reactive } from 'vue'

interface User{
    email: string
    password: string
}

export const loginUser = reactive<User>({
    email: '',
    password: ''
})

// 配置规则
interface Rules{
    email:{
        type: string
        message: string
        required: boolean
        trigger: string
    }[];
    password:({
        message: string
        required: boolean
        trigger: string
        min?: undefined
        max?: undefined
    } | {
        min: number
        max: number
        message: string
        trigger: string
        required?: undefined
    })[]
}

export const rules = reactive<Rules>({
    email: [
        {
            type: 'email',
            message: '邮箱格式有误',
            required: true,
            trigger: 'blur'     // 元素失去焦点的时候触发
        }
    ],
    password: [
        {
            message: '密码为空',
            required: true,
            trigger:'blur'
        },
        {
            min: 6,
            max: 20,
            message: '密码长度范围必须在 6~20 字符内',
            trigger: 'blur'
        }
    ]
})

3. 组件以及验证ts的引入

1. 将组件 LoginForm.vue 和验证ts loginValidators.ts 引入 LoginRegister.vue，引入操作如下

• 1. 在script里面 import 组件

<script lang="ts" setup>
import { loginUser, rules } from "@/utils/loginValidators"  // 导入登录验证 ts
import LoginForm from "@/components/LoginForm.vue"; // 导入登陆组件
</script>

2. 删除 LoginForm.vue 内的表单数据，在 template 里面写入组件

<LoginForm :loginUser="loginUser" :rules="rules" />

<template>
    <div class="container">
        <div class="forms-container">
            <div class="loginbgicon"></div>
            <div class="signin-signup">
                <div class="signbox">
                    <!-- 登陆 -->
                    <LoginForm :loginUser="loginUser" :rules="rules" />
                </div>
            </div>
        </div>
    </div>
</template>