@shijiu/jsview-vue 2.2.373 → 2.2.426-test.0

package/utils/JsViewVueTools/TypeCheckAndSet.ts

@@ -0,0 +1,66 @@
+var number_convert_tmp = new Float32Array(1);
+
+/**
+ * 创建基于基地址的全地址模式
+ * 主要用于转化以下的URL类型
+ * 类型1: "url(/相对路径/项目资源/1.png)"
+ * 类型2: "/相对路径/项目资源/1.png"
+ * 类型3: jsview内定类型 "jsvtexturestore:xxxx"
+ * 类型4: 未知的内定类型 "data:xxxx"
+ * 
+ * 同时兼容送入http://完整路径/1.png，转换出来结果等同于没有对此url进行变化
+ * 
+ * @param {string} origin_url 
+ * @return {String}
+ */
+function parseUrl(origin_url: String): String {
+    let url_result = origin_url;
+
+    // url(/xxx/xxx) 格式
+    if (url_result.startsWith('url') === true) {
+        let startIdx = url_result.indexOf('(') + 1;
+        let endIdx = url_result.lastIndexOf(')');
+        url_result = url_result.substring(startIdx, endIdx).trim();
+        if (url_result === "undefined" || url_result === "null" || url_result.length === 0) {
+            // 空内容，不进行其他自动解析和填充
+            return url_result;
+        }
+    }
+
+    // data:xxxx, jsvtexturestore:xxxx 格式
+    if (url_result.startsWith('data:') === true || url_result.startsWith('jsvtexturestore:') === true) {
+        return url_result;
+    }
+
+    // 拆掉 url() 包装后的url相对路径转换
+    let base_url = (window.location as any).jsvGetLocation ?
+        (window.location as any).jsvGetLocation()    // native运行场景，启动链接为 mjs 非 index.html场景
+        : window.location.href;
+    let url_parse = new (window as any).JsvCoreApi.UrlBuilder(url_result, base_url);
+
+    return url_parse.href;
+}
+
+function numberCheckSet(number: number): number {
+    number_convert_tmp[0] = number; // 强制类型转换, 避免JSON化时类型出错，因为 '123' 123 都能通过Nan检测
+    if (!isNaN(number_convert_tmp[0])) {
+        return number_convert_tmp[0];
+    } else {
+        console.warn(`${number} is not type of number, default as 0`);
+        return 0;
+    }
+}
+
+function urlCheckSet(origin_url: String): String {
+    if (origin_url && origin_url.indexOf("http") === 0) {
+        // 包含http和https两种请求
+        return origin_url;
+    } else {
+        return parseUrl(origin_url);
+    }
+}
+
+export {
+    numberCheckSet,
+    urlCheckSet
+};

package/utils/JsViewVueTools/index.js

@@ -9,7 +9,7 @@ export * from "./JsvDynamicCssStyle";
 export * from "./JsvDynamicKeyFrames";
 export * from "./JsvRuntimeBridge";
 export * from "./NinePatchHelper";
-export * from "./TypeCheckAndSet";
+export * from "./TypeCheckAndSet.ts";
 export * from "./JsvRefTaker";
 export * from "./JsvStyleClass";
 export * from "./JsvStyleSheetsDeclarer";

package/utils/JsViewVueWidget/JsvFlexCell/JsvScreenFlex.vue

@@ -28,6 +28,7 @@
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { shallowRef, watchEffect, onUnmounted } from "vue";
 import JsvFlexDiv from "./JsvFlexDiv.vue";
+import { urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet.ts";
 import { ForgeTextureApis } from "../../JsViewVueTools/TextureManagerTools.ts";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 
@@ -52,7 +53,7 @@ const cDivWidth = Forge.sRenderBridge.GetScreenInfo().designedWidth;
 
 let rConfig = shallowRef({});
 
-let vTextreStringCache = null; // 用于判断是否需要texture更换的flag
+let vTextureStringCache = null; // 用于判断是否需要texture更换的flag
 let vStretchViewRef = null;
 
 // 创建AutoStretchView来自动识别JsView的视窗大小
@@ -74,29 +75,23 @@ watchEffect(() => {
   rConfig.value.askSize = rProps.askSize;
   rConfig.value.onSized = rProps.onSized;
 
-  if (rProps.background != vTextreStringCache) {
+  if (rProps.background != vTextureStringCache) {
     // 构建背景Texture
-    vTextreStringCache = rProps.background;
+    vTextureStringCache = rProps.background;
 
     let texture_setting = null;
 
-    if (vTextreStringCache != null) {
+    if (vTextureStringCache != null) {
       const texture_manager = ForgeHandles.TextureManager;
       if (
-        vTextreStringCache.trim().startsWith("#") ||
-        vTextreStringCache.trim().startsWith("rgba")
+        vTextureStringCache.trim().startsWith("#") ||
+        vTextureStringCache.trim().startsWith("rgba")
       ) {
         texture_setting = new Forge.TextureSetting(
-          ForgeTextureApis.GetColorTexture(texture_manager, vTextreStringCache)
+          ForgeTextureApis.GetColorTexture(texture_manager, vTextureStringCache)
         );
       } else {
-        const base_url = vTextreStringCache;
-        let image_url = base_url;
-        if (base_url && base_url.indexOf("http") === 0) {
-          image_url = base_url;
-        } else if (window.JsView?.Dom.UrlRef) {
-          image_url = new window.JsView.Dom.UrlRef(base_url).href;
-        }
+        let image_url = urlCheckSet(vTextureStringCache);
         texture_setting = new Forge.ExternalTextureSetting(
           ForgeTextureApis.GetImage(texture_manager, image_url)
         );

package/utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue

@@ -44,6 +44,7 @@
 <script setup>
 import { onMounted, onUnmounted, shallowRef } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet.ts";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import {
   FeatureNames,
@@ -87,6 +88,8 @@ const rProps = defineProps({
 // 激活引擎中的功能支持
 JsvUseFeature("JsvFragShaderView", FeatureNames.CustomFragShader);
 
+console.log("LudlDebug using JsvFragShaderView...");
+
 let rAnimRunning = shallowRef(false); // 动画是否在执行，画面只在动画进行时进行显示
 let vPreloadHandler = null;
 let vPreloadDone = false;
@@ -115,7 +118,7 @@ if (rProps.textures) {
     if (typeof item.resource == "string") {
       let image_url = item.resource;
       if (item.resource && item.resource.trim().indexOf("url(") === 0) {
-        image_url = new window.JsView.Dom.UrlRef(image_url).href;
+        image_url = urlCheckSet(image_url);
       }
       const texture = texture_manager.GetImage2(
         image_url,

package/utils/JsViewVueWidget/JsvFragShaderView/index.js

@@ -6,13 +6,6 @@
  * @Description: file content
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
-import * as JsvFragShaderView from "./JsvFragShaderView.vue";
 
-let _JsvFragShaderView;
-if (window.JsView) {
-  _JsvFragShaderView = JsvFragShaderView.default;
-} else {
-  const BrowserJsvFragShaderView = await import("./BrowserJsvFragShaderView.vue");
-  _JsvFragShaderView = BrowserJsvFragShaderView.default;
-}
-export default _JsvFragShaderView;
+export { default } from "./JsvFragShaderView.vue"
+

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -41,6 +41,8 @@ export class EditViewOperator {
 
     private _EditVisibleArea?: EditVisibleArea;
 
+    private _TextChangedCount: number = 0; // 记录文字变化的次数，可用于确认文字是否变化，当style变化或者文字内容变化时+1
+
     // Callback
     private _OnTextChangedCallback: TextChangedFunc;
     private _OnCursorMoved: CursorMovedFunc;
@@ -68,7 +70,9 @@ export class EditViewOperator {
                     this._EditViewHandle.showIme(
                         this._InputType,
                         this._CurrentFullText,
-                        this._CurrentCursorOffset
+                        this._CurrentCursorOffset,
+                        Math.ceil(-this._TextLeft),
+                        0
                     );
                 }
             }
@@ -88,7 +92,9 @@ export class EditViewOperator {
         this._EditViewHandle.showIme(
             this._InputType,
             this._CurrentFullText,
-            this._CurrentCursorOffset
+            this._CurrentCursorOffset,
+            Math.ceil(-this._TextLeft),
+            0
         );
     }
 
@@ -96,8 +102,12 @@ export class EditViewOperator {
         box_width: number, box_height: number,
         cursor_width: number,
         font_style: FontStyleDefine,
-        input_type: number, max_input_lenth: number,
-        text_read_only: boolean) {
+        input_type: number,
+        max_input_lenth: number,
+        text_read_only: boolean,
+        editorTextColor: string,
+        editorBackground: string
+    ) {
 
         // format fontStyle
         this._FontStyle = {
@@ -118,13 +128,23 @@ export class EditViewOperator {
             font_style,
             font_style.textAlign === "right"
         );
+
+        this._EditViewHandle.setEditorStyle(
+            this._FontStyle.fontSize,
+            this._FontStyle.textAlign,
+            editorTextColor,
+            editorBackground
+        )
     }
 
     generateView(): number {
         // 构建EditControlView来处理输入
         this._EditViewHandle = new Forge.EditControlView();
-        this._EditViewHandle.OnTextChanged = this._OnTextChanged.bind(this);
-        this._EditViewHandle.OnStatusChanged = this._OnStatusChanged.bind(this);
+        this._EditViewHandle.addImeEventListener({
+            OnTextChanged: this._OnTextChanged.bind(this),
+            OnStatusChanged: this._OnStatusChanged.bind(this),
+            OnEditAction: null
+        });
 
         this._EditViewId = Forge.sViewStore.add(
             new Forge.ViewInfo(this._EditViewHandle)
@@ -163,7 +183,8 @@ export class EditViewOperator {
                     this._CurrentDspWith,
                     this._CurrentDspWith,
                     new_cursor_index,
-                    true
+                    true,
+                    this._TextChangedCount
                 );
                 this._UpdateDispay(new_text_left, new_cursor_index)
             }
@@ -181,6 +202,8 @@ export class EditViewOperator {
     }
 
     onUnmounted() {
+        this._EditViewHandle?.releaseResource();
+        this._EditVisibleArea!.releaseResource();
         if (this._EditViewId != -1) {
             Forge.sViewStore.remove(this._EditViewId);
             this._EditViewId = -1;
@@ -208,13 +231,20 @@ export class EditViewOperator {
     }
 
     // EditControlView当输入变化时的回调
-    private _OnTextChanged(text: string, cursor_index: number) {
+    private _OnTextChanged(text: string, cursor_index: number, scroll_left?: number) {
+        let p = {
+            text,
+            cursor_index,
+            scroll_left
+        }
         if (typeof text != 'string' || text.length >= this._MaxInputLenth) {
             // 非法输入或者输入限制，超输入限制，文字内容不改变
             if (this._EditViewHandle && this._IsFocus) {
                 this._EditViewHandle.updateCursorOffset(
                     this._CurrentDspText,
-                    this._CurrentCursorOffset
+                    this._CurrentCursorOffset,
+                    Math.ceil(-this._TextLeft),
+                    0
                 );
             }
             return;
@@ -231,7 +261,9 @@ export class EditViewOperator {
                 // 输入内容非法，不更换内容
                 this._EditViewHandle!.updateCursorOffset(
                     this._CurrentDspText,
-                    this._CurrentCursorOffset
+                    this._CurrentCursorOffset,
+                    Math.ceil(-this._TextLeft),
+                    0
                 );
                 return;
             }
@@ -251,6 +283,7 @@ export class EditViewOperator {
                 this._CurrentDspText = text;
             }
             this._CurrentDspWith = getTextDisplayWidth(this._CurrentDspText, this._FontStyle!);
+            this._TextChangedCount++; // 记录文字信息发生了变化
         } else {
             // 仅由EditView发出来的光标移动事件
         }
@@ -262,7 +295,8 @@ export class EditViewOperator {
             origin_dsp_width,
             this._CurrentDspWith,
             cursor_index,
-            false
+            false,
+            this._TextChangedCount
         );
 
         this._UpdateDispay(new_text_left, cursor_index);
@@ -272,8 +306,7 @@ export class EditViewOperator {
         }
     }
 
-    private _OnStatusChanged() {
-        // console.log("OnStatusChanged status", status);
+    private _OnStatusChanged(visible: boolean) {
     }
 
     public addText(text: string) {
@@ -317,4 +350,4 @@ export class EditViewOperator {
         // 全部内容替换
         this._OnTextChanged(text, text?.length);
     }
-}
+}

package/utils/JsViewVueWidget/JsvInput/EditVisibleArea.ts

@@ -1,4 +1,4 @@
-import { calculateCursorPosition } from "./SystemTextTools";
+import { calculateCursorPosition, calculateCursorPositionCached, recycleCursorMeasureCache } from "./SystemTextTools";
 import { FontStyleDefine, MAX_WIDTH } from "./SharedDefine";
 
 export class EditVisibleArea {
@@ -13,6 +13,10 @@ export class EditVisibleArea {
     private _TextVisibleEndPos: number = 0; // 显示区域的末尾是整段文字第几个像素上
     private _VisibleAreaCurPos: number = 0; // 光标在整段文字的第几个像素上
 
+    // 管理Cursor measure的cache
+    private _CursorMeasureCachedId: number = 0;
+    private _CursorMeasuredToken: number = 0;
+
     constructor(area_width: number, area_height: number,
         cursor_width: number,
         font_style: FontStyleDefine,
@@ -33,10 +37,17 @@ export class EditVisibleArea {
         return this._VisibleAreaCurPos;
     }
 
+    releaseResource() {
+        if (this._CursorMeasureCachedId > 0) {
+            recycleCursorMeasureCache(this._CursorMeasureCachedId);
+            this._CursorMeasureCachedId = 0;
+        }
+    }
+
     calculateSlide(
         pre_str: string, target_str: string,
         pre_str_dsp_width: number, target_str_dsp_width: number, // 使用外部缓存，减少本地计算
-        cur_index: number, moved: boolean): number {
+        cur_index: number, moved: boolean, text_info_token: number): number {
         if (target_str.length === 0) {
             // 当字符内容清空的场景
             this._VisibleAreaCurPos = 0;
@@ -45,14 +56,36 @@ export class EditVisibleArea {
         }
 
         let new_left = this._TextLeft;
-        const current_cursor_position = calculateCursorPosition(
-            target_str,
-            cur_index,
-            target_str_dsp_width,
-            this._AreaHeight,
-            this._AreaHeight,
-            this._FontStyle
-        );
+        let current_cursor_position = 0;
+        if (cur_index == target_str.length) {
+            // calculateCursorPosition 无法计算最后一个字的位置，所以在此支持返回文字的边缘
+            current_cursor_position = target_str_dsp_width;
+        } else {
+            // 使用 calculateCursorPosition 获得光标显示位置
+            if (this._CursorMeasuredToken == text_info_token && this._CursorMeasureCachedId > 0) {
+                current_cursor_position = calculateCursorPositionCached(
+                    cur_index,
+                    this._CursorMeasureCachedId
+                )
+            } else {
+                if (this._CursorMeasureCachedId > 0) {
+                    recycleCursorMeasureCache(this._CursorMeasureCachedId);
+                    this._CursorMeasureCachedId = 0;
+                }
+
+                let measure_result = calculateCursorPosition(
+                    target_str,
+                    cur_index,
+                    target_str_dsp_width,
+                    this._AreaHeight,
+                    this._AreaHeight,
+                    this._FontStyle
+                );
+                current_cursor_position = measure_result.x;
+                this._CursorMeasureCachedId = measure_result.cachedId; // 注意cached资源需要手动释放
+                this._CursorMeasuredToken = text_info_token; // 记录此token的数据已经有measure cache
+            }
+        }
         let option_mode = "op_vis_normal"; // 可视区域内移动
         // 计算模式
         if (pre_str.length > target_str.length) {

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -10,6 +10,7 @@
  *         type Input.type.TEXT         若为number类型，则输入时，非number无法输入
  *         placeholder {string}         文字颜色值为灰色,默认值为"请输入文字"
  *         placeholderColor {string}    默认文字颜色,默认值为灰色
+ *         editorBackground {string}    当ime出现时，输入框呈现的强调颜色,注意:不能为半透明色
  *         maxLength {number}           最大字符长度, 默认100，支持单行最大宽度为1920*2，
  *                                      fontsize为30，则字数大约为1920*2/30 = 100个左右
  *         readonly {bool}              属性规定输入字段是只读的, 默认false
@@ -89,6 +90,10 @@ const rProps = defineProps({
     type: String,
     default: "#CDCCD6",
   },
+  editorBackground: {
+    type: String,
+    default: "#5d5c76",
+  },
   maxLength: {
     type: Number,
     default: 100,
@@ -155,12 +160,6 @@ function _OnTextChanged(input_final_text, dsp_text) {
 }
 
 function _OnCursorPositionChanged(text_left, cursor_left) {
-  console.log(
-    "_OnCursorPositionChanged text_left=" +
-      text_left +
-      " cursor_left=" +
-      cursor_left
-  );
   rTextPosLeft.value = text_left;
   rCursorLeft.value = cursor_left + text_left;
 }
@@ -172,6 +171,7 @@ let cEditViewOperator = new EditViewOperator(
   rProps.onTextOverflow
 );
 let vEditViewInnerId = cEditViewOperator.generateView(); // 建立Forge.EditView
+
 cEditViewOperator.updateInputConfig(
   rProps.width,
   rProps.height,
@@ -179,7 +179,9 @@ cEditViewOperator.updateInputConfig(
   rProps.fontStyle,
   rProps.type,
   rProps.maxLength,
-  rProps.readonly
+  rProps.readonly,
+  rProps.fontStyle.color,
+  rProps.editorBackground
 );
 
 function _FocusBlockOnFocus() {
@@ -252,7 +254,7 @@ function _FocusBlockOnKeyDown(keyEvent) {
 }
 
 function _FocusBlockOnKeyUp(ev) {
-  if (keyEvent.keyCode == 10000) {
+  if (ev.keyCode == 10000) {
     return !!rProps.onBackKey?.(true);
   }
 
@@ -354,6 +356,17 @@ defineExpose({
       :color="rCursorColorInner"
       :width="rProps.cursorWidth"
     />
-    <div :data-jsv-vw-innerview="vEditViewInnerId" />
+    <div
+      :style="{
+        width: rProps.width,
+        height: rProps.height,
+      }"
+      :data-jsv-vw-innerview="vEditViewInnerId"
+    />
   </jsv-focus-block>
 </template>
+<style scoped>
+.testColor {
+  background-color: #5d5c76;
+}
+</style>

package/utils/JsViewVueWidget/JsvInput/SystemTextTools.ts

@@ -1,5 +1,6 @@
-import { TextTools, getTextWidth } from "../../JsViewVueTools/JsvTextTools"
-import { MAX_WIDTH } from "./SharedDefine";
+import {
+    TextTools
+} from "../../JsViewVueTools/JsvTextTools"
 
 declare interface FontStyleDefine {
     fontSize: number,
@@ -9,6 +10,11 @@ declare interface FontStyleDefine {
     fontWeight: string
 }
 
+export interface CursorResult {
+    x: number,
+    cachedId: number
+}
+
 // 获取单行输入框光标所在位置
 export function calculateCursorPosition(
     display_text: string,
@@ -16,32 +22,40 @@ export function calculateCursorPosition(
     rect_width: number,
     rect_height: number,
     line_height: number,
-    font_style: FontStyleDefine) {
-
-    const target_str = display_text;
-    const font_params = _getPackedFontParams(font_style);
-    const max_width = MAX_WIDTH; // 最大宽度为1920*2， 根据texture的最大宽度设定
-    const text_attr = TextTools.PackTextAttrs("none", "none");
-    const cur_pos = TextTools.GetCursorPosition(
-        target_str,
-        { width: rect_width, height: rect_height },
-        font_params,
-        text_attr,
-        line_height,
-        cursor_offset
-    );
-    return cur_pos.x;
+    font_style: FontStyleDefine): CursorResult {
+
+    let css_font_style = {
+        fontFamily: font_style.fontFamily,
+        fontSize: font_style.fontSize,
+        fontStyle: font_style.fontStyle,
+        fontWeight: font_style.fontWeight
+    };
+
+    let css_textlayout_style = {
+        width: rect_width,
+        height: rect_height,
+        lineHeight: line_height,
+    };
+
+    let cursor_info = TextTools.getCursorPosition(cursor_offset, display_text, css_font_style, css_textlayout_style, true);
+
+    return {
+        x: cursor_info.x,
+        cachedId: cursor_info.cachedId
+    }
 }
 
-export function getTextDisplayWidth(text: string, font_style: FontStyleDefine) {
-    return getTextWidth(text, font_style);
+export function calculateCursorPositionCached(
+    cursor_offset: number,
+    cached_id: number): number {
+    let cursor_info = TextTools.getCursorPositionCached(cached_id, cursor_offset);
+    return cursor_info.x;
+}
+
+export function recycleCursorMeasureCache(cached_id: any) {
+    TextTools.recycleCursorPositionCache(cached_id);
 }
 
-function _getPackedFontParams(font_style: FontStyleDefine): any {
-    const size = font_style.fontSize ? font_style.fontSize : 12;
-    const font = font_style.fontFamily;
-    const alignment = font_style.textAlign;
-    const italic = font_style.fontStyle === "italic";
-    const bold = font_style.fontWeight === "bold";
-    return TextTools.PackFontParams(font!, size, bold, italic, alignment!, null)
-}
+export function getTextDisplayWidth(text: string, font_style: FontStyleDefine) {
+    return TextTools.getTextWidth(text, font_style);
+}

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -15,11 +15,6 @@
 -->
 <script>
 import { Forge, ForgeExtension } from "@shijiu/jsview/dom/jsv-forge-define";
-import ForgeHandles from "../JsViewVueTools/ForgeHandles";
-
-const renderDocument = window.JsvCode.Dom.RenderDocument
-  ? window.JsvCode.Dom.RenderDocument
-  : window.JsvCode.Dom.BrowserDocument;
 
 export default {
   props: {
@@ -59,7 +54,6 @@ export default {
       innerView: null,
       innerViewId: -1,
       styleDetail: null,
-      html: !window.JsView,
       cache: {
         viewSrc: null,
         maskSrc: null,
@@ -114,37 +108,6 @@ export default {
       this.cache.maskWidth = this.maskWidth;
       this.cache.maskHeight = this.maskHeight;
     },
-    _initForHtml() {
-      let _this = this;
-      this.$refs.innerViewDiv
-        ?.jsvGetProxyView(true)
-        .RegisterOnProxyReady(() => {
-          const canvas = renderDocument.createElement("canvas");
-          canvas.style.width = _this.style.width + "px";
-          canvas.style.height = _this.style.height + "px";
-          _this.$refs.innerViewDiv
-            ?.jsvGetProxyView(true)
-            .HtmlGetElement()
-            .appendChild(canvas);
-
-          const clip_image = new Image();
-          const bg_image = new Image();
-          clip_image.src = _this.maskSrc;
-          bg_image.src = _this.viewSrc;
-          let clip_ready = false;
-          let bg_ready = false;
-
-          clip_image.onload = () => {
-            clip_ready = true;
-            _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
-          };
-
-          bg_image.onload = () => {
-            bg_ready = true;
-            _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
-          };
-        });
-    },
     _updateInnerView() {
       if (this.innerView === null) {
         // 初始化View
@@ -186,19 +149,11 @@ export default {
     },
   },
   created() {
-    if (window.JsView) {
-      this._updateInnerView();
-    }
-  },
-  mounted() {
-    if (!window.JsView) {
-      this._initForHtml();
-    }
+    this._updateInnerView();
   },
+  mounted() {},
   updated() {
-    if (window.JsView) {
-      this._updateInnerView();
-    }
+    this._updateInnerView();
   },
   beforeUnmount() {
     // 清理View管理缓存

package/utils/JsViewVueWidget/JsvPosterImage.vue

@@ -52,7 +52,6 @@ const isPosterImage = computed(() => {
 
 let common_style = reactive({});
 let image_style = reactive({});
-let show_background_holder = !!window.JsView; // PC浏览器模拟时, 不显示占位图，避免误导
 
 watchEffect(() => {
   if (props.style) {
@@ -80,7 +79,7 @@ watchEffect(() => {
 
 <template>
   <div :style="common_style">
-    <slot v-if="show_background_holder"></slot>
+    <slot />
     <img
       v-if="!!props.src"
       :data-jsv-vw-enable-fade="props.fadeIn"