【项目】Vue3+TS CMS 登录模块搭建

以下是一个简化的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来执行验证，并处理登录逻辑（在这个例子中，只是打印信息）。