ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue实现中英文切换 i18n国际化中英文切换,h5实现中英文切换

2021-09-08 10:31:39  阅读:211  来源: 互联网

标签:center language title 中英文 js 切换 i18n message h5


先说一下项目中所需要引入的文件

下载一个 vue-i18n.min.js 文件这个是需要引入到页面的

自己新建一个存放中英文的js文件,这里我的存放中英文的js文件是language.js

为了能让各位码友快速看到效果,直接上所有代码

css

html{background: #fff;}
input{border: 1px solid rgb(54, 49, 49);}
.change_language_box{width: 100%;border-bottom: 1px solid #eee;}
.change_language{width: 96%;height: 40px;margin:auto;display: flex;align-items: center;justify-content: space-between;}
.login_box{height: 200px;width: 500px; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.my_title{text-align: center;margin-top: 20px;}
.ipt{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.ipt_ipt{width: 220px;height: 30px;border-radius: 3px;}
.ipt_box_one{display: flex;align-items: center;justify-content: center; margin-top: 40px;}
.ipt_box_two{display: flex;align-items: center;justify-content: center; margin-top: 10px;}
.btn{display: block; width: 70%;height: 30px;line-height: 30px;text-align: center;margin: auto;background: rgb(5, 230, 117);color: #fff;border-radius: 15px;margin-top: 20px;}

html

<div id="app">
    <div class="change_language_box">
        <div class="change_language">
            <p>{{$t("message.language")}}</p>
            <select v-model="selectClassEnd" @change="selectClass($event)">
                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
                    {{options.title}}
                </option>
            </select>
        </div>
    </div>
    <div class="login_box">
        <div class="my_title">{{$t("message.title")}}</div>
        <div class="ipt">
            <div class="ipt_box_one">
                <span>{{$t("message.number")}}:</span>
                <input class="ipt_ipt" type="text" :placeholder="$t('message.enter_number')">
            </div>
            <div class="ipt_box_two">
                <span>{{$t("message.password")}}:</span>
                <input class="ipt_ipt" type="text" :placeholder="$t('message.input_password')">
            </div>
        </div>
        <button class="btn">{{$t("message.login")}}</button>
    </div>
</div>

js

<script src="./js/language.js"></script>    //这里是自己新建存放中英文的js文件
<script src="./js/vue.min.js"></script>  
<script src="./js/vue-i18n.min.js"></script>  //这里是需要你自己下载的i18n的国际化js文件
<script>
    const i18n = new VueI18n({
        locale: 'cn', // set locale
        messages: messages , // set locale messages
    });
    var vm = new Vue({
        el: '#app',
        i18n,
        data: function () {
            return {
            data: this.$t('message.data'),
                        selectClassData:[ //类别选择数据或者从后台获取数据
                            {id:1,title:"中文"},
                            {id:2,title:"en"},
                        ],
                        selectClassEnd:"",//类别默认选择
            }
            },
        methods: {
                    //类别选中
                    selectClass(event){
                        this.selectClassEnd = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称
                        if(this.selectClassEnd==1){
                            i18n.locale = 'cn'
                        }else{
                            i18n.locale = 'en'
                        }
                    }
        },
                created(){
                    this.selectClassEnd=this.selectClassData[0].id
                }
    })
</script>    

新建language.js文件

language.js

const messages={
    cn: {
        message: {
            "language":"语言",
            "title": "欢迎来到我的世界",
            "number": "账号",
            "password": "密码",
            "login":"登入",
            "enter_number":"请输入账号",
            "input_password":"请输入密码",
        }
    },
    en: {
        message: {
            "language":"language",
            "title": "Welcome to my world",
            "number": "account number",
            "password": "Password",
            "login":"Login",
            "enter_number":"Please input a account number",
            "input_password":"Please input a password",
        }
    }
}

将下载的vue-i18n.min.js和language.js引入到页面就可以了

这里要注意一下,input标签和div、p标签的中英文写法不太一样,input的placeholder是不需要双大括号

效果图

 

 

中文

英文

希望我的笔记能对大家有帮助,给我点个赞,谢谢

标签:center,language,title,中英文,js,切换,i18n,message,h5
来源: https://www.cnblogs.com/srqsl/p/15241579.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有