i18n-jsautotranslate 3.18.71 → 3.18.72
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/ArcoDesign/Vue3/resource/preview.png +0 -0
- package/index.js +1 -1
- package/package.json +1 -1
- 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
|
+
|
|
Binary file
|
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.72",
|
|
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": {
|
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 };
|