analysis/src/views/login/index.vue

<template>
    <div class="login-body">
        <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px" size="large">
            <el-form-item prop="username">
                <el-input v-model="formValue.username" clearable placeholder="账号" />
            </el-form-item>
            <el-form-item class="mt-8" prop="password">
                <el-input v-model="formValue.password" clearable placeholder="密码" show-password type="password" @keyup="passwordKeyUp" />
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="checkbox" label="记住密码" />
            </el-form-item>
            <el-form-item class="mt-8">
                <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import { formValidate } from 'js-fast-way'

//初始化
const router = useRouter()
const store = useAppStore()

onMounted(() => {
    store.clearStoreData() //先清理下缓存
})

//表单
const formRef = ref(null)
const checkbox = ref(false)
const formValue = ref({ username: '', password: '' })
const formRules = {
    username: {
        required: true,
        message: '请输入账号',
        trigger: 'blur',
    },
    password: {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
    },
}
const passwordKeyUp = (e) => {
    if (e.key === 'Enter') {
        formValidateClick()
    }
}

//登录
const loading = ref(false)
const formValidateClick = async () => {
    const formRes = await formValidate(formRef.value)
    if (!formRes) return false
}
</script>

<style lang="scss">
@import "~src/styles/view/login.scss";
</style>