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

阅读：评论：0

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

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&#ateElement("link");cssFile.setAttribute("rel", "stylesheet");cssFile.setAttribute("type", "text/css");cssFile.setAttribute("href", url);if (typeof cssFile!="undefined"){ElementsByTagName("head")[0].appendChild(cssFile);    }
}//移除css文件
function deleteCss(url){var targetElement= "link";var targetAttr= "href";var allSuspects&#ElementsByTagName(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].veChild(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 页面就可以切换不同语言。如果广大网友还有其它好的方法请跟我说，谢谢。

本文发布于:2024-01-31 02:27:30，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170663925124676.html

上一篇：java实现翻译

下一篇：vue 后台翻译

标签：中英文语言页面项目动态

留言与评论（共有 0 条评论）