i18n-jsautotranslate 3.18.71 → 3.18.73
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/ArcoDesign/Vue3/README.md +57 -0
- package/index.js +1 -1
- package/naiveUI/LanguageSelect.vue +145 -0
- package/package.json +4 -3
- package/vue/vue3/translate.ts +35 -28
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# ArcoDesign
|
|
2
|
+
|
|
3
|
+
## 接入 vue3 方式使用 translate.js
|
|
4
|
+
http://translate.zvo.cn/4041.html
|
|
5
|
+
|
|
6
|
+
## 页面上出现语言切换的Select下拉切换菜单
|
|
7
|
+
|
|
8
|
+
#### 效果
|
|
9
|
+
见下图右上角的多语言切换
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
#### 代码
|
|
13
|
+
|
|
14
|
+
比如要在 index.vue 页面上显示切换语言的 select 下拉菜单，那么 index.vue 页面中，要进行的操作：
|
|
15
|
+
先在 index.vue 中，加入一行导入 ArcoDesign 的多语言切换Select
|
|
16
|
+
````import LanguageSelect from 'i18n-jsautotranslate/ArcoDesign/Vue3/LanguageSelect.vue';````
|
|
17
|
+
然后在要显示select菜单的位置，直接加入
|
|
18
|
+
````<LanguageSelect/>````
|
|
19
|
+
即可。
|
|
20
|
+
最后，可以使用css样式来进行自定义美化，比如要将这个语言切换放到页面的右上角：
|
|
21
|
+
````
|
|
22
|
+
/* 多语言切换Select */
|
|
23
|
+
.LanguageSelect {
|
|
24
|
+
position: fixed;
|
|
25
|
+
top: 20px;
|
|
26
|
+
right: 80px;
|
|
27
|
+
}
|
|
28
|
+
````
|
|
29
|
+
注意，这个多语言切换的 select ，它的class 名字为 LanguageSelect
|
|
30
|
+
|
|
31
|
+
完整的示例代码如下：
|
|
32
|
+
````
|
|
33
|
+
<template>
|
|
34
|
+
<div class="login">
|
|
35
|
+
<h3 class="login-logo">
|
|
36
|
+
Logo
|
|
37
|
+
</h3>
|
|
38
|
+
|
|
39
|
+
<!-- 多语言切换的 Select 下拉选择 -->
|
|
40
|
+
<LanguageSelect/>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script setup>
|
|
45
|
+
import { computed, ref } from 'vue'
|
|
46
|
+
import LanguageSelect from 'i18n-jsautotranslate/ArcoDesign/Vue3/LanguageSelect.vue';
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<style scoped>
|
|
50
|
+
.LanguageSelect {
|
|
51
|
+
position: fixed;
|
|
52
|
+
top: 20px;
|
|
53
|
+
right: 80px;
|
|
54
|
+
}
|
|
55
|
+
</style>
|
|
56
|
+
````
|
|
57
|
+
|
package/index.js
CHANGED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="LanguageSelect ignore">
|
|
3
|
+
<!-- 使用作用域插槽，将组件内部的数据和方法传递给父组件 -->
|
|
4
|
+
<slot
|
|
5
|
+
:LanguageSelectLanguageList="LanguageSelectLanguageList"
|
|
6
|
+
:LanguageSelectOnChange="LanguageSelectOnChange"
|
|
7
|
+
:LanguageSelectRenderLabel="LanguageSelectRenderLabel"
|
|
8
|
+
>
|
|
9
|
+
<!-- 默认的n-select实现 -->
|
|
10
|
+
<n-select
|
|
11
|
+
v-model:value="language"
|
|
12
|
+
@update:value="LanguageSelectOnChange"
|
|
13
|
+
placeholder="Please select language"
|
|
14
|
+
:options="LanguageSelectLanguageList"
|
|
15
|
+
label-field="name"
|
|
16
|
+
value-field="id"
|
|
17
|
+
class="ignore"
|
|
18
|
+
:render-label="LanguageSelectRenderLabel"
|
|
19
|
+
/>
|
|
20
|
+
</slot>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script setup lang="ts">
|
|
25
|
+
import { ref, onMounted, defineProps } from 'vue';
|
|
26
|
+
import { h } from 'vue';
|
|
27
|
+
import { NSelect } from 'naive-ui';
|
|
28
|
+
|
|
29
|
+
// 定义语言选项类型
|
|
30
|
+
interface LanguageOption {
|
|
31
|
+
id: string;
|
|
32
|
+
name: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
// 选中的语言ID（双向绑定值）
|
|
37
|
+
const language = ref<string | null>(null);
|
|
38
|
+
|
|
39
|
+
// 语言选项列表
|
|
40
|
+
const LanguageSelectLanguageList = ref<LanguageOption[]>([]);
|
|
41
|
+
|
|
42
|
+
// 处理语言选择变化
|
|
43
|
+
const LanguageSelectOnChange = (value: string) => {
|
|
44
|
+
language.value = value;
|
|
45
|
+
window.translate.selectLanguageTag.selectOnChange({
|
|
46
|
+
target: {
|
|
47
|
+
value: value
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// 自定义渲染标签函数
|
|
53
|
+
const LanguageSelectRenderLabel = (option: LanguageOption) => {
|
|
54
|
+
const { name } = option;
|
|
55
|
+
return h('span', { class: 'ignore' }, name);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
onMounted(() => {
|
|
59
|
+
// 保留原有的初始化逻辑
|
|
60
|
+
if (typeof (translate) == 'object' && typeof (translate.vue3) == 'object' && typeof (translate.vue3.isUse) == 'boolean' && translate.vue3.isUse == true) {
|
|
61
|
+
// 正常，需要的，需要加载多语言切换Select
|
|
62
|
+
} else {
|
|
63
|
+
// 不需要显示
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
translate.time.log(translate.vue3.isUse);
|
|
68
|
+
|
|
69
|
+
// 重写渲染语言下拉列表出现时的函数
|
|
70
|
+
translate.selectLanguageTag.render = function () {
|
|
71
|
+
if (translate.selectLanguageTag.alreadyRender) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
translate.selectLanguageTag.alreadyRender = true;
|
|
75
|
+
|
|
76
|
+
// 判断如果不显示select选择语言，直接就隐藏掉
|
|
77
|
+
if (!translate.selectLanguageTag.show) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// 从服务器加载支持的语言库
|
|
82
|
+
if (typeof (translate.request.api.language) == 'string' && translate.request.api.language.length > 0) {
|
|
83
|
+
// 从接口加载语种
|
|
84
|
+
translate.request.post(translate.request.api.language, {}, function (data) {
|
|
85
|
+
if (data.result == 0) {
|
|
86
|
+
console.log('load language list error : ' + data.info);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
translate.request.api.language = data.list; // 进行缓存
|
|
90
|
+
translate.selectLanguageTag.customUI(data.list);
|
|
91
|
+
}, null);
|
|
92
|
+
} else if (typeof (translate.request.api.language) == 'object') {
|
|
93
|
+
// 无网络环境下，自定义显示语种
|
|
94
|
+
translate.selectLanguageTag.customUI(translate.request.api.language);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// 显示切换语言
|
|
98
|
+
const TranslateJsSelectLanguages = document.getElementsByClassName('LanguageSelect');
|
|
99
|
+
for (let li = 0; li < TranslateJsSelectLanguages.length; li++) {
|
|
100
|
+
TranslateJsSelectLanguages[li].style.display = 'block';
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// 处理语言列表数据
|
|
105
|
+
translate.selectLanguageTag.customUI = function (externalLanguageList) {
|
|
106
|
+
// 整理允许显示的语种
|
|
107
|
+
const allowLanguageList: LanguageOption[] = [];
|
|
108
|
+
|
|
109
|
+
// 判断 selectLanguageTag.languages 中允许使用哪些
|
|
110
|
+
if (translate.selectLanguageTag.languages.length > 0) {
|
|
111
|
+
// 设置了自定义显示的语言
|
|
112
|
+
// 都转小写判断
|
|
113
|
+
const langs_indexof = (',' + translate.selectLanguageTag.languages + ',').toLowerCase();
|
|
114
|
+
|
|
115
|
+
for (let i = 0; i < externalLanguageList.length; i++) {
|
|
116
|
+
if (langs_indexof.indexOf(',' + externalLanguageList[i].id.toLowerCase() + ',') < 0) {
|
|
117
|
+
// 没发现，那不显示这个语种，调出
|
|
118
|
+
continue;
|
|
119
|
+
}
|
|
120
|
+
allowLanguageList.push(externalLanguageList[i]);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
} else {
|
|
124
|
+
// 显示所有
|
|
125
|
+
allowLanguageList.push(...externalLanguageList);
|
|
126
|
+
}
|
|
127
|
+
// 赋予带渲染到界面的语言列表数据
|
|
128
|
+
LanguageSelectLanguageList.value = allowLanguageList;
|
|
129
|
+
|
|
130
|
+
// 显示上一次切换后的语种
|
|
131
|
+
language.value = translate.language.getCurrent();
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// 渲染语言下拉列表出现
|
|
135
|
+
translate.selectLanguageTag.refreshRender();
|
|
136
|
+
});
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<style scoped>
|
|
140
|
+
/* 避免被遮挡无法操作，设置z-index较高 */
|
|
141
|
+
.LanguageSelect {
|
|
142
|
+
z-index: 2147483583;
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
|
145
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "i18n-jsautotranslate",
|
|
3
|
-
"version": "3.18.
|
|
3
|
+
"version": "3.18.73",
|
|
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,8 +14,9 @@
|
|
|
14
14
|
],
|
|
15
15
|
"files": [
|
|
16
16
|
"index.js",
|
|
17
|
-
"ArcoDesign
|
|
18
|
-
"vue/**"
|
|
17
|
+
"ArcoDesign/Vue3/LanguageSelect.vue",
|
|
18
|
+
"vue/**",
|
|
19
|
+
"naiveUI/LanguageSelect.vue"
|
|
19
20
|
],
|
|
20
21
|
"homepage": "https://github.com/xnx3/translate#readme",
|
|
21
22
|
"bugs": {
|
package/vue/vue3/translate.ts
CHANGED
|
@@ -7,48 +7,55 @@ import {translateJsVueUseModel, translate} from './translateVue3TS' // 导入 tr
|
|
|
7
7
|
1. 直接将所有配置全部注释掉
|
|
8
8
|
2. 将 /src/main.ts 中的这一行 app.use(translateJsVueUseModel) 注释掉即可。
|
|
9
9
|
|
|
10
|
+
这些将会在 app.use(translateJsVueUseModel) 时被执行
|
|
10
11
|
*/
|
|
12
|
+
translate.vue3.config = function(app){
|
|
11
13
|
|
|
12
|
-
//打印包含具体执行时间的debug日志
|
|
13
|
-
//translate.time.use = true;
|
|
14
|
-
//window.translate.time.printTime = 100;
|
|
14
|
+
//打印包含具体执行时间的debug日志
|
|
15
|
+
//translate.time.use = true;
|
|
16
|
+
//window.translate.time.printTime = 100;
|
|
15
17
|
|
|
16
|
-
// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
|
|
17
|
-
translate.time.execute.start();
|
|
18
|
+
// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
|
|
19
|
+
translate.time.execute.start();
|
|
18
20
|
|
|
19
|
-
// 设置当前切换所支持的语言 http://translate.zvo.cn/4056.html
|
|
20
|
-
window.translate.selectLanguageTag.languages = 'chinese_simplified,english,korean,latin,french,russian';
|
|
21
|
+
// 设置当前切换所支持的语言 http://translate.zvo.cn/4056.html
|
|
22
|
+
window.translate.selectLanguageTag.languages = 'chinese_simplified,english,korean,latin,french,russian';
|
|
21
23
|
|
|
22
|
-
// 设置本地语种（当前网页的语种） ，如果你网页语种很多，比如国际化论坛，哪个国家发言的都有，那这里你可以不用设置，交给 translate.js 自动去识别当前网页语种 http://translate.zvo.cn/4066.html
|
|
23
|
-
window.translate.language.setLocal('chinese_simplified');
|
|
24
|
+
// 设置本地语种（当前网页的语种） ，如果你网页语种很多，比如国际化论坛，哪个国家发言的都有，那这里你可以不用设置，交给 translate.js 自动去识别当前网页语种 http://translate.zvo.cn/4066.html
|
|
25
|
+
window.translate.language.setLocal('chinese_simplified');
|
|
24
26
|
|
|
25
|
-
//
|
|
26
|
-
//
|
|
27
|
+
// 禁用翻译的排队执行。注意，这是私有部署才有的能力，可极大提高视觉上的翻译效果，不需要再排队等待翻译。 http://translate.zvo.cn/391129.html
|
|
28
|
+
// 注意，如果你用开源版本，请不要启用此，不然请求过快，会触发接口风控保护，禁用你的终端
|
|
29
|
+
//translate.waitingExecute.use = false;
|
|
27
30
|
|
|
28
|
-
//
|
|
29
|
-
translate.
|
|
31
|
+
// 本地语种也进行强制翻译 http://translate.zvo.cn/289574.html
|
|
32
|
+
//translate.language.translateLocal = true;
|
|
30
33
|
|
|
31
|
-
//
|
|
32
|
-
//
|
|
33
|
-
//window.translate.visual.webPageLoadTranslateBeforeHiddenText({inHeadTip: false});
|
|
34
|
+
// 翻译时忽略指定的文字不翻译 http://translate.zvo.cn/283381.html
|
|
35
|
+
//translate.ignore.text.push('xxxxx');
|
|
34
36
|
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
+
// 网页打开时自动隐藏文字，翻译完成后显示译文 http://translate.zvo.cn/549731.html
|
|
38
|
+
// 注意，如果不启用本多语言切换能力，这个要注释掉，不然你网页的文本是会被隐藏的
|
|
39
|
+
//window.translate.visual.webPageLoadTranslateBeforeHiddenText({inHeadTip: false});
|
|
37
40
|
|
|
38
|
-
//
|
|
39
|
-
translate.
|
|
41
|
+
// 启用翻译中的遮罩层 http://translate.zvo.cn/407105.html
|
|
42
|
+
window.translate.progress.api.startUITip();
|
|
40
43
|
|
|
41
|
-
//
|
|
42
|
-
translate.
|
|
44
|
+
// 设置采用开源免费的 client.edge 无服务端翻译服务通道，无需任何注册接入即可直接使用 http://translate.zvo.cn/4081.html
|
|
45
|
+
translate.service.use('client.edge');
|
|
43
46
|
|
|
44
|
-
//
|
|
45
|
-
translate.listener.start();
|
|
47
|
+
// 网页ajax请求触发自动翻译 http://translate.zvo.cn/4086.html
|
|
48
|
+
translate.request.listener.start();
|
|
46
49
|
|
|
47
|
-
//
|
|
48
|
-
translate.
|
|
50
|
+
// 开启页面元素动态监控，js改变的内容也会被翻译，参考文档： http://translate.zvo.cn/4067.html
|
|
51
|
+
translate.listener.start();
|
|
49
52
|
|
|
50
|
-
|
|
51
|
-
translate.
|
|
53
|
+
// 元素的内容整体翻译能力配置 ，提高翻译的语义 http://translate.zvo.cn/4078.html
|
|
54
|
+
translate.whole.enableAll();
|
|
55
|
+
|
|
56
|
+
//触发翻译执行，有关这个的说明可参考 http://translate.zvo.cn/547814.html
|
|
57
|
+
translate.execute();
|
|
58
|
+
}
|
|
52
59
|
|
|
53
60
|
//导出，其中translateJsVueUseModel为vue插件，translate为js函数
|
|
54
61
|
export { translateJsVueUseModel, translate };
|