eta_front/src/views/login_manage/OrdinaryModel.vue

<template>
    <div class="ordinary-model-wrap model-wrap">
        <el-form 
            ref="modelForm" 
            label-position="right" 
            label-width="0px"
            :model="form"
            :rules="rules">
            <el-form-item prop="account">
                <el-input
                    type="text"
                    v-model="form.account"
                    auto-complete="off"
                    placeholder="请输入用户名"
                />
                <span class="inline-message el-form-item__error" 
                    v-show="(loginCheck||accountCheck)&&form.account.length">
                    {{hintMessage}}
                </span>
            </el-form-item>
            <el-form-item prop="checkPass">
                <el-input
                    type="password"
                    v-model="form.checkPass"
                    auto-complete="off"
                    placeholder="请输入密码"
                />
                <span class="inline-message el-form-item__error" 
                    v-show="(loginCheck||accountCheck)&&form.checkPass.length">
                    {{hintMessage}}</span>
            </el-form-item>
            <el-form-item class="remember-cont" prop="checked">
                <el-checkbox v-model="checked" class="remember">
                    记住账号密码
                    <el-tooltip effect="dark" content="有效期60天" placement="top">
                        <span class="hint-text">
                            <i class="el-icon-question"></i>
                        </span>
                    </el-tooltip>
                </el-checkbox>
                <el-button type="text" style="font-size: 16px;" @click="changeModel">忘记密码</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props:{
        loginCheck:{
            type:Boolean,
            default:false
        },
        accountCheck:{
            type:Boolean,
            default:false
        }
    },
    data() {
        const validateClearn = (rule,value,callBack)=>{
            if(this.loginCheck||this.accountCheck){
                this.$emit('clearnHint')
            }
            callBack()
        }
        return {
            form:{
                account:'',
                checkPass:'',
                checked:false
            },
            rules:{
                account:[
                    {required: true,message: "请输入账号",trigger: "blur"},
                    {validator:validateClearn,trigger:['change']}
                ],
                checkPass:[
                    {required: true,message: "请输入密码",trigger: "blur"},
                    {validator:validateClearn,trigger:['change']}
                ]
            },
            hintMessage:''
        };
    },
    watch:{
        loginCheck(newVal){
            //显示/隐藏inline-message
            if(newVal){
                this.hintMessage="账号或密码错误"
            }else{
                this.hintMessage=''
            }
        },
        accountCheck(newVal){
            if(newVal){
                this.hintMessage="账号异常，请通过验证登录"
            }else{
                this.hintMessage=''
            }
        }
    },
    methods: {
        changeModel(){
            this.$emit('changeModel')
        }
    },
};
</script>

<style scoped lang="scss">
@import "./css/formStyle.scss";
</style>