vue国际化样式不同解决方法
在设置界面国际化语种的同时,在html设置lang属性,也可以在body中设置
点击语言切换时候,
let html = document.getElementsByTagName('html')[0]
html.setAttribute('lang', content);
根据lang进行样式的区分
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[lang]:lang(en),
:lang(en) body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[lang]:lang(zh),
:lang(zh) body {
font-family: "Microsoft YaHei", sans-serif;
}
具体的class也可以采用
.tab {
height: 100%;
padding: 0 4px;
margin-right: 5px;
line-height: 27px;
font-size: 14px;
font-family: Microsoft YaHei;
color: #4a4e59;
&:hover {
cursor: pointer;
border-bottom: 3px solid;
}
}
.tab:lang(en){
max-width: 142px;
white-space: nowrap;
}
感谢赏阅
砥砺前行