VueI18n使用之表单的语言切换

效果

步骤

1.安装vue-i18n的依赖

npm install vue-i18n

2.自定义语言包

en.js

export const lang = {
    account: {
        required: {message: "account is required"},
        length: {message: "the account's length should be 2 to 8 characters"},
        placeholder: "please enter account..."
    },
    password: {
        required: {message: "password is required"},
        length: {message: "the password's length should be at least 3 characters"},
        placeholder: "please enter password..."
    },
    button: {
        login: "Login",
        reset: "Reset"
    },
    reminder: 'select language:'
};

zh,js

export const lang = {
    account: {
        required: {message: "账号必填"},
        length: {message: "长度在 2 到 8 个字符"},
        placeholder: "请输入账号..."
    },
    password: {
        required: {message: "密码必填"},
        length: {message: "长度至少为 3  个字符"},
        placeholder: "请输入密码..."
    },
    button: {
        login: "登录",
        reset: "重置"
    },
    reminder: '选择语言：',

};

3.main.js中导入依赖以及进行相关配置

在页面中可以通过改变locale值来切换语言包（zh-CN,en-US）

4.页面使用

4.1页面直接使用

如登录按钮的值：
根据自定义的语言包取值，

4.2 bind绑定赋值

5.相关代码

        <el-select v-model="lang" @change="changeLanguage(lang)">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>





export default {
        name: "LoginForm",
        data() {
            return {
                loginForm: {
                    account:"",
                    password:''
                },
                options: [{value: 'zh-CN', label: '中文(zh-CN)'}, {value: 'en-US', label: 'ENG'}],
                lang:'zh-CN'
            }
        },
        created() {
            this.setFormRules();
        },
        methods: {
            login(formName) {
                console.log(formName);
            },
            resetForm(formName) {
                //清空登录输入框
                this.$refs[formName].resetFields();
            },
            changeLanguage(lang) {
                this.$i18n.locale = lang;
                this.setFormRules();
            },
            //设置表单校验
            setFormRules: function(){
                this.rules = {
                    account: [
                        {required: true, message: this.$t('lang.account.required.message'), trigger: 'blur'},
                        { min: 2, max: 8, message: this.$t('lang.account.length.message'), trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: this.$t('lang.password.required.message'), trigger: 'blur'},
                        { min: 3, message: this.$t('lang.password.length.message'), trigger: 'blur' }
                    ]
                }
            }
        }
    }