@shijiu/jsview-vue-samples 2.2.201 → 2.2.373

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>

package/FullScreenFlex/App.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { jJsvRuntimeBridge } from "jsview";
+import TestFrame2 from "./TestFrame2.vue";
+
+const UseTestFrame = TestFrame2;
+
+const router = useRouter();
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+
+  return true;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <UseTestFrame />
+  </jsv-focus-block>
+</template>
+
+<style scoped></style>

package/FullScreenFlex/TestFrame2.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import image1 from "./images/1.png";
+import { JsvScreenFlex } from "jsview";
+</script>
+
+<template>
+  <!-- 测试aligneContent未设置, 内容进行stretch的场景 -->
+  <JsvScreenFlex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+    }"
+    background="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg"
+  >
+    <div
+      id="DivAnchor1"
+      :style="{
+        width: 50,
+        height: 50,
+        backgroundColor: '#00F000',
+      }"
+    />
+    <div
+      :style="{
+        width: 50,
+        height: 50,
+        backgroundColor: '#0000F0',
+      }"
+    />
+  </JsvScreenFlex>
+
+  <JsvScreenFlex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }"
+  >
+    <div
+      id="DivAnchor2"
+      :style="{
+        width: 200,
+        height: 200,
+        backgroundColor: '#00F000',
+      }"
+    />
+    <div
+      :style="{
+        width: 200,
+        height: 200,
+        backgroundColor: '#0000F0',
+      }"
+    />
+  </JsvScreenFlex>
+
+  <JsvScreenFlex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-end',
+    }"
+  >
+    <div
+      id="DivAnchor3"
+      :style="{
+        width: 300,
+        height: 300,
+      }"
+    >
+      <div
+        :style="{
+          top: 10,
+          left: 10,
+          width: 280,
+          height: 280,
+          backgroundColor: '#00F000',
+        }"
+      />
+    </div>
+    <div
+      :style="{
+        width: 300,
+        height: 300,
+      }"
+    >
+      <div
+        :style="{
+          top: 10,
+          left: 10,
+          width: 280,
+          height: 280,
+          backgroundColor: '#0000F0',
+        }"
+      />
+    </div>
+  </JsvScreenFlex>
+</template>
+
+<style scoped></style>

package/HashHistory/App.vue

@@ -21,6 +21,7 @@ let topRef = shallowRef(null);
 let routePage = shallowRef(null);
 let currentRouter;
 if (props.routePath) {
+  // 向主Router插入新路径定义
   const currentRoute = useRoute();
   currentRouter = useRouter();
 
@@ -38,6 +39,7 @@ if (props.routePath) {
 
   currentRouter.replace(props.routePath + redirectPath); // 自动跳转到redirectPath
 } else {
+  // 主Router就是自己
   currentRouter = router;
 }
 currentRouter.afterEach(() => {
@@ -63,7 +65,11 @@ onMounted(() => {
         <component
           :is="Component"
           ref="routePage"
-          class="router"
+          class="childComponentStyle"
+          :style="{
+            top:150,
+            overflow:'hidden'
+          }"
           @requestFocus="onRequestFocus"
         />
       </router-view>
@@ -96,11 +102,9 @@ onMounted(() => {
   background-color: #00f000;
 }
 
-.router {
+.childComponentStyle {
   left: 0;
-  top: 150;
   width: 1920;
   height: 930;
-  overflow: hidden;
 }
 </style>