Vue 中英文 组件 样式 写法
Vue 项目国际化样式处理
一、全局(main.js)添加自定义指令:
v-lang 会自动添加 语言对应的 class 【中:zh,英:en】
Vue.directive('lang', {
// 当被绑定的元素插入到 DOM 中时……
inserted(el) {
el.classList.add(i18n.locale);
},
});
二、在需要兼容 英文 样式的组件内添加指令
<div v-lang class="wrapper">
<h3 class="title">
<span>首页</span>
</h3>
<!-- en目录、cn目录 -->
<img src="/images/home/${i18n.locale}/test.png">
<!-- 或同一文件夹 -->
<img src="/images/home/test_${i18n.locale}.png">
<img :src="imgSrc">
</div>
<script>
export default{
name: 'home',
data() {
return {
imgSrc: require(`/images/home/${i18n.locale}/test1.png`)
}
}
}
</script>
三、编写英文对应的指令样式
添加 scoped 避免污染全局样式
<style lang="scss" scoped>
// en style
.en.wrapper .title span {
font-size: 12px;
}
</style>
原来的 title 样式
<style lang="scss" scoped>
.wrapper {
.title {
display: flex;
color: #fff;
height: $header-height;
line-height: $header-height;
span {
padding: 0 28px;
font-size: 20px;
}
}
}
</style>
- 当以后如果再有其他语言时,只需要再写一份对应语言的 style 就可以了,使用@import方式引入