i18n-jsautotranslate 3.18.44 → 3.18.53
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.
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="LanguageSelect ignore">
|
|
3
|
+
<!-- Arco Design 选择器组件 -->
|
|
4
|
+
<a-select
|
|
5
|
+
v-model="language"
|
|
6
|
+
value-key="id"
|
|
7
|
+
@change="LanguageSelectOnChange"
|
|
8
|
+
popup-class="ignore"
|
|
9
|
+
placeholder="请选择语言"
|
|
10
|
+
>
|
|
11
|
+
<!-- 语言选项列表（使用Select的子组件Option） -->
|
|
12
|
+
<a-select-option
|
|
13
|
+
class="ignore"
|
|
14
|
+
v-for="item in languageList"
|
|
15
|
+
:key="item.id"
|
|
16
|
+
:label="item.name"
|
|
17
|
+
:value="item.id"
|
|
18
|
+
/>
|
|
19
|
+
</a-select>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { ref, onMounted } from 'vue';
|
|
25
|
+
// 需要同时导入Select和Option组件
|
|
26
|
+
import { Select as ASelect, Option as ASelectOption } from '@arco-design/web-vue';
|
|
27
|
+
import translate from 'i18n-jsautotranslate'
|
|
28
|
+
|
|
29
|
+
// 定义语言选项类型
|
|
30
|
+
interface LanguageOption {
|
|
31
|
+
id: string;
|
|
32
|
+
name: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// 选中的语言ID（双向绑定值）
|
|
36
|
+
const language = ref<string | null>(null);
|
|
37
|
+
/*
|
|
38
|
+
语言选项列表
|
|
39
|
+
其中的值为：
|
|
40
|
+
{ id: 'zh-CN', name: '简体中文' },
|
|
41
|
+
{ id: 'en-US', name: 'English' },
|
|
42
|
+
*/
|
|
43
|
+
const languageList = ref<LanguageOption[]>([]);
|
|
44
|
+
|
|
45
|
+
// 处理语言选择变化
|
|
46
|
+
const LanguageSelectOnChange = (value: string) => {
|
|
47
|
+
window.translate.selectLanguageTag.selectOnChange({
|
|
48
|
+
target: {
|
|
49
|
+
value: value
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
onMounted(() => {
|
|
55
|
+
|
|
56
|
+
//重写渲染语言下拉列表出现时的函数，这里是为了把默认创建的 <div id="translate" 这个给去掉，其他无改变
|
|
57
|
+
translate.selectLanguageTag.render = function(){ //v2增加
|
|
58
|
+
console.log('translate.selectLanguageTag.render已被渲染，触发来源:', new Error('调用栈追踪').stack);
|
|
59
|
+
if(translate.selectLanguageTag.alreadyRender){
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
translate.selectLanguageTag.alreadyRender = true;
|
|
63
|
+
|
|
64
|
+
//判断如果不显示select选择语言，直接就隐藏掉
|
|
65
|
+
if(!translate.selectLanguageTag.show){
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
//从服务器加载支持的语言库
|
|
70
|
+
if(typeof(translate.request.api.language) == 'string' && translate.request.api.language.length > 0){
|
|
71
|
+
//从接口加载语种
|
|
72
|
+
translate.request.post(translate.request.api.language, {}, function(data){
|
|
73
|
+
if(data.result == 0){
|
|
74
|
+
console.log('load language list error : '+data.info);
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
translate.selectLanguageTag.customUI(data.list);
|
|
78
|
+
}, null);
|
|
79
|
+
}else if(typeof(translate.request.api.language) == 'object'){
|
|
80
|
+
//无网络环境下，自定义显示语种
|
|
81
|
+
translate.selectLanguageTag.customUI(translate.request.api.language);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
//显示切换语言
|
|
85
|
+
var TranslateJsSelectLanguages = document.getElementsByClassName('TranslateJsSelectLanguage');
|
|
86
|
+
TranslateJsSelectLanguages[0].style.display = 'block';
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
//languageList 便是当前支持的能切换的语种，你可以 console.log(languageList); 打印出来看看
|
|
90
|
+
translate.selectLanguageTag.customUI = function(externalLanguageList){
|
|
91
|
+
//整理允许显示的语种
|
|
92
|
+
var allowLanguageList: LanguageOption[] = [];
|
|
93
|
+
|
|
94
|
+
//判断 selectLanguageTag.languages 中允许使用哪些
|
|
95
|
+
if(translate.selectLanguageTag.languages.length > 0){
|
|
96
|
+
//设置了自定义显示的语言
|
|
97
|
+
//都转小写判断
|
|
98
|
+
var langs_indexof = (','+translate.selectLanguageTag.languages+',').toLowerCase();
|
|
99
|
+
|
|
100
|
+
for(var i = 0; i<externalLanguageList.length; i++){
|
|
101
|
+
if(langs_indexof.indexOf(','+externalLanguageList[i].id.toLowerCase()+',') < 0){
|
|
102
|
+
//没发现，那不显示这个语种，调出
|
|
103
|
+
continue
|
|
104
|
+
}
|
|
105
|
+
allowLanguageList.push(externalLanguageList[i]);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
}else{
|
|
109
|
+
//显示所有
|
|
110
|
+
allowLanguageList = externalLanguageList;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//赋予带渲染到界面的语言列表数据
|
|
114
|
+
languageList.value = allowLanguageList;
|
|
115
|
+
|
|
116
|
+
//显示上一次切换后的语种
|
|
117
|
+
setTimeout(function(){
|
|
118
|
+
language.value = translate.language.getCurrent();
|
|
119
|
+
}, 50);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
console.log('1111')
|
|
124
|
+
|
|
125
|
+
const refreshLanguage = function(){
|
|
126
|
+
//渲染语言下拉列表出现
|
|
127
|
+
window.translate.selectLanguageTag.refreshRender();
|
|
128
|
+
//显示上一次切换后的语种
|
|
129
|
+
language.value = translate.language.getCurrent();
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
// 当用户打开页面后，第一次触发 translate.execute() 时，进行触发
|
|
133
|
+
translate.lifecycle.execute.trigger.push(function(data){
|
|
134
|
+
if(translate.executeTriggerNumber === 0){
|
|
135
|
+
console.log('这是打开页面后，第一次触发 translate.execute() ，因为translate.executeNumber 记录的是translate.execute() 执行完的次数。');
|
|
136
|
+
// 触发语言下拉列表出现
|
|
137
|
+
//渲染语言下拉列表出现
|
|
138
|
+
refreshLanguage();
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
//如果已经触发了 translate.execute() 那么直接就渲染
|
|
143
|
+
console.log(translate.executeTriggerNumber+ ', '+translate.state)
|
|
144
|
+
if(translate.executeTriggerNumber > 0 || translate.state > 0){
|
|
145
|
+
refreshLanguage();
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
</script>
|
|
152
|
+
|
|
153
|
+
<style scoped>
|
|
154
|
+
/* 避免被遮挡无法操作，设置z-index较高 */
|
|
155
|
+
.LanguageSelect {
|
|
156
|
+
z-index: 2147483583;
|
|
157
|
+
display:none;
|
|
158
|
+
}
|
|
159
|
+
</style>
|
|
160
|
+
|
package/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var translate = {
|
|
|
14
14
|
* 格式：major.minor.patch.date
|
|
15
15
|
*/
|
|
16
16
|
// AUTO_VERSION_START
|
|
17
|
-
version: '3.18.
|
|
17
|
+
version: '3.18.53.20250927',
|
|
18
18
|
// AUTO_VERSION_END
|
|
19
19
|
/*
|
|
20
20
|
当前使用的版本，默认使用v2. 可使用 setUseVersion2();
|
|
@@ -1887,6 +1887,29 @@ var translate = {
|
|
|
1887
1887
|
translate.execute() 执行相关
|
|
1888
1888
|
*/
|
|
1889
1889
|
execute:{
|
|
1890
|
+
/*
|
|
1891
|
+
每当触发执行 translate.execute() 时，会直接触发此。
|
|
1892
|
+
这个触发是指在所有判断之前，也就是只要 触发了 translate.execute() 会立即触发此，然后在进行执行其他的。
|
|
1893
|
+
{
|
|
1894
|
+
to: , //翻译为的语种
|
|
1895
|
+
docs: //当前触发 translate.execute() 要进行翻译的元素。
|
|
1896
|
+
比如单纯触发执行 translate.execute() 、translate.request.listener.start() 那么这里 docs 则是 通过 translate.setDocuments(...) 所设置的元素
|
|
1897
|
+
如果是 translate.listener.start(); 监控页面发生变化的元素进行翻译，则这里的docs 则是发生变化的元素
|
|
1898
|
+
|
|
1899
|
+
}
|
|
1900
|
+
|
|
1901
|
+
*/
|
|
1902
|
+
trigger: [],
|
|
1903
|
+
trigger_Trigger:function(data){
|
|
1904
|
+
for(var i = 0; i < translate.lifecycle.execute.trigger.length; i++){
|
|
1905
|
+
try{
|
|
1906
|
+
translate.lifecycle.execute.trigger[i](data);
|
|
1907
|
+
}catch(e){
|
|
1908
|
+
console.log(e);
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
},
|
|
1912
|
+
|
|
1890
1913
|
/*
|
|
1891
1914
|
每当触发执行 translate.execute() 时，会先进行当前是否可以正常进行翻译的判定，比如 当前语种是否就已经是翻译之后的语种了是否没必要翻译了等。（这些初始判定可以理解成它的耗时小于1毫秒，几乎没有耗时）
|
|
1892
1915
|
经过初始的判断后，发现允许被翻译，那么在向后执行之前，先触发此。
|
|
@@ -2081,6 +2104,13 @@ var translate = {
|
|
|
2081
2104
|
如果不传入或者传入null，则是翻译整个网页所有能翻译的元素
|
|
2082
2105
|
*/
|
|
2083
2106
|
execute:function(docs){
|
|
2107
|
+
//钩子
|
|
2108
|
+
translate.lifecycle.execute.trigger_Trigger({
|
|
2109
|
+
to:translate.to,
|
|
2110
|
+
docs: docs
|
|
2111
|
+
});
|
|
2112
|
+
|
|
2113
|
+
|
|
2084
2114
|
translate.executeTriggerNumber = translate.executeTriggerNumber + 1;
|
|
2085
2115
|
var triggerNumber = translate.executeTriggerNumber; //为了整个 translate.execute 的数据一致性，下面都是使用这个变量
|
|
2086
2116
|
|
|
@@ -2120,7 +2150,7 @@ var translate = {
|
|
|
2120
2150
|
//钩子
|
|
2121
2151
|
translate.lifecycle.execute.finally_Trigger({
|
|
2122
2152
|
uuid:'',
|
|
2123
|
-
to:
|
|
2153
|
+
to:translate.to,
|
|
2124
2154
|
state: 2,
|
|
2125
2155
|
triggerNumber: triggerNumber
|
|
2126
2156
|
});
|
|
@@ -2202,7 +2232,7 @@ var translate = {
|
|
|
2202
2232
|
//钩子
|
|
2203
2233
|
translate.lifecycle.execute.finally_Trigger({
|
|
2204
2234
|
uuid:'',
|
|
2205
|
-
to:
|
|
2235
|
+
to:translate.to,
|
|
2206
2236
|
state: 3,
|
|
2207
2237
|
triggerNumber: triggerNumber
|
|
2208
2238
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "i18n-jsautotranslate",
|
|
3
|
-
"version": "3.18.
|
|
3
|
+
"version": "3.18.53",
|
|
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": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"files": [
|
|
16
16
|
"index.js",
|
|
17
|
-
"
|
|
17
|
+
"ArcoDesign/**"
|
|
18
18
|
],
|
|
19
19
|
"homepage": "https://github.com/xnx3/translate#readme",
|
|
20
20
|
"bugs": {
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="TranslateJsSelectLanguage ignore">
|
|
3
|
-
<!-- Arco Design 选择器组件 -->
|
|
4
|
-
<a-select
|
|
5
|
-
v-model="language"
|
|
6
|
-
value-key="id"
|
|
7
|
-
@change="TranslateJsSelectLanguageOnChange"
|
|
8
|
-
popup-class="ignore"
|
|
9
|
-
placeholder="请选择语言"
|
|
10
|
-
style="width: 200px"
|
|
11
|
-
>
|
|
12
|
-
<!-- 语言选项列表（使用Select的子组件Option） -->
|
|
13
|
-
<a-select-option
|
|
14
|
-
class="ignore"
|
|
15
|
-
v-for="item in languageList"
|
|
16
|
-
:key="item.id"
|
|
17
|
-
:label="item.name"
|
|
18
|
-
:value="item.id"
|
|
19
|
-
/>
|
|
20
|
-
</a-select>
|
|
21
|
-
</div>
|
|
22
|
-
</template>
|
|
23
|
-
|
|
24
|
-
<script setup lang="ts">
|
|
25
|
-
import { ref, onMounted } from 'vue';
|
|
26
|
-
// 需要同时导入Select和Option组件
|
|
27
|
-
import { Select as ASelect, Option as ASelectOption } from '@arco-design/web-vue';
|
|
28
|
-
import translate from 'i18n-jsautotranslate'
|
|
29
|
-
|
|
30
|
-
// 定义语言选项类型
|
|
31
|
-
interface LanguageOption {
|
|
32
|
-
id: string;
|
|
33
|
-
name: string;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// 选中的语言ID（双向绑定值）
|
|
37
|
-
const language = ref<string | null>(null);
|
|
38
|
-
/*
|
|
39
|
-
语言选项列表
|
|
40
|
-
其中的值为：
|
|
41
|
-
{ id: 'zh-CN', name: '简体中文' },
|
|
42
|
-
{ id: 'en-US', name: 'English' },
|
|
43
|
-
*/
|
|
44
|
-
const languageList = ref<LanguageOption[]>([]);
|
|
45
|
-
|
|
46
|
-
// 处理语言选择变化
|
|
47
|
-
const TranslateJsSelectLanguageOnChange = (value: string) => {
|
|
48
|
-
window.translate.selectLanguageTag.selectOnChange({
|
|
49
|
-
target: {
|
|
50
|
-
value: value
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
// 组件挂载时初始化（可选）
|
|
56
|
-
onMounted(() => {
|
|
57
|
-
var translate = window.translate;
|
|
58
|
-
|
|
59
|
-
//languageList 便是当前支持的能切换的语种，你可以 console.log(languageList); 打印出来看看
|
|
60
|
-
translate.selectLanguageTag.customUI = function(externalLanguageList){
|
|
61
|
-
//整理允许显示的语种
|
|
62
|
-
var allowLanguageList: LanguageOption[] = [];
|
|
63
|
-
|
|
64
|
-
//判断 selectLanguageTag.languages 中允许使用哪些
|
|
65
|
-
if(translate.selectLanguageTag.languages.length > 0){
|
|
66
|
-
//设置了自定义显示的语言
|
|
67
|
-
//都转小写判断
|
|
68
|
-
var langs_indexof = (','+translate.selectLanguageTag.languages+',').toLowerCase();
|
|
69
|
-
|
|
70
|
-
for(var i = 0; i<externalLanguageList.length; i++){
|
|
71
|
-
if(langs_indexof.indexOf(','+externalLanguageList[i].id.toLowerCase()+',') < 0){
|
|
72
|
-
//没发现，那不显示这个语种，调出
|
|
73
|
-
continue
|
|
74
|
-
}
|
|
75
|
-
allowLanguageList.push(externalLanguageList[i]);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
}else{
|
|
79
|
-
//显示所有
|
|
80
|
-
allowLanguageList = externalLanguageList;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
//赋予带渲染到界面的语言列表数据
|
|
84
|
-
languageList.value = allowLanguageList;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
//渲染语言下拉列表出现
|
|
88
|
-
window.translate.selectLanguageTag.refreshRender();
|
|
89
|
-
//显示上一次切换后的语种
|
|
90
|
-
language.value = translate.language.getCurrent();
|
|
91
|
-
});
|
|
92
|
-
</script>
|
|
93
|
-
|
|
94
|
-
<style scoped>
|
|
95
|
-
/* 避免被遮挡无法操作，设置z-index较高 */
|
|
96
|
-
.TranslateJsSelectLanguage {
|
|
97
|
-
z-index: 2147483583;
|
|
98
|
-
}
|
|
99
|
-
</style>
|
|
100
|
-
|
package/extend/README.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
translate.js 在各种系统及框架中的扩展应用。
|