@shijiu/jsview-vue 0.9.246 → 0.9.254

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -1,351 +1,351 @@
-<!--
- * 【模块 export 内容】
- * JsvPreload：Vue高阶组件，图片预加载的控件
- *      preloadList {ObjectArray}: 预加载的信息列表，单个内容通过buildPreloadInfo构建
- *      downloadList {ObjectArray}: 预下载的信息列表，单个内容通过buildDownloadInfo构建
- *      onPreloading {Function(float percent)}: 预加载中回调，返回预加载进度
- *      onPreloadDone {Function()}: 预加载完成回调
- *      onDownloadDone {Function(pathes)}: 预下载完成回调,pathes为下载好回调的地址
- *
- * 注意事项:
- *      指定加载时的尺寸(0为不指定)，与img标签中的 jsv_img_scaledown_tex 属性一起使用
- *      指定加载色空间，与div标签中的 jsv_img_color_space 一起使用。
- *      因为，同样url情况下，jsv_img_scaledown_tex 和 jsv_img_color_space 启用后，不同的尺寸不同颜色空间
- *      对应着各自不同的图片内存缓存
- *
- * 静态函数:
- *  buildPreloadInfo: 静态函数，创建预加载信息项，用于制作JsvPreload的preloadList属性列表信息
- *        参数:
- *        url {string}:  (必填)图片url
- *        width {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
- *        height {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
- *        color_type {string}:  图片存储颜色空间，去掉alpha通道可节省内存，例如"RGB_565"等，与img标签jsv_img_color_space配合，默认值"RGBA_8888"
- *        net_setting {object}:  (未实现)网络加载参数，cookie, refer等，默认值 null
- *
- *  buildDownloadInfo: 函数，创建预下载信息项，用于制作JsvPreload的downloadList属性列表信息
- *        参数:
- *        url {string}:  (必填)图片url
- *        width {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
- *        height {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
- *        color_type {string}:  图片存储颜色空间，去掉alpha通道可节省内存，例如"RGB_565"等，与img标签jsv_img_color_space配合，默认值"RGBA_8888"
- *        net_setting {object}:  (未实现)网络加载参数，cookie, refer等，默认值 null
- -->
-<script>
-import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
-
-const CONST_FORMAT_TOKEN = "_JsvP_";
-const buildPreloadInfo = (
-  url,
-  width = 0,
-  height = 0,
-  color_type = "RGBA_8888",
-  net_setting = null
-) => {
-  return {
-    url,
-    width,
-    height,
-    colorType: color_type,
-    netSetting: net_setting,
-    magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
-  };
-};
-
-const buildDownloadInfo = (url, net_setting = null) => {
-  return {
-    url,
-    netSetting: net_setting,
-    magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
-  };
-};
-
-export { buildPreloadInfo, buildDownloadInfo };
-
-export default {
-  props: {
-    preloadList: Object,
-    downloadList: Object,
-    onPreloading: Function,
-    onPreloadDone: Function,
-    onDownloadDone: Function,
-    sprayStyle: Object,
-  },
-  data() {
-    return {
-      preloadViewList: [],
-      downloadViewList: [],
-      preloadStateList: [],
-      downloadStateList: [],
-      preloadResultMap: {},
-      CONST_FORMAT_TOKEN: "_JsvP_",
-      preloadIsNullNum: 0, // 纪录传入的preload为null的数量，由于vue不支持在子组件修改props值，所有在删除值为null时，需要++，这样才能保证与传入数据的length相等从而触发回调
-    };
-  },
-  methods: {
-    _releaseForgeView() {
-      if (window.JsView) {
-        if (this.preloadViewList.length > 0) {
-          for (const view_info of this.preloadViewList) {
-            if (view_info) {
-              // 当预加载url为null时view_info为null
-              const id = view_info.viewId;
-              // UnMarkImportant & UnregisterLoadImageCallback(这两个API同版本加入)
-              if (
-                view_info.textureRef &&
-                view_info.textureRef.DisableBackgroundLoad
-              ) {
-                view_info.textureRef.DisableBackgroundLoad(this);
-                view_info.textureRef.UnregisterLoadImageCallback(
-                  view_info.callToken
-                );
-              }
-              ForgeExtension.RootActivity.ViewStore.remove(id);
-            }
-          }
-          this.preloadViewList = [];
-        }
-
-        if (this.downloadViewList.length > 0) {
-          for (const view_info of this.downloadViewList) {
-            if (view_info) {
-              // 当预加载url为null时view_info为null
-              const id = view_info.viewId;
-              // UnMarkImportant & UnregisterLoadImageCallback(这两个API同版本加入)
-              if (
-                view_info.textureRef &&
-                view_info.textureRef.DisableBackgroundLoad
-              ) {
-                view_info.textureRef.DisableBackgroundLoad(this);
-                view_info.textureRef.UnregisterLoadImageCallback(
-                  view_info.callToken
-                );
-              }
-              ForgeExtension.RootActivity.ViewStore.remove(id);
-            }
-          }
-          this.downloadViewList = [];
-        }
-      } else {
-        this.preloadViewList = [];
-        this.downloadViewList = [];
-        this.preloadStateList = [];
-        this.downloadStateList = [];
-      }
-    },
-
-    // shouldComponentUpdate(nextProps, nextState) {
-    //     if (
-    //         nextProps.preloadList.length === this.preloadList.length &&
-    //         nextProps.downloadList.length === this.downloadList.length
-    //     ) {
-    //     let same = true;
-    //     for (let i = 0; i < nextProps.preloadList.length; i++) {
-    //         if (nextProps.preloadList[i].url !== this.preloadList[i].url) {
-    //             same = false;
-    //             break;
-    //         }
-    //     }
-    //     for (let i = 0; i < nextProps.downloadList.length; i++) {
-    //         if (nextProps.downloadList[i].url !== this.downloadList[i].url) {
-    //             same = false;
-    //             break;
-    //         }
-    //     }
-    //     return !same;
-    //     }
-    //     return true;
-    // },
-
-    _checkPreload() {
-      let loadedNum = 0;
-      this.preloadStateList.forEach((state) => {
-        loadedNum = state ? ++loadedNum : loadedNum;
-      });
-      if (this.onPreloading) {
-        this.onPreloading(loadedNum / this.preloadStateList.length);
-      }
-      if (
-        this.onPreloadDone &&
-        loadedNum === this.preloadStateList.length - this.preloadIsNullNum
-      ) {
-        this.onPreloadDone(this.preloadResultMap);
-      }
-    },
-
-    _getPreloadViewIdList() {
-      if (!this.preloadList) {
-        return;
-      }
-      this.preloadStateList = new Array(this.preloadList.length).fill(false);
-      // 直接在map前将为null的值删除掉
-      let preloadListData = this.preloadList;
-      for (let i = 0; i < preloadListData.length; i++) {
-        if (!preloadListData[i]) {
-          preloadListData.splice(i, 1);
-          this.preloadIsNullNum++;
-        }
-      }
-      this.preloadViewList = preloadListData.map((item, index) => {
-        if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
-          console.error(
-            "Error:format mismatch, data should comes from function buildPreloadInfo()"
-          );
-        }
-        const base_url = item.url;
-        let image_url = base_url;
-        if (base_url && base_url.indexOf("http") < 0) {
-          // 包含http和https两种请求
-          if (window.JsView.React.UrlRef) {
-            image_url = new window.JsView.React.UrlRef(base_url).href;
-          }
-        }
-        let target_size = null;
-        if (item.width !== 0 && item.height !== 0) {
-          target_size = { width: item.width, height: item.height };
-        }
-        let texture = null;
-        if (
-          image_url &&
-          (image_url.toLowerCase().indexOf(".webp") >= 0 ||
-            image_url.toLowerCase().indexOf(".gif") >= 0)
-        ) {
-          texture = ForgeExtension.TextureManager.GetGifImage(image_url, false);
-        } else {
-          texture = ForgeExtension.TextureManager.GetImage2(
-            image_url,
-            false,
-            target_size,
-            item.colorType
-          );
-        }
-        if (!texture) {
-          console.error(
-            "Error: Preload view build texture failed for " + image_url
-          );
-          this.preloadStateList[index] = true; // 无法创建texture的图片先认为加载完成
-          return;
-        }
-        const callback_token = texture.RegisterLoadImageCallback(
-          null,
-          (params) => {
-            console.log(`preload succeed ${image_url}`, params);
-            this.preloadStateList[index] = true;
-            this.preloadResultMap[item.url] = {
-              width: params.width,
-              height: params.height,
-            };
-            console.log(`preload succeed ${item.url}, params:${params}`);
-            this._checkPreload();
-          }
-        );
-        if (texture.EnableBackgroundLoad) {
-          texture.EnableBackgroundLoad(this);
-        }
-        const texture_setting = new Forge.ExternalTextureSetting(texture);
-        const preload_view = new Forge.PreloadView(texture_setting);
-        return {
-          viewId: ForgeExtension.RootActivity.ViewStore.add(
-            new Forge.ViewInfo(preload_view, {
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0,
-            })
-          ),
-          textureRef: texture,
-          callToken: callback_token,
-        };
-      });
-    },
-
-    _checkDownload() {
-      for (const state of this.downloadStateList) {
-        if (!state) return;
-      }
-      if (this.$props.onDownloadDone) {
-        console.log("zhang $props downloadStateList =",this.downloadStateList)
-        this.$props.onDownloadDone(this.downloadStateList);
-      }
-    },
-
-    _getDownloadViewIdList() {
-      if (!this.downloadList) {
-        return;
-      }
-      this.downloadStateList = new Array(this.downloadList.length).fill(null);
-      // 直接在map前将url为null的值清除掉
-      let downloadListData = this.downloadList;
-      for (let i = 0; i < downloadListData.length; i++) {
-        if (!downloadListData[i].url) {
-          downloadListData.splice(i, 1);
-        }
-      }
-      this.downloadViewList = downloadListData.map((item, index) => {
-        if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
-          console.error(
-            "Error:format mismatch, data should comes from function buildDownloadInfo()"
-          );
-        }
-        const base_url = item.url;
-        let image_url = base_url;
-        if (base_url && base_url.indexOf("http") < 0) {
-          // 包含http和https两种请求
-          if (window.JsView.React.UrlRef) {
-            image_url = new window.JsView.React.UrlRef(base_url).href;
-          }
-        }
-        const texture =
-          ForgeExtension.TextureManager.GetDownloadTexture(image_url);
-        if (!texture) {
-        console.error("Error: Down view build texture failed for " + image_url);
-        // 无法创建texture的图片先认为加载完成
-        this.downloadStateList[index] = "invalid";
-        return;
-      }
-      const callback_token = texture.RegisterLoadImageCallback(null, (texture_info) => {
-        console.log("zhang texture_info =",texture_info);
-        this.downloadStateList[index] = texture_info.extra.absolutePath;
-        this._checkDownload();
-      });
-        if (texture.EnableBackgroundLoad) {
-          texture.EnableBackgroundLoad(this);
-        }
-        const texture_setting = new Forge.TextureSetting(texture); // Download类型的释放跟随view一同释放
-        const preload_view = new Forge.PreloadView(texture_setting);
-
-        return {
-          viewId: ForgeExtension.RootActivity.ViewStore.add(
-            new Forge.ViewInfo(preload_view, {
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0,
-            })
-          ),
-          textureRef: texture,
-          callToken: callback_token,
-        };
-      });
-    },
-  },
-  created() {
-    this._releaseForgeView();
-    this._getPreloadViewIdList();
-    this._getDownloadViewIdList();
-  },
-  beforeUnmount() {
-    this._releaseForgeView();
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div v-for="item in preloadViewList" :key="item.viewId" :id="item.viewId">
-      <div v-if="item.viewId" :jsv_innerview="item.viewId"></div>
-    </div>
-    <div v-for="item in downloadViewList" :key="item.viewId" :id="item.viewId">
-      <div v-if="item.viewId" :jsv_innerview="item.viewId"></div>
-    </div>
-  </div>
+<!--
+ * 【模块 export 内容】
+ * JsvPreload：Vue高阶组件，图片预加载的控件
+ *      preloadList {ObjectArray}: 预加载的信息列表，单个内容通过buildPreloadInfo构建
+ *      downloadList {ObjectArray}: 预下载的信息列表，单个内容通过buildDownloadInfo构建
+ *      onPreloading {Function(float percent)}: 预加载中回调，返回预加载进度
+ *      onPreloadDone {Function()}: 预加载完成回调
+ *      onDownloadDone {Function(pathes)}: 预下载完成回调,pathes为下载好回调的地址
+ *
+ * 注意事项:
+ *      指定加载时的尺寸(0为不指定)，与img标签中的 jsv_img_scaledown_tex 属性一起使用
+ *      指定加载色空间，与div标签中的 jsv_img_color_space 一起使用。
+ *      因为，同样url情况下，jsv_img_scaledown_tex 和 jsv_img_color_space 启用后，不同的尺寸不同颜色空间
+ *      对应着各自不同的图片内存缓存
+ *
+ * 静态函数:
+ *  buildPreloadInfo: 静态函数，创建预加载信息项，用于制作JsvPreload的preloadList属性列表信息
+ *        参数:
+ *        url {string}:  (必填)图片url
+ *        width {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
+ *        height {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
+ *        color_type {string}:  图片存储颜色空间，去掉alpha通道可节省内存，例如"RGB_565"等，与img标签jsv_img_color_space配合，默认值"RGBA_8888"
+ *        net_setting {object}:  (未实现)网络加载参数，cookie, refer等，默认值 null
+ *
+ *  buildDownloadInfo: 函数，创建预下载信息项，用于制作JsvPreload的downloadList属性列表信息
+ *        参数:
+ *        url {string}:  (必填)图片url
+ *        width {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
+ *        height {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
+ *        color_type {string}:  图片存储颜色空间，去掉alpha通道可节省内存，例如"RGB_565"等，与img标签jsv_img_color_space配合，默认值"RGBA_8888"
+ *        net_setting {object}:  (未实现)网络加载参数，cookie, refer等，默认值 null
+ -->
+<script>
+import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
+
+const CONST_FORMAT_TOKEN = "_JsvP_";
+const buildPreloadInfo = (
+  url,
+  width = 0,
+  height = 0,
+  color_type = "RGBA_8888",
+  net_setting = null
+) => {
+  return {
+    url,
+    width,
+    height,
+    colorType: color_type,
+    netSetting: net_setting,
+    magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
+  };
+};
+
+const buildDownloadInfo = (url, net_setting = null) => {
+  return {
+    url,
+    netSetting: net_setting,
+    magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
+  };
+};
+
+export { buildPreloadInfo, buildDownloadInfo };
+
+export default {
+  props: {
+    preloadList: Object,
+    downloadList: Object,
+    onPreloading: Function,
+    onPreloadDone: Function,
+    onDownloadDone: Function,
+    sprayStyle: Object,
+  },
+  data() {
+    return {
+      preloadViewList: [],
+      downloadViewList: [],
+      preloadStateList: [],
+      downloadStateList: [],
+      preloadResultMap: {},
+      CONST_FORMAT_TOKEN: "_JsvP_",
+      preloadIsNullNum: 0, // 纪录传入的preload为null的数量，由于vue不支持在子组件修改props值，所有在删除值为null时，需要++，这样才能保证与传入数据的length相等从而触发回调
+    };
+  },
+  methods: {
+    _releaseForgeView() {
+      if (window.JsView) {
+        if (this.preloadViewList.length > 0) {
+          for (const view_info of this.preloadViewList) {
+            if (view_info) {
+              // 当预加载url为null时view_info为null
+              const id = view_info.viewId;
+              // UnMarkImportant & UnregisterLoadImageCallback(这两个API同版本加入)
+              if (
+                view_info.textureRef &&
+                view_info.textureRef.DisableBackgroundLoad
+              ) {
+                view_info.textureRef.DisableBackgroundLoad(this);
+                view_info.textureRef.UnregisterLoadImageCallback(
+                  view_info.callToken
+                );
+              }
+              ForgeExtension.RootActivity.ViewStore.remove(id);
+            }
+          }
+          this.preloadViewList = [];
+        }
+
+        if (this.downloadViewList.length > 0) {
+          for (const view_info of this.downloadViewList) {
+            if (view_info) {
+              // 当预加载url为null时view_info为null
+              const id = view_info.viewId;
+              // UnMarkImportant & UnregisterLoadImageCallback(这两个API同版本加入)
+              if (
+                view_info.textureRef &&
+                view_info.textureRef.DisableBackgroundLoad
+              ) {
+                view_info.textureRef.DisableBackgroundLoad(this);
+                view_info.textureRef.UnregisterLoadImageCallback(
+                  view_info.callToken
+                );
+              }
+              ForgeExtension.RootActivity.ViewStore.remove(id);
+            }
+          }
+          this.downloadViewList = [];
+        }
+      } else {
+        this.preloadViewList = [];
+        this.downloadViewList = [];
+        this.preloadStateList = [];
+        this.downloadStateList = [];
+      }
+    },
+
+    // shouldComponentUpdate(nextProps, nextState) {
+    //     if (
+    //         nextProps.preloadList.length === this.preloadList.length &&
+    //         nextProps.downloadList.length === this.downloadList.length
+    //     ) {
+    //     let same = true;
+    //     for (let i = 0; i < nextProps.preloadList.length; i++) {
+    //         if (nextProps.preloadList[i].url !== this.preloadList[i].url) {
+    //             same = false;
+    //             break;
+    //         }
+    //     }
+    //     for (let i = 0; i < nextProps.downloadList.length; i++) {
+    //         if (nextProps.downloadList[i].url !== this.downloadList[i].url) {
+    //             same = false;
+    //             break;
+    //         }
+    //     }
+    //     return !same;
+    //     }
+    //     return true;
+    // },
+
+    _checkPreload() {
+      let loadedNum = 0;
+      this.preloadStateList.forEach((state) => {
+        loadedNum = state ? ++loadedNum : loadedNum;
+      });
+      if (this.onPreloading) {
+        this.onPreloading(loadedNum / this.preloadStateList.length);
+      }
+      if (
+        this.onPreloadDone &&
+        loadedNum === this.preloadStateList.length - this.preloadIsNullNum
+      ) {
+        this.onPreloadDone(this.preloadResultMap);
+      }
+    },
+
+    _getPreloadViewIdList() {
+      if (!this.preloadList) {
+        return;
+      }
+      this.preloadStateList = new Array(this.preloadList.length).fill(false);
+      // 直接在map前将为null的值删除掉
+      let preloadListData = this.preloadList;
+      for (let i = 0; i < preloadListData.length; i++) {
+        if (!preloadListData[i]) {
+          preloadListData.splice(i, 1);
+          this.preloadIsNullNum++;
+        }
+      }
+      this.preloadViewList = preloadListData.map((item, index) => {
+        if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
+          console.error(
+            "Error:format mismatch, data should comes from function buildPreloadInfo()"
+          );
+        }
+        const base_url = item.url;
+        let image_url = base_url;
+        if (base_url && base_url.indexOf("http") < 0) {
+          // 包含http和https两种请求
+          if (window.JsView.React.UrlRef) {
+            image_url = new window.JsView.React.UrlRef(base_url).href;
+          }
+        }
+        let target_size = null;
+        if (item.width !== 0 && item.height !== 0) {
+          target_size = { width: item.width, height: item.height };
+        }
+        let texture = null;
+        if (
+          image_url &&
+          (image_url.toLowerCase().indexOf(".webp") >= 0 ||
+            image_url.toLowerCase().indexOf(".gif") >= 0)
+        ) {
+          texture = ForgeExtension.TextureManager.GetGifImage(image_url, false);
+        } else {
+          texture = ForgeExtension.TextureManager.GetImage2(
+            image_url,
+            false,
+            target_size,
+            item.colorType
+          );
+        }
+        if (!texture) {
+          console.error(
+            "Error: Preload view build texture failed for " + image_url
+          );
+          this.preloadStateList[index] = true; // 无法创建texture的图片先认为加载完成
+          return;
+        }
+        const callback_token = texture.RegisterLoadImageCallback(
+          null,
+          (params) => {
+            console.log(`preload succeed ${image_url}`, params);
+            this.preloadStateList[index] = true;
+            this.preloadResultMap[item.url] = {
+              width: params.width,
+              height: params.height,
+            };
+            console.log(`preload succeed ${item.url}, params:${params}`);
+            this._checkPreload();
+          }
+        );
+        if (texture.EnableBackgroundLoad) {
+          texture.EnableBackgroundLoad(this);
+        }
+        const texture_setting = new Forge.ExternalTextureSetting(texture);
+        const preload_view = new Forge.PreloadView(texture_setting);
+        return {
+          viewId: ForgeExtension.RootActivity.ViewStore.add(
+            new Forge.ViewInfo(preload_view, {
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+            })
+          ),
+          textureRef: texture,
+          callToken: callback_token,
+        };
+      });
+    },
+
+    _checkDownload() {
+      for (const state of this.downloadStateList) {
+        if (!state) return;
+      }
+      if (this.$props.onDownloadDone) {
+        console.log("zhang $props downloadStateList =",this.downloadStateList)
+        this.$props.onDownloadDone(this.downloadStateList);
+      }
+    },
+
+    _getDownloadViewIdList() {
+      if (!this.downloadList) {
+        return;
+      }
+      this.downloadStateList = new Array(this.downloadList.length).fill(null);
+      // 直接在map前将url为null的值清除掉
+      let downloadListData = this.downloadList;
+      for (let i = 0; i < downloadListData.length; i++) {
+        if (!downloadListData[i].url) {
+          downloadListData.splice(i, 1);
+        }
+      }
+      this.downloadViewList = downloadListData.map((item, index) => {
+        if (item.magicToken !== this.CONST_FORMAT_TOKEN) {
+          console.error(
+            "Error:format mismatch, data should comes from function buildDownloadInfo()"
+          );
+        }
+        const base_url = item.url;
+        let image_url = base_url;
+        if (base_url && base_url.indexOf("http") < 0) {
+          // 包含http和https两种请求
+          if (window.JsView.React.UrlRef) {
+            image_url = new window.JsView.React.UrlRef(base_url).href;
+          }
+        }
+        const texture =
+          ForgeExtension.TextureManager.GetDownloadTexture(image_url);
+        if (!texture) {
+        console.error("Error: Down view build texture failed for " + image_url);
+        // 无法创建texture的图片先认为加载完成
+        this.downloadStateList[index] = "invalid";
+        return;
+      }
+      const callback_token = texture.RegisterLoadImageCallback(null, (texture_info) => {
+        console.log("zhang texture_info =",texture_info);
+        this.downloadStateList[index] = texture_info.extra.absolutePath;
+        this._checkDownload();
+      });
+        if (texture.EnableBackgroundLoad) {
+          texture.EnableBackgroundLoad(this);
+        }
+        const texture_setting = new Forge.TextureSetting(texture); // Download类型的释放跟随view一同释放
+        const preload_view = new Forge.PreloadView(texture_setting);
+
+        return {
+          viewId: ForgeExtension.RootActivity.ViewStore.add(
+            new Forge.ViewInfo(preload_view, {
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+            })
+          ),
+          textureRef: texture,
+          callToken: callback_token,
+        };
+      });
+    },
+  },
+  created() {
+    this._releaseForgeView();
+    this._getPreloadViewIdList();
+    this._getDownloadViewIdList();
+  },
+  beforeUnmount() {
+    this._releaseForgeView();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-for="item in preloadViewList" :key="item.viewId" :id="item.viewId">
+      <div v-if="item.viewId" :jsv_innerview="item.viewId"></div>
+    </div>
+    <div v-for="item in downloadViewList" :key="item.viewId" :id="item.viewId">
+      <div v-if="item.viewId" :jsv_innerview="item.viewId"></div>
+    </div>
+  </div>
 </template>