@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0-test.0

package/DemoHomepage/views/Homepage.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, shallowRef, onActivated, onDeactivated } from "vue";
-import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
+import { computed, shallowRef, onActivated, onDeactivated, inject, watchEffect } from "vue";
+import { jJsvRuntimeBridge, EdgeDirection, useFocusHub, JsvTextureStoreApi } from "jsview";
 import { useRouter } from "vue-router";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
@@ -146,6 +146,7 @@ let onDialogAction = (msg) => {
 // keep-alive后 router 返回本页面时要激活一下focus
 let focusNameOfDeactive = null;
 onActivated(() => {
+  console.log("Homepage onActivated");
   if (focusNameOfDeactive) {
     focusHub.setFocus(focusNameOfDeactive);
     focusNameOfDeactive = null;
@@ -153,12 +154,49 @@ onActivated(() => {
 });
 
 onDeactivated(() => {
+  console.log("Homepage onDeactivated");
+
+  // 清理'骨架图'截图资源
+  removeCaputureImage();
+
   focusNameOfDeactive = focusHub.getDeactivedPageFocus();
 });
+
+
+// 追加骨架图截图测试项目
+let rCaptureImage = inject("homeCaptureImage");
+let vOriginCaptureImage = null;
+watchEffect(() => {
+  // 监听'骨架图'截图资源变化，并清理旧资源
+  if (vOriginCaptureImage != rCaptureImage.value) {
+    if (vOriginCaptureImage != null) {
+      JsvTextureStoreApi.deleteTexture(vOriginCaptureImage);
+    }
+    vOriginCaptureImage = rCaptureImage.value;
+    console.log("capture_image new value", vOriginCaptureImage);
+  }
+});
+function removeCaputureImage() {
+  if (rCaptureImage.value != null) {
+    JsvTextureStoreApi.deleteTexture(rCaptureImage.value);
+    rCaptureImage.value = null;
+    vOriginCaptureImage = null;
+  }
+}
+
 </script>
 
 <template>
   <div class="rootSize">
+    <!-- 测试keep-alive动画是否影响下个页面的项目 -->
+    <div :style="{ 
+      left: 10, 
+      top: 600, 
+      width: 100, 
+      height: 100, 
+      backgroundColor: 'rgba(128, 128, 0, 1)', 
+      animation: 'AnimRotate 5s linear infinite'}"/>
+
     <div class="address">
       {{ address }}
     </div>
@@ -168,6 +206,7 @@ onDeactivated(() => {
       }}
     </div>
 
+
     <jsv-focus-block
       autoFocus
       :onAction="{
@@ -199,6 +238,13 @@ onDeactivated(() => {
         />
       </div>
 
+      <div v-if="rCaptureImage" :style="{ 
+        left: 1280 - 320 - 10, 
+        top: 720 - 180 - 10, 
+        width: 320, 
+        height: 180, 
+        backgroundImage: `url(jsvtexturestore://${rCaptureImage})`}"/>
+
       <Dialog
         v-show="showExitDialog"
         :name="name + '/exitDialog'"
@@ -231,4 +277,16 @@ onDeactivated(() => {
   font-weight: bold;
   text-align: right;
 }
+
+@keyframes AnimRotate {
+  from {
+    transform: rotate3d(0, 0, 1, -360deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 0);
+    transform-origin: center center;
+  }
+}
+
 </style>

package/DemoHomepage/watchTest.vue

@@ -0,0 +1,50 @@
+
+
+<script setup>
+import { watch, watchEffect } from "vue";
+
+const props = defineProps({
+  aValue: {
+    type: Number,
+    required: false
+  },
+  bValue: {
+    type: Number,
+    required: false
+  },
+  cValue: {
+    type: Number,
+    required: false
+  }
+});
+
+watch(() => props.aValue, (newVal, oldVal) => {
+  console.log('WatchTest aValue changed:', oldVal, '->', newVal);
+});
+
+watch(() => props.bValue, (newVal, oldVal) => {
+  console.log('WatchTest bValue changed:', oldVal, '->', newVal);
+});
+
+watch(() => props.cValue, (newVal, oldVal) => {
+  console.log('WatchTest cValue changed:', oldVal, '->', newVal);
+});
+
+watch(() => [props.aValue, props.cValue], (newVal, oldVal) => {
+  console.log('WatchTest aValue and cValue changed:', oldVal, '->', newVal);
+});
+
+watchEffect(() => {
+  console.log('WatchTest watchEffect: aValue=', props.aValue, ', bValue=', props.bValue, ', cValue=', props.cValue);
+});
+
+watchEffect(() => {
+  console.log('WatchTest watchEffect（A): aValue=', props.aValue);
+});
+
+
+</script>
+
+<template>
+<div></div>
+</template>

package/FilterDemo/AnimatePic.vue

@@ -8,27 +8,56 @@ const item_url = DemoResourceBase
 </script>
 
 <template>
-  <div
-    className="blockStyle"
-    :style="{
-      backgroundColor: '#0000FF',
-      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
-    }"
-  />
-  <img
-    className="blockStyle"
-    :style="{
-      objectFit: 'contain',
-      animation: 'opacityDemo_CompositeOpacity 3s infinite',
-    }"
-    :src="item_url"
-  />
+  <div :style="{
+    top:100,
+    left:0,
+    width: 600,
+    height: 80,
+    overflow: 'hidden',
+  }">
+    <div :style="{
+      // 坐标补偿
+      top:-50,
+    }">
+      <div
+        className="blockStyle"
+        :style="{
+          backgroundColor: '#0000FF',
+          animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+        }"
+      />
+      <img
+        className="blockStyle"
+        :style="{
+          objectFit: 'contain',
+          animation: 'opacityDemo_CompositeOpacity 3s infinite',
+          }"
+          :src="item_url"
+        />
+
+      <div
+        className="blockStyle"
+        :style="{
+          left: 200,
+          backgroundColor: '#0000FF',
+          animation: 'opacityDemo_Ortho_CompositeNoOpacity 3s infinite',
+        }"
+      />
+      <img
+        className="blockStyle"
+        :style="{
+          left: 200,
+          objectFit: 'contain',
+          animation: 'opacityDemo_Ortho_CompositeOpacity 3s infinite',
+          }"
+          :src="item_url"
+        />
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .blockStyle {
-  top: 50;
-  left: 50;
   width: 150;
   height: 150;
 }
@@ -59,4 +88,21 @@ const item_url = DemoResourceBase
   to {
   }
 }
+
+@keyframes opacityDemo_Ortho_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_Ortho_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1);
+  }
+  to {
+  }
+}
 </style>

package/FilterDemo/App.vue

@@ -89,14 +89,14 @@ onMounted(() => {
 
       <jsv-filter-view
         :top="400"
-        :width="402"
-        :height="402"
+        :width="602"
+        :height="602"
         ref="filter2"
         :filterType="filterType.type"
       >
         <div
           :style="{
-            width: 300,
+            width: 600,
             height: 300,
             backgroundImage: `url(${webpSample})`,
           }"

package/FlexCellDemo/AI_skills_update.md

@@ -0,0 +1,4 @@
+读取 @shijiu/jsview-vue-samples/FlexCellDemo , JsvFlexDiv 是需要用flex属性的div的替代品(因为JsView的div或者img标签不支持flex相关的css属性)。将div 用到flex的场景，转为按照 @shijiu/jsview-vue-samples/FlexCellDemo 样例的写法归纳总结到 jsview-best-practices 这个skills中
+
+再追加一条限制: JsvFlexDiv 只支持对齐直接子元素进行flex排版, 并不支持递归到所有的子, 如果需要多层flex排版, 要想 @shijiu/jsview-vue-samples/FlexCellDemo 里面那样写成 JsvFlexDiv 嵌套
+

package/FlexCellDemo/TestFrame1.vue

@@ -62,20 +62,30 @@ const _onSizeTest1_2 = (width, height) => {
       <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
       <jsv-flex-div
         :key="rRefreshId"
-        :style="{ flexWrap: 'wrap' }"
+        :style="{ flexWrap: 'wrap', backgroundColor: 'rgba(0,128,200,0.5)' }"
         :onSized="_onSizeTest1_2"
       >
+        <!-- 开头一个空节点，测试width,height都不设置的div -->
+        <div :style="{backgroundColor: '#FFFFFF' }" />
+
+        <!-- 变形节点, 内含0x0和undefined的场景 -->
+        <div :style="{ width: rMyWidth, height: rMyHeight, backgroundColor: '#0000FF' }" />
         <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' }"
         />
+        
+        <!-- 中插一个空节点，测试width,height都不设置的div -->
+        <div :style="{backgroundColor: '#FFFFFF' }" />
+
         <img :src="image1" :style="{ height: 45 }" />
         <img :src="image1" :style="{ height: 45 }" />
       </jsv-flex-div>
-      <img :src="image3" :style="{ height: 50 }" />
+      <div :style="{ backgroundImage:`url(${image3})` }" />
       <!-- <img :src="image4" :style="{ height: 50 }" /> -->
     </jsv-flex-div>
   </div>

package/FlexCellDemo/TestFrame2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { JsvFlexDiv } from "jsview";
+import { JsvFlexDiv, JsvQrcode } from "jsview";
 import image1 from "./images/1.png";
 import image2 from "./images/2.png";
 import image3 from "./images/3.png";
@@ -65,10 +65,19 @@ import image4 from "./images/4.jpg";
         flexDirection: 'column',
         alignSelf: 'stretch',
         alignItems: 'flex-start',
+        backgroundColor: '#0000FF',
       }"
     >
       <img :src="image1" :style="{ height: 50 }" />
       <img :src="image1" :style="{ height: 50 }" />
+      <jsv-qrcode
+        value="https://jsview.shijiu.com"
+        :size="30"
+        :fgColor="'#000000'"
+        :bgColor="'#ffffff'"
+        :level="'M'"
+        sync="async"
+      />
     </jsv-flex-div>
 
     <!-- 测试内容内嵌有子view -->

package/FlexCellDemo/TestFrame3.vue

@@ -1,97 +1,152 @@
 <script setup>
+import { onMounted, onBeforeUnmount, 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";
+
+let vInvToken = null;
+let showText = shallowRef(true);
+
+onMounted(() => {
+  vInvToken = setInterval(() => {
+    showText.value = !showText.value;
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (vInvToken > 0) {
+    clearInterval(vInvToken);
+    vInvToken = -1;
+  }
+});
 </script>
 
 <template>
+<div
+  :style="{
+    left: -50,
+    width: 350,
+    height: 400,
+    overflow: 'hidden'
+  }"
+>
   <div
     :style="{
-      left: -50,
-      width: 350,
+      left: 50,
+      width: 300,
       height: 400,
-      overflow: 'hidden',
+      backgroundColor: 'rgba(100,100,100,0.5)',
+      fontSize: 12,
+      color: '#000000',
+      textAlign: 'center',
+      lineHeight: 16
     }"
   >
-    <div
+    <jsv-flex-div
       :style="{
-        left: 50,
         width: 300,
         height: 400,
-        backgroundColor: 'rgba(100,100,100,0.5)',
-        fontSize: 12,
-        color: '#000000',
-        textAlign: 'center',
-        lineHeight: 16,
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        justifyContent: 'center'
       }"
     >
-      <jsv-flex-div
+      <!-- 文字绘制区域超过容器尺寸的内容的测试 -->
+      <div
         :style="{
-          width: 300,
-          height: 400,
-          flexDirection: 'column',
-          alignItems: 'flex-end',
-          justifyContent: 'center',
+          width: 450,
+          backgroundColor: 'rgba(0, 50, 0, 0.5)'
         }"
       >
-        <!-- 文字绘制区域超过容器尺寸的内容的测试 -->
-        <div :style="{ width: 450, backgroundColor: 'rgba(0, 50, 0, 0.5)' }">
-          {{
-            "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
-          }}
-        </div>
+        {{
+          "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
+        }}
+      </div>
 
-        <!-- 文字绘制区域未超过容器尺寸的内容的测试 -->
-        <div :style="{ width: 250, backgroundColor: 'rgba(0, 70, 0, 0.5)' }">
-          {{
-            "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
-          }}
-        </div>
+      <!-- 文字绘制区域未超过容器尺寸的内容的测试 -->
+      <div
+        :style="{
+          width: 250,
+          backgroundColor: 'rgba(0, 70, 0, 0.5)'
+        }"
+      >
+        {{
+          "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
+        }}
+      </div>
 
-        <!-- 超长折行文字测试点，文字字数大于3000字，最后一个字为'拾' -->
+      <!-- 超长折行文字测试点，文字字数大于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
+          v-show="showText"
           :style="{
-            height: 16,
-            backgroundColor: 'rgba(0, 90, 0, 0.5)',
-            whiteSpace: 'nowrap',
+            height: 35,
+            lineHeight: 35,
+            fontSize: 32,
+            backgroundColor: 'rgba(10, 0, 0, 0.5)',
           }"
         >
-          {{
-            "一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九拾"
-          }}
+          {{ "四五六" }}
+        </div>
+        <div :style="{ height: 16 }">
+          {{ "七八九++" }}
         </div>
+      </jsv-flex-div>
 
-        <!-- 短文字横向排布接续的测试 -->
-        <jsv-flex-div
+      <!-- 短文字横向排布接续的测试 -->
+      <jsv-flex-div
+        :style="{
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: 'rgba(0, 110, 0, 0.5)',
+          alignSelf: 'center',
+        }"
+      >
+        <div :style="{ height: 16 }">
+          {{ "++一二三" }}
+        </div>
+        <div
+          v-if="showText"
           :style="{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'rgba(0, 110, 0, 0.5)',
-            alignSelf: 'center',
+            height: 35,
+            lineHeight: 35,
+            fontSize: 32,
+            backgroundColor: 'rgba(10, 0, 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>
+          {{ "四五六" }}
+        </div>
+        <div :style="{ height: 16 }">
+          {{ "七八九++" }}
+        </div>
       </jsv-flex-div>
-    </div>
+    </jsv-flex-div>
   </div>
+</div>
 </template>
 
 <style scoped></style>