关于elementui 切换中英文的时候，检验不实时更新的问题解决

1.系统在做中英文切换的时候，发现一个现象就是，文本类的能直接切换过来，但是，如果是从js中获取的就不会实时更新，比如form中的校验，但是将页面重新刷新的话就可以更新过来了

打开代码查看找原因，

 

 

 

 

原因：就是页面在登录的时候就加载好了获取中英文校验的js，切换中英文的时候没有重新进行获取js文件，导致还是上一次的翻译的检验，但是重新将页面刷新的话就能更新过来

分析原因：

js中导入的是一个对象，对象是引用的关系

解决办法：

 

1.首先将js里面的对象修改成函数的形式

原来的写法（rule.js）：

import i18n from '@common/langs/i18n'
import common from '@frameworks/assets/js/Common'

const requirMsg = common.getI18n(i18n.t('message.app_message_required')) // 此处为必填项
const validPhoneMsg = common.getI18n(i18n.t('message.app_message_validPhone')) // 请输入正确的手机号码
const correctPhoneAndLandlineMsg = common.getI18n(i18n.t('message.app_message_correctPhoneAndLandline')) // 请输入正确的手机号码或座机号码
const emailFormatErrorMsg = common.getI18n(i18n.t('message.app_message_emailFormatError')) // 邮箱格式不正确
const IntMsg = common.getI18n(i18n.t('message.app_message_integer')) // 只能输入正整数
const IntegerMsg = common.getI18n(i18n.t('message.app_message_int')) // 只能输入0和正整数


export default {
    requiredBlur:{ required: true, message: requirMsg, trigger: ['blur'],name:'requiredBlur'}, // 资产管理模块,新增时会直接显示校验结果,因此加多一个必填校验
    required:{ required: true, message: requirMsg, trigger: ['blur','change'],name:'required'},
    telephone: { pattern: /^1[3456789]\d{9}$/, message: validPhoneMsg, trigger: ['blur','change'],name:'telephone'},
    call: { pattern: /^(1[3456789]\d{9})|(\d{3}-\d{8}|\d{4}-\d{7})$/, message: correctPhoneAndLandlineMsg, trigger: ['blur','change'],name:'call'},
    email:{pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: emailFormatErrorMsg, trigger: ['blur','change'],name:'email'},
    int: { pattern: /^\d+$/, message: IntMsg, trigger: ['blur','change'],name:'int'},
    integer: { pattern: /^\d+$/, message: IntegerMsg, trigger: ['blur','change'],name:'integer'},
    float: { pattern: /^(-)?\d+(\.\d+)?$/, message: FigureMsg, trigger: ['blur','change'],name:'float'}
}
</script>

修改后的写法 函数（_rule.js）

import i18n from '@common/langs/i18n'
import common from '@frameworks/assets/js/Common'

export default {
    required:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_required'))}},
    telephone:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_validPhone'))}},
    call:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_correctPhoneAndLandline'))}},
    email:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_emailFormatError'))}},
    int:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_integer'))}},
    integer:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_int'))}},
    float:(params)=>{ return {...params, message: common.getI18n(i18n.t('message.app_message_figure'))}},
}

2.然后再在表单验证中（selfForm.js)中做修改，当中英文变化的时候重新调用获取校验的函数

原来的selfForm.js

<self-form>
    :ref="formInfos.name"
    :label-width="`${formInfos.labelWidth}px`"
    :model="fields"
    :name="formInfos.name"
    :rules="typeof formInfos.rules==='function'?formInfos.rules(fields):formInfos.rules"
    :inline="formInfos.inline"
    :size="formInfos.size"
</self-form>

 

修改后的selfForm.js(部分代码)

<template>
    <div>
        <el-form 
            :ref="formInfos.name"
            :label-width="`${formInfos.labelWidth}px`"
            :model="fields" 
            :name="formInfos.name"
            :rules="rules"
            :inline="formInfos.inline" 
            :label-position="formInfos.name=='searchForm'?'left':'right'" 
            :size="formInfos.size"
            :validate-on-rule-change="false"
            @submit.native.prevent 
            :class="[{'demo-form-inline':formInfos.inline},'demo-ruleForm','self-form',formInfos.className,formInfos.name]"
            :style="formInfos.style"
        >
        </el-form>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Vue from 'vue'
import _rules from '@frameworks/assets/js/_Rules'
export default {
    name: 'self-form',
    computed:{
        ...mapGetters(['base_lang']),
        computedRules(){
           return typeof this.formInfos.rules === 'function'?this.formInfos.rules(this.fields):this.formInfos.rules
        },
        rules(){
            for(let key in this.computedRules){
                const rules = [];
                for(let item of this.computedRules[key]){
                    if(typeof(item) == 'object' && item.name && _rules[item.name]){
                        rules.push(_rules[item.name].call(null,item));
                    }else{
                        rules.push(item);
                    }
                }
                this.computedRules[key] = rules;
            }
            return this.computedRules;
        }
    },
}
</script>

因为切换中英文this.formInfos.rules会变化

完美解决