i18n-jsautotranslate 3.18.74 → 3.18.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/vue/vue3/LanguageSelect.md +132 -0
- package/vue/vue3/LanguageSelect.vue +139 -0
- package/vue/vue3/README.md +8 -4
- package/vue/vue3/resource/preview.png +0 -0
- package/vue/vue3/translate.ts +9 -0
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ http://res.zvo.cn/translate/demo.html
|
|
|
51
51
|
在网页最末尾， ````</html>```` 之前，加入以下代码，一般在页面的最底部，就会选择语言的 select 切换标签 ：
|
|
52
52
|
|
|
53
53
|
````
|
|
54
|
-
<script src="https://cdn.staticfile.net/translate.js/3.
|
|
54
|
+
<script src="https://cdn.staticfile.net/translate.js/3.18.75/translate.js"></script>
|
|
55
55
|
<script>
|
|
56
56
|
translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种）。如果不设置，默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等
|
|
57
57
|
translate.service.use('client.edge'); //设置机器翻译服务通道，相关说明参考 http://translate.zvo.cn/545867.html
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "i18n-jsautotranslate",
|
|
3
|
-
"version": "3.18.
|
|
3
|
+
"version": "3.18.76",
|
|
4
4
|
"description": "Two lines of js realize automatic html translation. No need to change the page, no language configuration file, no API key, SEO friendly!",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -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
|
+
|
|
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
|
+
````
|
|
@@ -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>
|
package/vue/vue3/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
VUE3 中 使用 translate.
|
|
1
|
+
VUE3 中 使用 translate.js
|
|
2
2
|
|
|
3
3
|
## [修改] package.json 文件
|
|
4
4
|
dependencies 中增加
|
|
5
5
|
````
|
|
6
|
-
"i18n-jsautotranslate": "^3.18.
|
|
6
|
+
"i18n-jsautotranslate": "^3.18.76",
|
|
7
7
|
````
|
|
8
8
|
|
|
9
9
|
## [新增] translate.js (或ts) 文件
|
|
@@ -34,11 +34,15 @@ app.mount('#app');
|
|
|
34
34
|
````
|
|
35
35
|
|
|
36
36
|
## 页面上出现语言切换的Select下拉切换菜单
|
|
37
|
-
|
|
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框架，进行了适配，你可以直接快速使用
|
|
38
42
|
* ArcoDesign - [Github](https://github.com/xnx3/translate/tree/master/extend/ArcoDesign/Vue3) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/ArcoDesign/Vue3)
|
|
39
43
|
* naiveUI - [Github](https://github.com/xnx3/translate/tree/master/extend/naiveUI) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/naiveUI)
|
|
40
44
|
|
|
41
|
-
如果你使用的别的UI框架，可以 [联系我](4030.html) 沟通，目前正在增加其他主流UI框架的，没准你要的就恰好有了，或者直接针对你当前使用的进行新适配。
|
|
45
|
+
如果你使用的别的UI框架，可以 [联系我](http://translate.zvo.cn/4030.html) 沟通，目前正在增加其他主流UI框架的，没准你要的就恰好有了，或者直接针对你当前使用的进行新适配。
|
|
42
46
|
|
|
43
47
|
|
|
44
48
|
## 注意
|
|
Binary file
|
package/vue/vue3/translate.ts
CHANGED
|
@@ -15,6 +15,15 @@ translate.vue3.config = function(app){
|
|
|
15
15
|
//translate.time.use = true;
|
|
16
16
|
//window.translate.time.printTime = 100;
|
|
17
17
|
|
|
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
|
+
|
|
18
27
|
// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
|
|
19
28
|
translate.time.execute.start();
|
|
20
29
|
|