mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-06 03:57:50 +08:00
90 lines
2.4 KiB
Markdown
90 lines
2.4 KiB
Markdown
<!--
|
||
* @Author: Vinton
|
||
* @Date: 2022-08-22 11:08:11
|
||
* @Description: file content
|
||
-->
|
||
# i18n 文本多语言解决方案
|
||
|
||
```javascript
|
||
import { createI18n } from 'vue-i18n'; // 引入第三方最新的i18n注意版本
|
||
|
||
/**
|
||
* @description: 加载当前配置的语言配置目录，随意添加
|
||
*/
|
||
export function loadLang() {
|
||
const modules: Record<string, any> = import.meta.glob('./lang/*.ts', { eager: true });
|
||
const langs: Record<string, any> = {};
|
||
|
||
for (const path in modules) {
|
||
const name = path.replace(/(\.\/lang\/|\.ts)/g, '');
|
||
langs[name] = modules[path].lang;
|
||
}
|
||
return langs;
|
||
}
|
||
|
||
export const i18n = createI18n({
|
||
// globalInjection: true,
|
||
// legacy: false,
|
||
locale: 'zh-cn', // 默认语言，当前这里的数据要跟配置的lang目录下面的文件名字前缀一致
|
||
fallbackLocale: 'zh-cn',
|
||
messages: loadLang(), // 记载当前引入的语言目录的处理过后的数据
|
||
});
|
||
|
||
/**
|
||
* @description: 切换当前多语言
|
||
*/
|
||
export function setLang(locale?: string) {
|
||
if (locale) {
|
||
localStorage.setItem('lang', locale);
|
||
}
|
||
i18n.global.locale = locale || localStorage.getItem('lang') || '';
|
||
}
|
||
```
|
||
|
||
# css图片解决方案
|
||
|
||
目前在业务开发中，CSS 的样式多语言也会经常用到，可能一些图片的字体比较复杂，代码很难实现。或者我们为了减少多语言的配置，加快开发效率也会使用多语言的配置，目前这里提供 scss 的图片多语言的方案
|
||
|
||
```css
|
||
@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
|
||
width: $width;
|
||
height: $height;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
@include loop-lang-bg($preUrl, $posUrl);
|
||
}
|
||
// 背景图多语言
|
||
@mixin loop-lang-bg($preUrl, $posUrl) {
|
||
$list: zh-cn, en-us; // 配置需要的多语言，根据项目来
|
||
@each $i in $list {
|
||
&.#{$i} {
|
||
background-image: url('#{$preUrl}/#{$i}/#{$posUrl}');
|
||
}
|
||
}
|
||
}
|
||
```
|
||
## 定义图片的目录格式
|
||
```bash
|
||
├── button
|
||
│ ├── en-us
|
||
│ │ └── confirm.png
|
||
│ ├── zh-cn
|
||
│ │ └── confirm.png
|
||
```
|
||
|
||
## HTML的使用方式
|
||
|
||
```html
|
||
<template>
|
||
<div :class="['btn-confirm', i18n.global.locale]"></div>
|
||
</template>
|
||
<script lang="ts" setup name="HomePage">
|
||
import { i18n } from '/@/i18n';
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.btn-confirm {
|
||
@include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
|
||
}
|
||
</style>
|
||
```
|