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="$t('LoginPage.ph_account')"
                />
                <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" show-password
                    v-model="form.checkPass"
                    auto-complete="off"
                    :placeholder="$t('LoginPage.ph_pwd')"
                    @copy.native.capture.prevent="()=>{return false}"
                    @cut.native.capture.prevent="()=>{return false}"
                    @paste.native.capture.prevent="()=>{return false}"
                />
                <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="form.checked" class="remember">
                    <!-- 记住账号密码 -->{{ $t('LoginPage.label_remember') }}
                    <el-tooltip effect="dark" :content="$t('LoginPage.vaild_day_msg')" placement="top">
                        <span class="hint-text">
                            <i class="el-icon-question"></i>
                        </span>
                    </el-tooltip>
                </el-checkbox>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import modelMixins from './modelMixins';
export default {
    mixins:[modelMixins],
    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: /* "请输入账号" */this.$t('LoginPage.ph_account'),trigger: "blur"},
                    {validator:validateClearn,trigger:['change']}
                ],
                checkPass:[
                    {required: true,message: /* "请输入密码" */this.$t('LoginPage.ph_pwd'),trigger: "blur"},
                    {validator:validateClearn,trigger:['change']}
                ]
            },
            hintMessage:''
        };
    },
    watch:{
        loginCheck(newVal){
            //显示/隐藏inline-message
            if(newVal){
                this.hintMessage=/* "账号或密码错误" */ this.$t('LoginPage.error_wrong_msg')
            }else{
                this.hintMessage=''
            }
        },
        accountCheck(newVal){
            if(newVal){
                this.hintMessage=/* "账号异常，请通过验证登录" */this.$t('LoginPage.error_abnormal_msg')
            }else{
                this.hintMessage=''
            }
        }
    },
    methods: {
        changeModel(){
            this.$emit('changeModel')
        }
    },
};
</script>

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