以下是一个简化的Vue 3和TypeScript项目中登录模块的代码示例。假设已经有一个基本的Vue 3项目设置，并且已经安装了Element Plus UI库。
<template>
<el-form :model="loginForm" :rules="rules" ref="loginFormRef" @submit.prevent="submitForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="Username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="Password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">Login</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
interface LoginForm {
username: string;
password: string;
}
export default defineComponent({
setup() {
const loginFormRef = ref<FormInstance>();
const loginForm = reactive<LoginForm>({
username: '',
password: ''
});
const rules = {
username: [
{ required: true, message: 'Please input username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please input password', trigger: 'blur' },
{ min: 6, max: 12, message: 'Password length should be 6 to 12 characters', trigger: 'blur' }
]
};
const submitForm = () => {
loginFormRef.value?.validate((valid: boolean) => {
if (valid) {
// 登录逻辑
console.log('Login form is valid. Submitting...');
} else {
console.log('Login form is invalid. Please correct the errors.');
return false;
}
});
};
return {
loginFormRef,
loginForm,
rules,
submitForm
};
}
});
</script>这段代码展示了如何使用Vue 3和TypeScript创建一个简单的登录表单。它使用了Element Plus的<el-form>组件来处理表单的状态和验证，以及<el-input>和<el-button>组件来渲染输入框和按钮。代码中的loginFormRef是一个响应式引用，指向登录表单的实例，用于在JavaScript代码中访问表单的方法和属性。loginForm是一个响应式对象，包含登录所需的用户名和密码数据。rules对象定义了表单验证规则，确保用户输入的数据是有效的。submitForm方法在表单被提交时触发，它使用loginFormRef来执行验证，并处理登录逻辑（在这个例子中，只是打印信息）。