noob-components/packages/base/data/login-form.vue

<template>
    <el-form label-position="right" class="login-form" :model="param" ref="loginForm" :rules="rules">
        <el-form-item>
            <div class="lte-title"> {{ t('title') }} </div>
        </el-form-item>
        <el-form-item prop="userId">
            <NoobInput v-model="param.userId" :placeholder="t('pwd.userId')" :full="true"></NoobInput>
        </el-form-item>
        <el-form-item prop="password">
            <NoobInput v-model="param.password" type="password" :placeholder="t('pwd.pwd')" :full="true"></NoobInput>
        </el-form-item>
        <el-form-item>
            <NoobButton @click="login">{{ t('pwd.login') }}</NoobButton>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { FormInstance } from "element-plus";
import { NoobInput, NoobButton, Element } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";

const { t } = useI18n();
const { state } = useStore();
const { SimpleRequired } = Element;

const emit = defineEmits(["login"]);
const param = ref<any>({});
const loginForm = ref<FormInstance>();

const rules = {
    userId: [new SimpleRequired('pwd.userId')],
    password: [new SimpleRequired('pwd.pwd')]
}

const login = () => {
    if (!loginForm.value) return;
    loginForm.value?.validate((valid, fields) => {
        if (valid) {
            emit("login", param.value);
            loginForm.value?.clearValidate();
        }
    });
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.login-form {
    width: v-bind('state.size.loginWidth');
    height: v-bind('state.size.loginHeight');
}

.lte-title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: rgb(49, 89, 143);
}

.el-button {
    width: 100%;
}
</style>