Skip to content

Commit c1ed97f

Browse files
xnx3xnx3
committed
增加 vue3原生的切换语言入口
1 parent 6a66530 commit c1ed97f

8 files changed

Lines changed: 289 additions & 5 deletions

File tree

‎extend/vue/vue3/LanguageSelect.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# VUE3
2+
3+
## 接入 vue3 方式使用 translate.js
4+
http://translate.zvo.cn/4041.html
5+
6+
## 页面上出现语言切换的Select下拉切换菜单
7+
8+
### 效果
9+
见下图右上角的多语言切换
10+
![](./resource/preview.png)
11+
这个多语言切换的 Select 很原始，你可以对它使用CSS进行美化、或自定义其html显示方式。具体可参考以下文档。
12+
另外如果你用其他UI框架，也可以直接进行使用：
13+
* ArcoDesign - [Github](https://github.com/xnx3/translate/tree/master/extend/ArcoDesign/Vue3) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/ArcoDesign/Vue3)
14+
* naiveUI - [Github](https://github.com/xnx3/translate/tree/master/extend/naiveUI) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/naiveUI)
15+
16+
### 代码
17+
18+
比如要在 index.vue 页面上显示切换语言的 select 下拉菜单，那么 index.vue 页面中，要进行的操作：
19+
先在 index.vue 中，加入一行，导入此UI框架的多语言切换Select
20+
````import LanguageSelect from 'i18n-jsautotranslate/vue/vue3/LanguageSelect.vue';````
21+
然后在要显示select菜单的位置，直接加入
22+
````<LanguageSelect/>````
23+
即可。
24+
最后，可以使用css样式来进行自定义美化，比如要将这个语言切换放到页面的右上角：
25+
````
26+
/* 多语言切换Select */
27+
.LanguageSelect {
28+
position: fixed;
29+
top: 20px;
30+
right: 80px;
31+
}
32+
````
33+
注意，这个多语言切换的 select ，它的class 名字为 LanguageSelect
34+
35+
完整的示例代码如下：
36+
````
37+
<template>
38+
<div class="login">
39+
<h3 class="login-logo">
40+
Logo
41+
</h3>
42+
43+
<!-- 多语言切换的 Select 下拉选择 -->
44+
<LanguageSelect/>
45+
</div>
46+
</template>
47+
48+
<script setup>
49+
import { computed, ref } from 'vue'
50+
import LanguageSelect from 'i18n-jsautotranslate/vue/vue3/LanguageSelect.vue';
51+
</script>
52+
53+
<style scoped>
54+
.LanguageSelect {
55+
position: fixed;
56+
top: 20px;
57+
right: 80px;
58+
}
59+
</style>
60+
````
61+
62+
### 自定义切换语言的html代码
63+
修改
64+
````
65+
<LanguageSelect/>
66+
````
67+
为：
68+
````
69+
<script setup>
70+
//获取该用户之前是否有切换过语言，获取其最后一次切换的是什么语种，详细参考： http://translate.zvo.cn/4074.html
71+
const language = window.translate.language.getCurrent();
72+
</script>
73+
<LanguageSelect>
74+
<!-- 使用作用域插槽，直接使用子组件传递过来的数据和方法 -->
75+
<template #default="{ LanguageSelectLanguageList, LanguageSelectOnChange }">
76+
<select
77+
v-model="language"
78+
@change="LanguageSelectOnChange"
79+
class="ignore LanguageSelect"
80+
>
81+
<option value="" disabled>Please select language</option>
82+
<option v-for="option in LanguageSelectLanguageList" :key="option.id" :value="option.id">
83+
{{ option.name }}
84+
</option>
85+
</select>
86+
</template>
87+
</LanguageSelect>
88+
````
89+
90+
完整的示例代码如下：
91+
````
92+
<template>
93+
<div class="login">
94+
<h3 class="login-logo">
95+
Logo
96+
</h3>
97+
98+
<!-- 多语言切换的 Select 下拉选择 -->
99+
<LanguageSelect>
100+
<!-- 使用作用域插槽，直接使用子组件传递过来的数据和方法 -->
101+
<template #default="{ LanguageSelectLanguageList, LanguageSelectOnChange }">
102+
<select
103+
v-model="language"
104+
@change="LanguageSelectOnChange"
105+
class="ignore LanguageSelect"
106+
>
107+
<option value="" disabled>Please select language</option>
108+
<option v-for="option in LanguageSelectLanguageList" :key="option.id" :value="option.id">
109+
{{ option.name }}
110+
</option>
111+
</select>
112+
</template>
113+
</LanguageSelect>
114+
</div>
115+
</template>
116+
117+
<script setup>
118+
import { computed, ref } from 'vue'
119+
import LanguageSelect from 'i18n-jsautotranslate/vue/vue3/LanguageSelect.vue';
120+
121+
//获取该用户之前是否有切换过语言，获取其最后一次切换的是什么语种，详细参考： http://translate.zvo.cn/4074.html
122+
const language = window.translate.language.getCurrent();
123+
</script>
124+
125+
<style scoped>
126+
.LanguageSelect {
127+
position: fixed;
128+
top: 20px;
129+
right: 80px;
130+
}
131+
</style>
132+
````

‎extend/vue/vue3/LanguageSelect.vue‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<template>
2+
<div class="LanguageSelect ignore">
3+
<!-- 使用作用域插槽，将组件内部的数据和方法传递给父组件 -->
4+
<slot
5+
:LanguageSelectLanguageList="LanguageSelectLanguageList"
6+
:LanguageSelectOnChange="LanguageSelectOnChange"
7+
>
8+
<!-- 原生 select 实现 -->
9+
<select
10+
v-model="language"
11+
@change="LanguageSelectOnChange"
12+
class="ignore"
13+
>
14+
<option value="" disabled>Please select language</option>
15+
<option v-for="option in LanguageSelectLanguageList" :key="option.id" :value="option.id">
16+
{{ option.name }}
17+
</option>
18+
</select>
19+
</slot>
20+
</div>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { ref, onMounted, h } from 'vue';
25+
26+
// 定义语言选项类型
27+
interface LanguageOption {
28+
id: string;
29+
name: string;
30+
}
31+
32+
// 选中的语言ID（双向绑定值）
33+
const language = ref<string | null>(null);
34+
35+
// 语言选项列表
36+
const LanguageSelectLanguageList = ref<LanguageOption[]>([]);
37+
38+
// 处理语言选择变化
39+
const LanguageSelectOnChange = (event: Event) => {
40+
// 从事件对象中获取选中的值
41+
const target = event.target as HTMLSelectElement;
42+
const value = target.value;
43+
44+
language.value = value;
45+
window.translate.selectLanguageTag.selectOnChange({
46+
target: {
47+
value: value
48+
}
49+
});
50+
};
51+
52+
onMounted(() => {
53+
// 保留原有的初始化逻辑
54+
if (typeof (translate) == 'object' && typeof (translate.vue3) == 'object' && typeof (translate.vue3.isUse) == 'boolean' && translate.vue3.isUse == true) {
55+
// 正常，需要的，需要加载多语言切换Select
56+
} else {
57+
// 不需要显示
58+
return;
59+
}
60+
61+
translate.time.log(translate.vue3.isUse);
62+
63+
// 重写渲染语言下拉列表出现时的函数
64+
translate.selectLanguageTag.render = function () {
65+
if (translate.selectLanguageTag.alreadyRender) {
66+
return;
67+
}
68+
translate.selectLanguageTag.alreadyRender = true;
69+
70+
// 判断如果不显示select选择语言，直接就隐藏掉
71+
if (!translate.selectLanguageTag.show) {
72+
return;
73+
}
74+
75+
// 从服务器加载支持的语言库
76+
if (typeof (translate.request.api.language) == 'string' && translate.request.api.language.length > 0) {
77+
// 从接口加载语种
78+
translate.request.post(translate.request.api.language, {}, function (data) {
79+
if (data.result == 0) {
80+
console.log('load language list error : ' + data.info);
81+
return;
82+
}
83+
translate.request.api.language = data.list; // 进行缓存
84+
translate.selectLanguageTag.customUI(data.list);
85+
}, null);
86+
} else if (typeof (translate.request.api.language) == 'object') {
87+
// 无网络环境下，自定义显示语种
88+
translate.selectLanguageTag.customUI(translate.request.api.language);
89+
}
90+
91+
// 显示切换语言
92+
const TranslateJsSelectLanguages = document.getElementsByClassName('LanguageSelect');
93+
for (let li = 0; li < TranslateJsSelectLanguages.length; li++) {
94+
TranslateJsSelectLanguages[li].style.display = 'block';
95+
}
96+
}
97+
98+
// 处理语言列表数据
99+
translate.selectLanguageTag.customUI = function (externalLanguageList) {
100+
// 整理允许显示的语种
101+
const allowLanguageList: LanguageOption[] = [];
102+
103+
// 判断 selectLanguageTag.languages 中允许使用哪些
104+
if (translate.selectLanguageTag.languages.length > 0) {
105+
// 设置了自定义显示的语言
106+
// 都转小写判断
107+
const langs_indexof = (',' + translate.selectLanguageTag.languages + ',').toLowerCase();
108+
109+
for (let i = 0; i < externalLanguageList.length; i++) {
110+
if (langs_indexof.indexOf(',' + externalLanguageList[i].id.toLowerCase() + ',') < 0) {
111+
// 没发现，那不显示这个语种，调出
112+
continue;
113+
}
114+
allowLanguageList.push(externalLanguageList[i]);
115+
}
116+
117+
} else {
118+
// 显示所有
119+
allowLanguageList.push(...externalLanguageList);
120+
}
121+
// 赋予带渲染到界面的语言列表数据
122+
LanguageSelectLanguageList.value = allowLanguageList;
123+
124+
// 显示上一次切换后的语种
125+
language.value = translate.language.getCurrent();
126+
}
127+
128+
// 渲染语言下拉列表出现
129+
translate.selectLanguageTag.refreshRender();
130+
});
131+
</script>
132+
133+
<style scoped>
134+
/* 避免被遮挡无法操作，设置z-index较高 */
135+
.LanguageSelect {
136+
z-index: 2147483583;
137+
display: none;
138+
}
139+
</style>

‎extend/vue/vue3/README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ VUE3 中 使用 translate.js
33
## [修改] package.json 文件
44
dependencies 中增加
55
````
6-
"i18n-jsautotranslate": "^3.18.73",
6+
"i18n-jsautotranslate": "^3.18.76",
77
````
88

99
## [新增] translate.js (或ts) 文件
@@ -34,7 +34,11 @@ app.mount('#app');
3434
````
3535

3636
## 页面上出现语言切换的Select下拉切换菜单
37-
这里，我们针对部分UI框架，进行了适配，你可以直接快速使用
37+
38+
文档参见： [Github文档](https://github.com/xnx3/translate/tree/master/extend/vue/vue3/LanguageSelect.md) | [Gitee文档](https://gitee.com/mail_osc/translate/tree/master/extend/vue/vue3/LanguageSelect.md)
39+
40+
41+
另外，我们针对部分UI框架，进行了适配，你可以直接快速使用
3842
* ArcoDesign - [Github](https://github.com/xnx3/translate/tree/master/extend/ArcoDesign/Vue3) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/ArcoDesign/Vue3)
3943
* naiveUI - [Github](https://github.com/xnx3/translate/tree/master/extend/naiveUI) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/naiveUI)
4044

‎extend/vue/vue3/resource/preview.png‎

212 KB
Loading

‎extend/vue/vue3/translate.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ translate.vue3.config = function(app){
1515
//translate.time.use = true;
1616
//window.translate.time.printTime = 100;
1717

18+
var originalTrasnalteLog = translate.log;
19+
translate.log = function(obj){
20+
if(typeof(obj) === 'string' && obj.indexOf('- translate.js -') !== -1){
21+
//不显示 translate.js 的说明
22+
}else{
23+
originalTrasnalteLog(obj);
24+
}
25+
}
26+
1827
// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
1928
translate.time.execute.start();
2029

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "i18n-jsautotranslate",
3-
"version": "3.18.74",
3+
"version": "3.18.76",
44
"description": "Two lines of js realize automatic html translation. No need to change the page, no language configuration file, no API key, SEO friendly!",
55
"main": "index.js",
66
"scripts": {

‎translate.js/translate.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ var translate = {
1414
* 格式：major.minor.patch.date
1515
*/
1616
// AUTO_VERSION_START
17-
version: '3.18.75.20251011',
17+
version: '3.18.76.20251020',
1818
// AUTO_VERSION_END
1919
/*
2020
当前使用的版本，默认使用v2. 可使用 setUseVersion2();

‎translate.js/translate.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)