zoukankan      html  css  js  c++  java
  • 中英文i18 vue参数传递

    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
        },
  • 相关阅读:
    flink源码阅读(概览)
    idea如何设置home目录
    博客园定制化从入门到精通
    CAP理论的理解
    几个常用的profiler工具对比jprofiler、vituralVM、yourkit、JVM profler
    kafka的使用经验
    netty高并发框架
    Mysql Explain 详解
    show engine innodb status解读
    Class.getResourceAsStream()与ClassLoader.getResourceAsStream()的区别
  • 原文地址:https://www.cnblogs.com/pengfei25/p/14553735.html
Copyright © 2011-2022 走看看