@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/BakeViewDemo/AnimatePic.vue

@@ -5,7 +5,7 @@ import { getDataUrl } from "../CommonUtils/ResourceData";
 const DemoResourceBase = getDataUrl();
 const item_url = DemoResourceBase
   ? `${DemoResourceBase}/27bda620942566673ab449a3ef765321.png`
-  : "http://oss.image.qcast.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
+  : "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/BakeViewDemo/AnimatePic/27bda620942566673ab449a3ef765321.png";
 
 const staticLeftPos = shallowRef(0);
 let moveLeftTimer = -1;

package/Basic/components/text/TextDirection.vue

@@ -8,6 +8,8 @@ const unitHeight = 20 + 35;
 
 const ltrText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
+
+const showReverseEllipsis = window.JsvCoreApi?.Platform == "android";
 </script>
 
 <template>
@@ -35,6 +37,7 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
     >
       <div class="explain">ltr文字省略头部</div>
       <div
+        v-if="showReverseEllipsis"
         class="content-font base"
         :style="{
           direction: 'rtl',
@@ -42,6 +45,7 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
       >
         {{ ltrText }}
       </div>
+      <div v-else class="explain" :style="{top: 25}">此平台不测试</div>
     </div>
 
     <div
@@ -67,6 +71,7 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
     >
       <div class="explain">rtl文字省略头部</div>
       <div
+        v-if="showReverseEllipsis"
         class="content-font base"
         :style="{
           direction: 'ltr',
@@ -74,6 +79,7 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
       >
         {{ rtlText }}
       </div>
+      <div v-else class="explain" :style="{top: 25}">此平台不测试</div>
     </div>
   </div>
 </template>
@@ -91,7 +97,6 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
   font-size: 25;
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 .explain {
@@ -101,4 +106,4 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
   font-size: 15;
   color: #000000;
 }
-</style>
+</style>

package/BasicFocusControl/components/BaseBlock.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { shallowRef, onMounted, inject } from "vue";
-import { CONST_FILL_NAME_FUNC, CONST_COLUMN_MARK } from "./constants.js"
-import { useFocusHub } from "jsview"
+import { CONST_FILL_NAME_FUNC, CONST_COLUMN_MARK } from "./constants.js";
+import { useFocusHub } from "jsview";
 const props = defineProps({
   focusBlockName: String,
   style: {
@@ -11,7 +11,7 @@ const props = defineProps({
     },
   },
   defineColumn: Number,
-  defineLine: Number
+  defineLine: Number,
 });
 
 const fbName = props.focusBlockName; // 以列号作为自己的JsvfocusBlock的name
@@ -26,40 +26,87 @@ const funcFullFilled = inject(CONST_FILL_NAME_FUNC);
 const columnMark = inject(CONST_COLUMN_MARK); // 全局行记录器，用于纵向移动时保持列
 
 onMounted(() => {
-  const syncName = async ()=> {
+  const syncName = async () => {
     // 由于vue的mount回调从子到父节点传递,而FocusBlock焦点树要在根节点mount完成后才建立完。所以getFullName是一个异步函数。
     fullName.value = await blockRef.value.getFullName(); // 用名字更新方块内的名称
     funcFullFilled(props.defineLine, props.defineColumn, fullName.value); // 将全名同步给最外层app, 以便于全局跳转
-    console.log(`name taken success name=${fullName.value}`)
-  }
+    console.log(`name taken success name=${fullName.value}`);
+  };
   syncName();
 });
 
 const onFocus = () => {
-  const nameSpace = focusHub.getNameSpace();// 注意: 如果nameSpace为根节点时，获得的NameSpace的String为空字符串
-  console.log(`${nameSpace}.${fbName} focused`) 
+  const nameSpace = focusHub.getNameSpace(); // 注意: 如果nameSpace为根节点时，获得的NameSpace的String为空字符串
+  console.log(`${nameSpace}.${fbName} focused`);
   hasFocused.value = true;
   columnMark.value = props.defineColumn;
+
+  // 用于测试焦点深入处理
+  focusHub.setFocus(fbName + "_dep1");
 };
 
 const onBlur = () => {
-  console.log(`${focusHub.getNameSpace()}.${fbName} blured`)
+  console.log(`${focusHub.getNameSpace()}.${fbName} blured`);
   hasFocused.value = false;
 };
 
+const onSubDep1Focus = () => {
+  const nameSpace = focusHub.getNameSpace();
+  console.log(`${nameSpace}.${fbName}_dep1 focused`);
+
+  // 用于测试焦点深入处理(第二层)
+  focusHub.setFocus(fbName + "_dep2");
+};
+
+const onSubDep1Blur = () => {
+  const nameSpace = focusHub.getNameSpace();
+  console.log(`${nameSpace}.${fbName}_dep1 blured`);
+};
+
+const onSubDep2Focus = () => {
+  const nameSpace = focusHub.getNameSpace();
+  console.log(`${nameSpace}.${fbName}_dep2 focused`);
+};
+
+const onSubDep2Blur = () => {
+  const nameSpace = focusHub.getNameSpace();
+  console.log(`${nameSpace}.${fbName}_dep2 blured`);
+};
 </script>
 
 <template>
-  <jsv-focus-block ref="blockRef" :name="fbName" :onAction="{
-    onFocus,
-    onBlur,
-  }">
-    <div class="title" :style="{
-      left: props.style.left,
-      backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
-    }">
+  <jsv-focus-block
+    ref="blockRef"
+    :name="fbName"
+    :onAction="{
+      onFocus,
+      onBlur,
+    }"
+  >
+    <div
+      class="title"
+      :style="{
+        left: props.style.left,
+        backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
+      }"
+    >
       {{ fullName }}
     </div>
+    <jsv-focus-block
+      :name="fbName + '_dep1'"
+      :onAction="{
+        onFocus: onSubDep1Focus,
+        onBlur: onSubDep1Blur,
+      }"
+    >
+      <jsv-focus-block
+        :name="fbName + '_dep2'"
+        :onAction="{
+          onFocus: onSubDep2Focus,
+          onBlur: onSubDep2Blur,
+        }"
+      />
+    </jsv-focus-block>
   </jsv-focus-block>
 </template>
 
@@ -72,4 +119,4 @@ const onBlur = () => {
   width: 155;
   height: 50;
 }
-</style>
+</style>