@shijiu/jsview-vue-samples 2.2.201 → 2.2.426-test.0

package/DragBox/App.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { JsvDragBox } from "jsview";
+import { shallowRef, onMounted, ref, computed } from "vue";
+
+const vDragBox1 = shallowRef();
+const vDragBox2 = shallowRef();
+const vHole1Fitted = ref(false);
+const vHole2Fitted = ref(false);
+
+const vHole1Text = computed(() => {
+  return vHole1Fitted.value ? "已放入" : "未放入";
+});
+const vHole2Text = computed(() => {
+  return vHole2Fitted.value ? "已放入" : "未放入";
+});
+
+const hole1Style = {
+  left: 50,
+  top: 200,
+  width: 100,
+  height: 100,
+  backgroundColor: "#00FF0088",
+};
+const hole2Style = {
+  left: 200,
+  top: 300,
+  width: 100,
+  height: 50,
+  backgroundColor: "#0000FF88",
+};
+function ifFit(cur, target) {
+  return (
+    Math.abs(cur.left - target.left) < 10 && Math.abs(cur.top - target.top) < 10
+  );
+}
+function onMove1(pos) {
+  vHole1Fitted.value = ifFit(pos, hole1Style);
+}
+
+function onMove2(pos) {
+  vHole2Fitted.value = ifFit(pos, hole2Style);
+}
+
+const cBoxRect = {
+  left: 100,
+  top: 100,
+  width: 400,
+  height: 400,
+};
+onMounted(() => {
+  vDragBox1.value.setSensor(onMove1, 12);
+  vDragBox1.value.setTouchCallback(
+    (pos) => {
+      console.log("1 drag start", pos);
+    },
+    (pos) => {
+      let p = vDragBox1.value.getPosition();
+      console.log("1 drag end", pos, p);
+      if (ifFit(p, hole1Style)) {
+        vDragBox1.value.moveTo(hole1Style.left, hole1Style.top);
+      }
+    }
+  );
+  vDragBox2.value.setSensor(onMove2, 12);
+  vDragBox2.value.setTouchCallback(
+    (pos) => {
+      console.log("2 drag start", pos);
+    },
+    (pos) => {
+      let p = vDragBox2.value.getPosition();
+      console.log("2 drag end", pos, p);
+      if (ifFit(p, hole2Style)) {
+        vDragBox2.value.moveTo(hole2Style.left, hole2Style.top);
+      }
+    }
+  );
+});
+</script>
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#ffffff' }"></div>
+  <div
+    :style="{
+      ...cBoxRect,
+      backgroundColor: '#ff0000aa',
+    }"
+  >
+    <div :style="hole1Style"></div>
+    <div :style="hole2Style"></div>
+  </div>
+
+  <div :style="{
+    left: 20,
+    top: 20,
+    width: 1280,
+    height: 100,
+    fontSize: 30,
+    color: '#000000'
+  }">
+    拖动带文字的方块放入对应的矩形中, 当拖动到附近时释放后会自动吸附
+  </div>
+
+  <jsv-drag-box
+    ref="vDragBox1"
+    :boxRect="cBoxRect"
+    :dragRect="{
+      left: 50,
+      top: 50,
+      width: hole1Style.width,
+      height: hole1Style.height,
+    }"
+  >
+    <div
+      :style="{
+        width: hole1Style.width,
+        height: hole1Style.height,
+        backgroundColor: '#00FF00',
+        lineHeight: hole1Style.height,
+        fontSize: 20,
+      }"
+    >
+      {{ vHole1Text }}
+    </div>
+  </jsv-drag-box>
+
+  <jsv-drag-box
+    ref="vDragBox2"
+    :boxRect="cBoxRect"
+    :dragRect="{
+      left: 250,
+      top: 50,
+      width: hole2Style.width,
+      height: hole2Style.height,
+    }"
+  >
+    <div
+      :style="{
+        width: hole2Style.width,
+        height: hole2Style.height,
+        backgroundColor: '#0000FF',
+        lineHeight: hole2Style.height,
+        fontSize: 20,
+        color: '#ffffff',
+      }"
+    >
+      {{ vHole2Text }}
+    </div>
+  </jsv-drag-box>
+</template>

package/FlexCellDemo/App.vue

@@ -6,9 +6,14 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { onMounted, shallowRef } from "vue";
 import { useRouter } from "vue-router";
-import { JsvFlexDiv, jJsvRuntimeBridge } from "jsview";
+import { JsvFlexDiv, jJsvRuntimeBridge, DefaultKeyCodeMap } from "jsview";
+import TestFrame1 from "./TestFrame1.vue";
+import TestFrame2 from "./TestFrame2.vue";
+import TestFrame3 from "./TestFrame3.vue";
+import TestFrame4 from "./TestFrame4.vue";
+import TestFrame5 from "./TestFrame5.vue";
 
 import image1 from "./images/1.png";
 import image2 from "./images/2.png";
@@ -18,25 +23,33 @@ import image4 from "./images/4.jpg";
 const router = useRouter();
 
 const enableManualDemo = false;
-const enableTest1 = true;
-const enableTest2 = true;
-const enableTest3 = true;
+const cEnableTestArray = [
+  { open: true, comp: TestFrame1 },
+  { open: true, comp: TestFrame2 },
+  { open: true, comp: TestFrame3 },
+  { open: true, comp: TestFrame4 },
+  { open: true, comp: TestFrame5 },
+];
+
+let vDivLeft = shallowRef(0);
+const cMoveLeftGap = 350;
 
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == DefaultKeyCodeMap.Left) {
+    if (vDivLeft.value > 0) {
+      vDivLeft.value -= cMoveLeftGap;
+    }
+  } else if (ev.keyCode == DefaultKeyCodeMap.Right) {
+    if (vDivLeft.value < cMoveLeftGap * (cEnableTestArray.length - 2)) {
+      vDivLeft.value += cMoveLeftGap;
+    }
   }
 
   return true;
 };
 
-const _onSizeTest1_1 = (width, height) => {
-  console.log(`Flex ready Test1_1 w=${width} h=${height}`);
-};
-const _onSizeTest1_2 = (width, height) => {
-  console.log(`Flex ready Test1_2 w=${width} h=${height}`);
-};
-
 onMounted(() => {
   jJsvRuntimeBridge.notifyPageLoaded();
 });
@@ -66,6 +79,7 @@ onMounted(() => {
     >
       <jsv-flex-div
         :style="{
+          width: 300,
           height: 400,
           flexDirection: 'row',
           flexWrap: 'wrap',
@@ -77,43 +91,8 @@ onMounted(() => {
       >
         <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
         <jsv-flex-div :style="{ flexWrap: 'wrap' }" :onSized="_onSizeTest1_2">
-          <img :src="image1" :style="{ height: 45 }" />
-          <img :src="image2" :style="{ height: 60 }" />
-          <img :src="image1" :style="{ height: 45 }" />
-          <img :src="image1" :style="{ height: 45 }" />
-        </jsv-flex-div>
-        <img :src="image3" :style="{ height: 50 }" />
-        <img :src="image4" :style="{ height: 50 }" />
-      </jsv-flex-div>
-    </div>
-
-    <!-- 测试人员自动测试时打开，最左端测试样例 -->
-    <div
-      v-if="!enableManualDemo && enableTest1"
-      :style="{
-        top: 150,
-        left: 50,
-        width: 300,
-        height: 400,
-        backgroundColor: 'rgba(0,128,128,0.5)',
-      }"
-    >
-      <jsv-flex-div
-        :style="{
-          height: 400,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          justifyContent: 'flex-end',
-          alignItems: 'flex-start',
-          alignContent: 'center',
-        }"
-        :onSized="_onSizeTest1_1"
-      >
-        <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
-        <jsv-flex-div :style="{ flexWrap: 'wrap' }" :onSized="_onSizeTest1_2">
-          <img :src="image1" :style="{ height: 45 }" />
+          <img :src="image1" :style="{ height: 80 }" />
           <img :src="image2" :style="{ height: 60 }" />
-          <div :style="{ height: 60, width: 60, backgroundColor: '#FF0000' }" />
           <img :src="image1" :style="{ height: 45 }" />
           <img :src="image1" :style="{ height: 45 }" />
         </jsv-flex-div>
@@ -122,192 +101,37 @@ onMounted(() => {
       </jsv-flex-div>
     </div>
 
-    <!-- 测试人员自动测试时打开，中间测试样例 -->
-    <div
-      v-if="!enableManualDemo && enableTest2"
-      :style="{
-        top: 150,
-        left: 400,
-        width: 300,
-        height: 400,
-        backgroundColor: 'rgba(0,128,128,0.5)',
-      }"
-    >
-      <jsv-flex-div
+    <div :style="{ left: -vDivLeft }">
+      <!-- 测试人员自动测试时打开，最左端测试样例 -->
+      <div
+        v-for="(item, index) in cEnableTestArray"
+        :key="'' + index"
         :style="{
+          top: 150,
+          left: 50 + index * cMoveLeftGap,
           width: 300,
-          flexDirection: 'row-reverse',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignItems: 'flex-end',
-          backgroundColor: 'rgba(128,0,0,0.5)',
+          height: 400,
+          backgroundColor: 'rgba(0,128,128,0.5)',
         }"
       >
-        <!-- 测试主轴尺寸比内容的主轴尺寸小的场下的折行行为 -->
-        <jsv-flex-div
-          :style="{
-            width: 30,
-            flexWrap: 'wrap',
-            backgroundColor: 'rgba(0, 128, 0, 0.5)',
-          }"
-        >
-          <img :src="image1" :style="{ height: 50 }" />
-          <img :src="image2" :style="{ height: 50 }" />
-        </jsv-flex-div>
-        <img :src="image3" :style="{ height: 50 }" />
-        <img :src="image4" :style="{ height: 50 }" />
-        <img :src="image1" :style="{ height: 50 }" />
-        <img :src="image2" :style="{ height: 50 }" />
-        <img :src="image3" :style="{ height: 50 }" />
-        <img :src="image4" :style="{ height: 50 }" />
-
-        <!-- 测试内嵌div, 且div中子项有top/left设置(确认PC环境下是否有问题) -->
-        <div :style="{ height: 150, width: 100 }">
-          <div
-            :style="{
-              left: 25,
-              top: 50,
-              height: 50,
-              width: 50,
-              backgroundColor: '#FF0000',
-            }"
-          >
-            <div
-              :style="{
-                left: 10,
-                top: 10,
-                height: 30,
-                width: 30,
-                backgroundColor: '#00FF00',
-              }"
-            ></div>
-          </div>
+        <div v-if="!enableManualDemo && item.open">
+          <component :is="item.comp" />
         </div>
-
-        <!-- 测试子项目的strech, 孙子为flex-start -->
-        <jsv-flex-div
-          :style="{
-            width: 60,
-            flexDirection: 'column',
-            alignSelf: 'stretch',
-            alignItems: 'flex-start',
-          }"
-        >
-          <img :src="image1" :style="{ height: 50 }" />
-          <img :src="image1" :style="{ height: 50 }" />
-        </jsv-flex-div>
-
-        <!-- 测试内容内嵌有子view -->
-        <div
-          :style="{
-            width: 80,
-            height: 80,
-            backgroundImage: `url(${image4})`,
-          }"
-        >
-          <img :src="image1" :style="{ left: 10, top: 10, height: 40 }" />
-          <img :src="image1" :style="{ left: 15, top: 15, height: 45 }" />
-          <img :src="image1" :style="{ left: 20, top: 20, height: 50 }" />
-        </div>
-        <div
-          :style="{
-            width: 80,
-            height: 80,
-            backgroundColor: '#0F0F7F',
-          }"
-        >
-          <img :src="image1" :style="{ left: 10, top: 10, height: 40 }" />
-          <img :src="image1" :style="{ left: 15, top: 15, height: 45 }" />
-          <img :src="image1" :style="{ left: 20, top: 20, height: 50 }" />
-        </div>
-      </jsv-flex-div>
+      </div>
     </div>
 
     <div
-      v-if="!enableManualDemo && enableTest3"
       :style="{
-        top: 150,
-        left: 700,
-        width: 400,
-        height: 400,
-        overflow: 'hidden',
+        top: 600,
+        height: 40,
+        width: 1280,
+        fontSize: 35,
+        lineHeight: 40,
+        color: '#FFFFFF',
+        textAlign: 'center',
       }"
     >
-      <div
-        :style="{
-          left: 50,
-          width: 300,
-          height: 400,
-          backgroundColor: 'rgba(0,128,128,0.5)',
-          fontSize: 12,
-          color: '#000000',
-          textAlign: 'center',
-          lineHeight: 16,
-        }"
-      >
-        <jsv-flex-div
-          :style="{
-            width: 300,
-            height: 400,
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            justifyContent: 'center',
-          }"
-        >
-          <!-- 文字绘制区域超过容器尺寸的内容的测试 -->
-          <div :style="{ width: 450, backgroundColor: 'rgba(0, 50, 0, 0.5)' }">
-            {{
-              "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
-            }}
-          </div>
-
-          <!-- 文字绘制区域未超过容器尺寸的内容的测试 -->
-          <div :style="{ width: 250, backgroundColor: 'rgba(0, 70, 0, 0.5)' }">
-            {{
-              "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
-            }}
-          </div>
-
-          <!-- 超长折行文字测试点，文字字数大于3000字，最后一个字为'拾' -->
-          <div
-            :style="{
-              height: 16,
-              backgroundColor: 'rgba(0, 90, 0, 0.5)',
-              whiteSpace: 'nowrap',
-            }"
-          >
-            {{
-              "一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九拾"
-            }}
-          </div>
-
-          <!-- 短文字横向排布接续的测试 -->
-          <jsv-flex-div
-            :style="{
-              flexDirection: 'row',
-              alignItems: 'center',
-              backgroundColor: 'rgba(0, 110, 0, 0.5)',
-            }"
-          >
-            <div :style="{ height: 16 }">
-              {{ "++一二三" }}
-            </div>
-            <div
-              :style="{
-                height: 20,
-                lineHeight: 20,
-                fontSize: 18,
-                backgroundColor: 'rgba(10, 0, 0, 0.5)',
-              }"
-            >
-              {{ "四五六" }}
-            </div>
-            <div :style="{ height: 16 }">
-              {{ "七八九++" }}
-            </div>
-          </jsv-flex-div>
-        </jsv-flex-div>
-      </div>
+      {{ "[[[[  左右键进行浏览  ]]]]" }}
     </div>
   </jsv-focus-block>
 </template>

package/FlexCellDemo/TestFrame1.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { onUnmounted, shallowRef } from "vue";
+import { JsvFlexDiv } from "jsview";
+import image1 from "./images/1.png";
+import image2 from "./images/2.png";
+import image3 from "./images/3.png";
+import image4 from "./images/4.jpg";
+import image5 from "./images/6.jpg";
+
+let rMyWidth = shallowRef(undefined);
+let rMyHeight = shallowRef(undefined);
+
+// 测试flex处理，当尺寸为undefined, 0, null时的显示状态
+const cWidth = [null, 50, undefined, 0, 0, undefined];
+const cHeight = [null, 50, undefined, 0, undefined, 0];
+let rIndex = shallowRef(0);
+let rRefreshId = shallowRef(0);
+let vInvToken = setInterval(() => {
+  rIndex.value++;
+  rMyWidth.value = cWidth[rIndex.value % cWidth.length];
+  rMyHeight.value = cHeight[rIndex.value % cHeight.length];
+}, 2000);
+
+onUnmounted(() => {
+  if (vInvToken > 0) {
+    clearInterval(vInvToken);
+    vInvToken = -1;
+  }
+});
+
+const _onSizeTest1_1 = (width, height) => {
+  console.log(`Flex ready Test1_1 w=${width} h=${height}`);
+};
+const _onSizeTest1_2 = (width, height) => {
+  console.log(`Flex ready Test1_2 w=${width} h=${height}`);
+};
+</script>
+
+<template>
+  <div>
+    <div
+      :style="{
+        fontSize: 30,
+        lineHeight: 32,
+        color: '#FF0000',
+      }"
+    >
+      {{ `${rIndex % cWidth.length}` }}
+    </div>
+    <jsv-flex-div
+      :style="{
+        width: 300,
+        height: 400,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-start',
+        alignContent: 'center',
+      }"
+      :onSized="_onSizeTest1_1"
+    >
+      <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
+      <jsv-flex-div
+        :key="rRefreshId"
+        :style="{ flexWrap: 'wrap' }"
+        :onSized="_onSizeTest1_2"
+      >
+        <img :src="image5" :style="{ width: rMyWidth, height: rMyHeight }" />
+        <!-- <img :src="image5" :style="{ height: 0 }" /> -->
+        <img :src="image2" :style="{ height: 45 }" />
+        <div
+          id="DivAnchor"
+          :style="{ height: 60, width: 60, backgroundColor: '#FF0000' }"
+        />
+        <img :src="image1" :style="{ height: 45 }" />
+        <img :src="image1" :style="{ height: 45 }" />
+      </jsv-flex-div>
+      <img :src="image3" :style="{ height: 50 }" />
+      <!-- <img :src="image4" :style="{ height: 50 }" /> -->
+    </jsv-flex-div>
+  </div>
+</template>
+
+<style scoped></style>

package/FlexCellDemo/TestFrame2.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { JsvFlexDiv } from "jsview";
+import image1 from "./images/1.png";
+import image2 from "./images/2.png";
+import image3 from "./images/3.png";
+import image4 from "./images/4.jpg";
+</script>
+
+<template>
+  <jsv-flex-div
+    :style="{
+      width: 300,
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      backgroundColor: 'rgba(128,0,0,0.5)',
+    }"
+  >
+    <!-- 测试主轴尺寸比内容的主轴尺寸小的场下的折行行为 -->
+    <jsv-flex-div
+      :style="{
+        width: 30,
+        flexWrap: 'wrap',
+        backgroundColor: 'rgba(0, 128, 0, 0.5)',
+      }"
+    >
+      <img :src="image1" :style="{ height: 50 }" />
+      <img :src="image2" :style="{ height: 50 }" />
+    </jsv-flex-div>
+    <img :src="image3" :style="{ height: 50 }" />
+    <img :src="image4" :style="{ height: 50 }" />
+    <img :src="image1" :style="{ height: 50 }" />
+    <img :src="image2" :style="{ height: 50 }" />
+    <img :src="image3" :style="{ height: 50 }" />
+    <img :src="image4" :style="{ height: 50 }" />
+
+    <!-- 测试内嵌div, 且div中子项有top/left设置(确认PC环境下是否有问题) -->
+    <div :style="{ height: 150, width: 100 }">
+      <div
+        :style="{
+          left: 25,
+          top: 50,
+          height: 50,
+          width: 50,
+          backgroundColor: '#FF0000',
+        }"
+      >
+        <div
+          :style="{
+            left: 10,
+            top: 10,
+            height: 30,
+            width: 30,
+            backgroundColor: '#00FF00',
+          }"
+        ></div>
+      </div>
+    </div>
+
+    <!-- 测试子项目的strech, 孙子为flex-start -->
+    <jsv-flex-div
+      :style="{
+        width: 60,
+        flexDirection: 'column',
+        alignSelf: 'stretch',
+        alignItems: 'flex-start',
+      }"
+    >
+      <img :src="image1" :style="{ height: 50 }" />
+      <img :src="image1" :style="{ height: 50 }" />
+    </jsv-flex-div>
+
+    <!-- 测试内容内嵌有子view -->
+    <div
+      :style="{
+        width: 80,
+        height: 80,
+        backgroundImage: `url(${image4})`,
+      }"
+    >
+      <img :src="image1" :style="{ left: 10, top: 10, height: 40 }" />
+      <img :src="image1" :style="{ left: 15, top: 15, height: 45 }" />
+      <img :src="image1" :style="{ left: 20, top: 20, height: 50 }" />
+    </div>
+    <div
+      :style="{
+        width: 80,
+        height: 80,
+        backgroundColor: '#0F0F7F',
+      }"
+    >
+      <img :src="image1" :style="{ left: 10, top: 10, height: 40 }" />
+      <img :src="image1" :style="{ left: 15, top: 15, height: 45 }" />
+      <img :src="image1" :style="{ left: 20, top: 20, height: 50 }" />
+    </div>
+  </jsv-flex-div>
+</template>
+
+<style scoped></style>