i18n-jsautotranslate 3.18.62 → 3.18.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-jsautotranslate",
-  "version": "3.18.62",
+  "version": "3.18.66",
   "description": "Two lines of js realize automatic html translation. No need to change the page, no language configuration file, no API key, SEO friendly!",
   "main": "index.js",
   "scripts": {
@@ -14,7 +14,8 @@
   ],
   "files": [
     "index.js",
-    "ArcoDesign/**"
+    "ArcoDesign/**",
+    "vue/**"
   ],
   "homepage": "https://github.com/xnx3/translate#readme",
   "bugs": {

package/vue/vue3/translate.ts

@@ -0,0 +1,54 @@
+import {translateJsVueUseModel, translate} from './translateVue3TS' // 导入 translate 的 VUE3 的 ts 插件
+
+/*
+    
+    translate.js AI 多语言切换模块的自定义配置。
+    如果不想启用，你可以通过以下方式中的任何一种进行禁用
+        1. 直接将所有配置全部注释掉
+        2. 将 /src/main.ts 中的这一行 app.use(translateJsVueUseModel) 注释掉即可。
+
+*/
+
+//打印包含具体执行时间的debug日志
+//translate.time.use = true;
+//window.translate.time.printTime = 100;
+
+// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
+translate.time.execute.start(); 
+
+// 设置当前切换所支持的语言 http://translate.zvo.cn/4056.html
+window.translate.selectLanguageTag.languages = 'chinese_simplified,english,korean,latin,french,russian'; 
+
+// 设置本地语种（当前网页的语种） ，如果你网页语种很多，比如国际化论坛，哪个国家发言的都有，那这里你可以不用设置，交给 translate.js 自动去识别当前网页语种 http://translate.zvo.cn/4066.html
+window.translate.language.setLocal('chinese_simplified');
+
+// 本地语种也进行强制翻译 http://translate.zvo.cn/289574.html
+//translate.language.translateLocal = true;
+
+// 翻译时忽略指定的文字不翻译 http://translate.zvo.cn/283381.html
+translate.ignore.text.push('ContiNew Admin'); 
+
+// 网页打开时自动隐藏文字，翻译完成后显示译文 http://translate.zvo.cn/549731.html
+// 注意，如果不启用本多语言切换能力，这个要注释掉，不然你网页的文本是会被隐藏的
+//window.translate.visual.webPageLoadTranslateBeforeHiddenText({inHeadTip: false});
+
+// 启用翻译中的遮罩层 http://translate.zvo.cn/407105.html
+window.translate.progress.api.startUITip();
+
+// 设置采用开源免费的 client.edge 无服务端翻译服务通道，无需任何注册接入即可直接使用 http://translate.zvo.cn/4081.html
+translate.service.use('client.edge');
+
+// 网页ajax请求触发自动翻译 http://translate.zvo.cn/4086.html
+translate.request.listener.start();
+
+// 开启页面元素动态监控，js改变的内容也会被翻译，参考文档： http://translate.zvo.cn/4067.html
+translate.listener.start();
+
+// 元素的内容整体翻译能力配置 ，提高翻译的语义 http://translate.zvo.cn/4078.html
+translate.whole.enableAll();
+
+//触发翻译执行，有关这个的说明可参考 http://translate.zvo.cn/547814.html
+translate.execute(); 
+
+//导出，其中translateJsVueUseModel为vue插件，translate为js函数
+export { translateJsVueUseModel, translate };

package/vue/vue3/translateVue3TS.ts

@@ -0,0 +1,83 @@
+import { nextTick } from 'vue';
+import translate from 'i18n-jsautotranslate'
+
+/*
+
+  因为这个文件没什么需要用户单独设置的，只是整体对vue的适配，所以这个文件后续调好了会放到 npm 上，当前因为下面DOM渲染完毕触发的问题没有精准触发，所以暂时先放到这里进行方便优化调试
+
+
+*/
+
+//vue3框架的一些单独设置
+translate.vue3 = {
+  /*
+      是否有 translate.execute() 代码的触发
+      有则是true，没有则是false
+      false则不会再dom渲染完后自动进行翻译,自然也不会显示 select 选择语言
+  */
+  isExecute: false, 
+}
+//如果网页上有 translate.execute() 代码的触发，那么就设置 isExecute 为 true
+translate.lifecycle.execute.trigger.push(function(data){
+  if(data.executeTriggerNumber === 1){
+      translate.vue3.isExecute = true;
+      translate.time.log('打开页面后，第一次触发 translate.execute() - 设置  translate.vue3.isExecute = true;');
+      return false;  
+  }
+});
+translate.time.log('设置vue3初始化配置 - translate.vue3');
+
+//将 translate 参数挂载到 window 上，方便在全局调用
+if(typeof(window.translate) === 'undefined'){
+  window.translate = translate;
+}
+translate.time.log('将 translate 参数挂载到 window 上，方便在全局调用');
+
+const translateJsVueUseModel = {
+  install(app) {
+    // 直接监听应用挂载完成
+    const originalMount = app.mount;
+    app.mount = function(...args) {
+      const root = originalMount.apply(this, args);
+      // 应用挂载完成后执行
+      // 使用双重nextTick确保DOM完全稳定后再执行翻译
+      // 第一个nextTick确保初始DOM渲染完成
+      nextTick(() => {
+        // 第二个nextTick确保可能的异步更新也完成
+        nextTick(() => {
+          
+          /*
+          
+              这里有问题，应该是vue的DOM渲染完毕后触发，但是实际打断点测试，DOM还没有渲染完就触发了，这里还需要跟踪优化
+          
+          
+          */
+
+
+          if(translate.vue3.isExecute){
+            translate.time.log('组件渲染完成，触发 translate.execute();');
+
+            //对vue3的某些第三方组件进行容错处理
+            translate.faultTolerance.documentCreateTextNode.use(); //对VUE的某些组件频繁渲染dom进行容错
+            translate.time.log('对vue3的某些第三方组件进行容错处理 - translate.faultTolerance.documentCreateTextNode.use();');
+
+            console.log(translate.getDocuments());
+            translate.execute();
+            setTimeout(() => {
+              translate.execute();
+            }, 100);
+            setTimeout(() => {
+              translate.execute();
+            }, 2000);
+          }else{
+            translate.time.log('组件渲染完成，但未发现translate.execute();存在，不进行翻译');
+          }
+        });
+      });
+      return root;
+    };
+  }
+};
+
+//export default translateJsVueUseModel;
+export { translateJsVueUseModel, translate };