@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/FlexCellDemo/TestFrame1.vue

@@ -0,0 +1,88 @@
+<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];
+  if (!window.JsView) {
+    // PC模拟环境要通过key来刷新确保界面flex正常
+    rRefreshId.value = rIndex.value;
+  }
+}, 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>

package/FlexCellDemo/TestFrame3.vue

@@ -0,0 +1,97 @@
+<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>
+  <div
+    :style="{
+      left: -50,
+      width: 350,
+      height: 400,
+      overflow: 'hidden',
+    }"
+  >
+    <div
+      :style="{
+        left: 50,
+        width: 300,
+        height: 400,
+        backgroundColor: 'rgba(100,100,100,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)',
+            alignSelf: 'center',
+          }"
+        >
+          <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>
+</template>
+
+<style scoped></style>

package/FlexCellDemo/TestFrame4.vue

@@ -0,0 +1,60 @@
+<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>
+  <!-- 测试aligneContent未设置, 内容进行stretch的场景, 有剩余 -->
+  <JsvFlexDiv
+    :style="{
+      width: 300,
+      height: 400,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'stretch',
+      flexWrap: 'wrap',
+      // alignContent: 'center',
+    }"
+  >
+    <div
+      :style="{
+        height: 40,
+        width: 300,
+        fontSize: 15,
+        lineHeight: 18,
+        color: '#FFFFFF',
+        textAlign: 'center',
+      }"
+    >
+      {{ "测试多行aligneContent未设置,\n 内容进行stretch的场景，有剩余" }}
+    </div>
+    <img :src="image1" :style="{ height: 50 }" />
+    <img :src="image1" :style="{ height: 80 }" />
+    <div
+      id="DivAnchor1"
+      :style="{ width: 20, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
+    />
+    <img :src="image1" :style="{ height: 70 }" />
+
+    <img :src="image1" :style="{ height: 70 }" />
+    <img :src="image1" :style="{ height: 80 }" />
+    <img :src="image1" :style="{ height: 60 }" />
+    <img :src="image1" :style="{ height: 30 }" />
+    <div
+      id="DivAnchor2"
+      :style="{ width: 60, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
+    />
+
+    <img :src="image1" :style="{ height: 100 }" />
+    <div
+      id="DivAnchor3"
+      :style="{ width: 100, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
+    />
+    <img :src="image1" :style="{ height: 100 }" />
+  </JsvFlexDiv>
+</template>
+
+<style scoped></style>

package/FlexCellDemo/TestFrame5.vue

@@ -0,0 +1,60 @@
+<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>
+  <!-- 测试aligneContent:center, 内容进行stretch的场景, 有剩余 -->
+  <JsvFlexDiv
+    :style="{
+      width: 300,
+      height: 400,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'stretch',
+      flexWrap: 'wrap',
+      alignContent: 'center',
+    }"
+  >
+    <div
+      :style="{
+        height: 40,
+        width: 300,
+        fontSize: 15,
+        lineHeight: 18,
+        color: '#FFFFFF',
+        textAlign: 'center',
+      }"
+    >
+      {{ "测试多行aligneContent : center,\n 内容进行stretch的场景，有剩余" }}
+    </div>
+    <img :src="image1" :style="{ height: 50 }" />
+    <img :src="image1" :style="{ height: 80 }" />
+    <div
+      id="DivAnchor1"
+      :style="{ width: 20, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
+    />
+    <img :src="image1" :style="{ height: 70 }" />
+
+    <img :src="image1" :style="{ height: 70 }" />
+    <img :src="image1" :style="{ height: 80 }" />
+    <img :src="image1" :style="{ height: 60 }" />
+    <img :src="image1" :style="{ height: 30 }" />
+    <div
+      id="DivAnchor2"
+      :style="{ width: 60, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
+    />
+
+    <img :src="image1" :style="{ height: 100 }" />
+    <div
+      id="DivAnchor3"
+      :style="{ width: 100, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
+    />
+    <img :src="image1" :style="{ height: 100 }" />
+  </JsvFlexDiv>
+</template>
+
+<style scoped></style>

package/FocusMoveStyle/App.vue

@@ -199,6 +199,7 @@ const onAllResizeDone = () => {
           :initTop="currentFocusRect?.top"
           :initWidth="currentFocusRect?.width"
           :initHeight="currentFocusRect?.height"
+          id="main"
         >
         </creep-focus>
       </template>

package/FocusMoveStyle/CreepFocus.vue

@@ -3,6 +3,11 @@ import { JsvNinePatch, getKeyFramesGroup } from "jsview";
 import { reactive, onBeforeUnmount } from "vue";
 
 const props = defineProps({
+  //为了确保多个keyframe动画不重名, 需要传递id
+  id: {
+    type: String,
+    required: true,
+  },
   imgUrl: {
     type: String,
   },
@@ -87,7 +92,7 @@ const changeRect = (rect, doAnim = true) => {
   if (first) {
     first = false;
   } else if (doAnim) {
-    const animName = "test_focusMove_" + animateChange;
+    const animName = props.id + animateChange;
     animateChange = animateChange == 0 ? 1 : 0; // A B 版切换
     addAnimation(preRect, curRect, animName);
     focusSize.animation = `${animName} 0.3s linear`;
@@ -104,6 +109,10 @@ onBeforeUnmount(() => {
   }
 });
 
+function onAnimationEnd() {
+  console.log("testtest onAnimationEnd")
+}
+
 defineExpose({
   changeRect,
 });
@@ -124,5 +133,6 @@ defineExpose({
     :borderOutset="0"
     :animTime="0.2"
     :waitForInit="true"
+    :onAnimationEnd="onAnimationEnd"
   ></jsv-nine-patch>
 </template>

package/FocusMoveStyle/FoldableItem.vue

@@ -297,7 +297,7 @@ const onKeyDown = (ev) => {
           />
         </template>
         <template #background>
-          <creep-focus v-if="showFocus" ref="creepFocus" :imgUrl="redCircle">
+          <creep-focus v-if="showFocus" ref="creepFocus" :imgUrl="redCircle" :id="'child' + props.query.index">
           </creep-focus>
         </template>
       </list-widget>