vue3+vite+ts日常学习，登录页面，项目笔记（3）

最新推荐文章于 2024-04-28 16:03:45 发布

oldfour_0830_9674

最新推荐文章于 2024-04-28 16:03:45 发布

阅读量220

点赞数 1

分类专栏： vue3.0 文章标签：学习 javascript vue.js

本文链接：https://blog.csdn.net/qq_41163341/article/details/129322020

版权

vue3.0 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

当前文件目录结构

│  App.vue
│  env.d.ts
│  index.css
│  main.ts
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.ts
│
├─store
├─utils
└─view
    ├─home
    │      index.vue
    │
    └─login
            index.vue

登录页实现

<template>
  <div class="base flex flex-col items-center">
    <h1 class="text-5xl m-32">XXX后台管理登录页面</h1>
    <div class="bg-gray-50 min-h-270 w-1/4  rounded-3xl p-10 shadow-xl">
      <p class="text-xl pb-5 ...">请输入账号密码</p>
      <el-form
        label-position="left"
        label-width="60px"
        :model="formLabelAlign"
        :rules="rules"
      >
        <el-form-item label="账号" prop="username" >
          <el-input v-model="formLabelAlign.username" clearable placeholder="请输入账号，admin" />
        </el-form-item>
        <el-form-item label="密码" prop="passwrod" >
          <el-input type="passwrod" show-password v-model="formLabelAlign.passwrod" clearable placeholder="请输入密码,123456"/>
        </el-form-item>
      </el-form>
      <el-button class="w-1/2 mt-6" type="primary">登录</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import type { FormRules } from 'element-plus'
interface user {
  username: string,
  passwrod: string
}

const formLabelAlign = reactive<user>({
  username: '',
  passwrod: '',
})
const rules = reactive<FormRules>({
  username:[
    { required: true, message: '账号不能为空', trigger: 'blur' },
  ],
  passwrod:[
    {
      required:true,message: '密码不能为空', trigger: 'blur'
    }
  ]
})
</script>

<style lang="less">
.base {
  background: rgba(64, 64, 194, 0.1);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>