@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/DemoHomepage/App.vue

@@ -6,16 +6,24 @@
  * @Description: file content
 -->
 <script setup>
-import { shallowRef, onMounted, onUnmounted } from "vue";
-import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge, JsvFocusBlock, useFocusHub } from "jsview";
+import { shallowRef, onMounted, onUnmounted, provide } from "vue";
+import {
+  JsvPreload,
+  buildPreloadInfo,
+  jJsvRuntimeBridge,
+  JsvFocusBlock,
+  useFocusHub,
+  JsvTouchModeSwitcher,
+} from "jsview";
 import { useRouter } from "vue-router";
-import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js"
-import { getSearchQuery } from "../CommonUtils/getSearchQuery.js"
+import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
+import { getSearchQuery } from "../CommonUtils/getSearchQuery.js";
 
-let DemoResourceBase=shallowRef("")
+let DemoResourceBase = shallowRef("");
 let backgroundImageUrl = shallowRef(null);
-
-let preloadInfo = shallowRef([]);
+const touchModeSwitcherRef = shallowRef();
+provide("touchModeSwitcherRef", touchModeSwitcherRef);
+// let preloadInfo = shallowRef([]);
 
 window.DebugFocusHub = useFocusHub();
 
@@ -41,52 +49,63 @@ let testKeepAliveModeText = shallowRef(1);
 let testKeepAliveTimer = -1;
 
 //解析url
-let query = getSearchQuery(window.location.href, undefined, 0)
+let query = getSearchQuery(window.location.href, undefined, 0);
 if (query.DemoResourceBase) {
-  setDataUrl(query.DemoResourceBase)
+  setDataUrl(query.DemoResourceBase);
   //无网络环境下使用
-  DemoResourceBase.value = getDataUrl()
+  DemoResourceBase.value = getDataUrl();
 }
 onMounted(() => {
+  touchModeSwitcherRef.value?.registerCallback((mode) => {
+    console.log("change mode to", mode == 1 ? "key" : "touch");
+  });
   console.log("simulate async get background url");
   setTimeout(() => {
     console.log("simulate background url got");
-    backgroundImageUrl.value = DemoResourceBase.value ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
-      :
-      "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
-    preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
+    backgroundImageUrl.value = DemoResourceBase.value
+      ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
+      : "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+    // preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
   }, 0);
 
   console.log("start homepage interval");
-  testKeepAliveTimer = setInterval(()=>{
+  testKeepAliveTimer = setInterval(() => {
     testKeepAliveModeText.value++;
-  }, 1000)
+  }, 1000);
 });
 
-onUnmounted(()=>{
+onUnmounted(() => {
   if (testKeepAliveTimer > 0) {
     console.log("remove homepage interval");
     clearInterval(testKeepAliveTimer);
     testKeepAliveTimer = -1;
   }
-})
-
+});
 </script>
 
 <template>
-  <div>
-    <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" />
-    <div :style="{
-      width: 1280,
-      height: 720,
-      backgroundImage: backgroundImageUrl,
-    }" />
+  <jsv-touch-mode-switcher
+    ref="touchModeSwitcherRef"
+    :width="1280"
+    :height="720"
+  >
+    <!-- <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" /> -->
+    <img
+      :src="backgroundImageUrl"
+      :style="{
+        width: 1280,
+        height: 720,
+      }"
+      @load="_onPreloadDone"
+    />
     <div class="TestKeepAliveDiv">
-      {{ "刷新:" + testKeepAliveModeText }}
+      {{ "更新页面计数:" + testKeepAliveModeText }}
     </div>
-    <jsv-focus-block :onAction="{
-      onKeyDown: _OnKeyDown
-    }">
+    <jsv-focus-block
+      :onAction="{
+        onKeyDown: _OnKeyDown,
+      }"
+    >
       <router-view v-slot="{ Component, route }">
         <keep-alive>
           <component v-if="route.meta.keepAlive" :is="Component" />
@@ -94,7 +113,7 @@ onUnmounted(()=>{
         <component v-if="!route.meta.keepAlive" :is="Component" />
       </router-view>
     </jsv-focus-block>
-  </div>
+  </jsv-touch-mode-switcher>
 </template>
 
 <style scoped>
@@ -107,5 +126,4 @@ onUnmounted(()=>{
   line-height: 30;
   color: #eb20c6;
 }
-
 </style>

package/DemoHomepage/components/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { shallowRef, computed } from "vue"
+import { shallowRef, computed, inject } from "vue";
 const props = defineProps({
   style: Object,
   itemClick: Function,
@@ -7,16 +7,17 @@ const props = defineProps({
   data: Object,
   query: Object,
   onAction: Object,
-})
+});
 
-let focused = shallowRef(false)
+let focused = shallowRef(false);
+const touchModeSwitcherRef = inject("touchModeSwitcherRef");
 
 const foucsStyle = computed(() => {
   return {
     width: props.style.width,
     height: props.style.height,
   };
-})
+});
 
 const itemStyle = computed(() => {
   return {
@@ -25,31 +26,41 @@ const itemStyle = computed(() => {
     backgroundColor: props.style.backgroundColor,
     color: props.style.color,
   };
+});
 
-})
+const modeChangeCallback = (mode) => {
+  if (mode == 2) {
+    focused.value = false;
+  } else {
+    focused.value = true;
+  }
+};
 
 const onFocus = () => {
-  focused.value = true;
+  //为了避免每个item都注册回调, 这里onFocus时注册, onBlur时注销
+  touchModeSwitcherRef.value.registerCallback(modeChangeCallback);
+  if (touchModeSwitcherRef.value.getInteractiveMode() == 1) {
+    focused.value = true;
+  }
   if (props.itemFocus) {
     props.itemFocus(props.data);
   }
-}
+};
 
 const onBlur = () => {
+  touchModeSwitcherRef.value.unregisterCallback(modeChangeCallback);
   focused.value = false;
-}
+};
 
 const onClick = () => {
-  console.log("testtest", "onclick ", props.data.name)
   if (props.itemClick) {
     props?.itemClick(props.query.id, props.data);
   }
-}
+};
 
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
-
 </script>
 
 <template>
@@ -72,4 +83,4 @@ props.onAction.register("onClick", onClick);
   text-align: center;
   font-size: 30;
 }
-</style>
+</style>

package/DemoHomepage/index.d.ts

@@ -1,5 +1,8 @@
 import App from './App.vue'
 
-export * from "./router.js"
+import { router } from "./router.js"
 
-export default App
+export default App
+export {
+  router
+}