You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
68 lines
1.8 KiB
2 years ago
|
<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>
|