1.传递多个参数的情况
组态的时候需要中英文,做校验,但是校验的函数又是传参的形式,所以中英文的时候就翻译不出
解决办法
common.getI18n(i18n.t('message.app_message_lengthLimit',[min,max]))
//长度限${0}~${1} lengthLimit:(trigger='change',min=0,max=32)=>{ const message = common.getI18n(i18n.t('message.app_message_lengthLimit',[min,max])); //const validator = {min,max,message,trigger}; const validator = { validator(rule, value, callback) { if(value && value.length >= min && value.length <= max){ callback(); }else{ callback(new Error(message)); } }, trigger }; return trigger === 'both' ? [{...validator,trigger:'change'},{...validator,trigger:'blur'}] : validator; },
翻译文件:
//message app_message_cantOnlySpace:'不能只空格',//不能只空格 app_message_isExisted:'{0}已经存在',//{0}已经存在 app_message_lengthLimit:'长度限{0}~{1}',//长度限{0}~{1} app_message_noSpecialChar:'不能包含特殊字符',//不能包含特殊字符 app_message_numberRange:'请输入{0}~{1}的整数',//请输入{0}~{1}的整数 app_message_required:'此项为必填',//此项为必填
然后再在页面调用:
<el-form-item label="名称" prop="pageName" :rules="[...rules.lengthLimit('both',1,32),...rules.cantOnlySpace('both'),...rules.noSpecialChar('both',false)]"> <el-input v-model="canvasSetting.pageName" @input="setCanvasParam($event,'pageName')" @focus="onFocus" @blur="onBlur" maxlength="32"></el-input> </el-form-item>
getI18n函数
//如果获取不到国际化则取默认值 getI18n(val) { return val.startsWith('message') ? (val.split('.')[1] == 'undefined' ? '' : val.split('.')[1]) : val },