Vue项目中动态切换中英文语言(实现无需页面reload)

星云好酷

已于 2022-11-18 10:56:49 修改

阅读量2.6k

点赞数 1

分类专栏： vue经验文章标签： vue.js javascript 前端

于 2020-08-03 15:21:39 首次发布

本文链接：https://blog.csdn.net/u014728574/article/details/107763305

版权

vue经验专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue项目中动态切换中英文语言(实现无需页面reload)

如题，在项目工作中总会有切换语言的需求，我们脑中很快就能浮现出

Vue.i18n.locale = 'zh';  //或者
Vue.i18n.locale = 'en';

而因为中英文字在同一种字体下可能会导致页面布局，效果等的不同，因此实际上在不想页面reload的前提下，我们需要实现动态加载不同css文件。

动态加载不同css文件

因为预加载的原因，通过判断使用import(url)这种方式在项目发布后会直接将import里面的样式表加载，达不到动态的效果，所以这种方法不行。
在 <head>中加入 <link/> (如下), 注意href 是static下的（请按照项目框架的相关路径设置）

<link rel="stylesheet" type="text/css" href="static/css/chinese.css">

接下来创建引入css文件的 Javascript:

//引入css文件
function addCss(url){
    var cssFile=document.createElement("link");
    cssFile.setAttribute("rel", "stylesheet");
    cssFile.setAttribute("type", "text/css");
    cssFile.setAttribute("href", url);

    if (typeof cssFile!="undefined"){
        document.getElementsByTagName("head")[0].appendChild(cssFile);    
    }
}

//移除css文件
function deleteCss(url){
    var targetElement= "link";
    var targetAttr= "href";
    var allSuspects=document.getElementsByTagName(targetElement);

    for (var i=allSuspects.length; i>=0; i--){
        if (allSuspects[i] && allSuspects[i].getAttribute(targetAttr)!=null && allSuspects[i].getAttribute(targetAttr).indexOf(url)!=-1){
            allSuspects[i].parentNode.removeChild(allSuspects[i]);
        }
    }
}

export default {addCss,deleteCss};

selectLanguage(lang){
  this.langValue=lang;
  localStorage.setItem('language',lang);
  this.$i18n.locale=lang;
  if(lang=='zh'){
    operateCss.addCss('static/css/chinese.css');
  }else{
    operateCss.deleteCss('static/css/chinese.css');
  }
},

时间格式在不同的语言中是不相同的

使用Intl ,它提供精确的字符串对比，数字格式化和日期时间格式化

let now = new Date();
// 采用德语(德国) 的时间格式
let dateTime-de = new Intl.DateTimeFormat('de-DE', {timeZone: "UTC"});
// 采用美语(美国) 的时间格式
let dateTime-us = new Intl.DateTimeFormat('en-US', {timeZone: "UTC"});
let formatedDate-de = dateTime-de.format(now);
let formatedDate-us = dateTime-us.format(now);
console.log(formatedDate-de);    // 18.11.2022
console.log(formatedDate-us);    // 11/18/2022

另一种其实跟上面的差不多，在<head>中引入<style>，但这是在样式比较少的情况下比较好，如果比较多要引入css文件

这种效果达到了不需要reload 页面就可以切换不同语言。如果广大网友还有其它好的方法请跟我说，谢谢。

星云好酷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue项目中动态切换中英文语言(实现无需页面reload)

Vue项目中动态切换中英文语言(实现无需页面reload)如题，在项目工作中总会有切换语言的需求，我们脑中很快就能浮现出Vue.i18n.locale = 'zh'; //或者Vue.i18n.locale = 'en';而因为中英文字在同一种字体下可能会导致页面布局，效果等的不同，因此实际上在不想页面reload的前提下，我们需要实现动态加载不同css文件。动态加载不同css文件因为预加载的原因，通过判断使用import(url)这种方式在项目发布后会直接将import里面的样式表加载，
复制链接

扫一扫