關於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會變化

完美解決