@shijiu/jsview-vue-samples 2.1.367-test.0 → 2.1.435

package/FlexCellDemo/App.vue

@@ -0,0 +1,315 @@
+<!--
+ * @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 { JsvFlexDiv, jJsvRuntimeBridge } 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";
+
+const router = useRouter();
+
+const enableManualDemo = false;
+const enableTest1 = true;
+const enableTest2 = true;
+const enableTest3 = true;
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+
+  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();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <!-- 手动测试时打开 -->
+    <div
+      v-if="enableManualDemo"
+      :style="{
+        top: 150,
+        left: 50,
+        width: 300,
+        height: 400,
+        backgroundColor: 'rgba(0,128,128,0.5)',
+        fontSize: 12,
+        color: '#FF0000',
+        textAlign: 'center',
+        lineHeight: 16,
+      }"
+    >
+      <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="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="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>
+        <img :src="image3" :style="{ height: 50 }" />
+        <img :src="image4" :style="{ height: 50 }" />
+      </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
+        :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>
+    </div>
+
+    <div
+      v-if="!enableManualDemo && enableTest3"
+      :style="{
+        top: 150,
+        left: 700,
+        width: 400,
+        height: 400,
+        overflow: 'hidden',
+      }"
+    >
+      <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>
+
+<style scoped></style>

package/GradientTexture/App.vue

@@ -0,0 +1,135 @@
+<script setup>
+/**
+ * 建议:
+ * 双色的渐变可以使用小尺寸的texture(4*4)以节省内存
+ * 多色的使用小尺寸的话可能会出现条纹, 使用div同尺寸的话内存消耗较大, 需要权衡
+ */
+import { JsvTextureStoreApi } from "jsview";
+import { ref } from "vue";
+
+const divSize = 300;
+const smallTextureSize = 4;
+
+const createTexture = (from, to, size, colorList, positionList) => {
+  const canvasTexture = JsvTextureStoreApi.canvasTexture(size, size);
+  canvasTexture.drawLinearGradientRect(
+    from[0],
+    from[1],
+    to[0],
+    to[1],
+    colorList,
+    positionList
+  );
+  return canvasTexture.commit();
+};
+const twoColorSet = {
+  color: ["#00ff00", "#0000ff"],
+  position: [0, 1],
+};
+const multiColorSet = {
+  color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
+  position: [0, 0.3, 0.8, 1],
+};
+
+const diagonalTwoColor = createTexture(
+  [0, 0],
+  [smallTextureSize, smallTextureSize],
+  smallTextureSize,
+  twoColorSet.color,
+  twoColorSet.position
+);
+const diagonalMultiColor = createTexture(
+  [0, 0],
+  [divSize, divSize],
+  divSize,
+  multiColorSet.color,
+  multiColorSet.position
+);
+const verticalTwoColor = createTexture(
+  [0, 0],
+  [0, smallTextureSize],
+  smallTextureSize,
+  twoColorSet.color,
+  twoColorSet.position
+);
+const verticalMultiColor = createTexture(
+  [0, 0],
+  [0, divSize],
+  divSize,
+  multiColorSet.color,
+  multiColorSet.position
+);
+
+const slashTwoColor = createTexture(
+  [0, Math.round(smallTextureSize / 3)],
+  [smallTextureSize, Math.round(smallTextureSize * 0.8)],
+  smallTextureSize,
+  twoColorSet.color,
+  twoColorSet.position
+);
+
+const slashMultiColor = createTexture(
+  [0, Math.round(divSize / 3)],
+  [divSize, Math.round(divSize * 0.8)],
+  divSize,
+  multiColorSet.color,
+  multiColorSet.position
+);
+</script>
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }"></div>
+  <div :style="{ left: 20, top: 20 }">
+    <div
+      :style="{
+        width: divSize,
+        height: divSize,
+        backgroundImage: `jsvtexturestore://${diagonalTwoColor}`,
+      }"
+    ></div>
+  </div>
+  <div :style="{ left: 20, top: 20 + 320 }">
+    <div
+      :style="{
+        width: divSize,
+        height: divSize,
+        backgroundImage: `jsvtexturestore://${diagonalMultiColor}`,
+      }"
+    ></div>
+  </div>
+  <div :style="{ left: 20 + 320, top: 20 }">
+    <div
+      :style="{
+        width: divSize,
+        height: divSize,
+        backgroundImage: `jsvtexturestore://${verticalTwoColor}`,
+      }"
+    ></div>
+  </div>
+  <div :style="{ left: 20 + 320, top: 20 + 320 }">
+    <div
+      :style="{
+        width: divSize,
+        height: divSize,
+        backgroundImage: `jsvtexturestore://${verticalMultiColor}`,
+      }"
+    ></div>
+  </div>
+  <div :style="{ left: 20 + 640, top: 20 }">
+    <div
+      :style="{
+        width: divSize,
+        height: divSize,
+        backgroundImage: `jsvtexturestore://${slashTwoColor}`,
+      }"
+    ></div>
+  </div>
+  <div :style="{ left: 20 + 640, top: 20 + 320 }">
+    <div
+      :style="{
+        width: divSize,
+        height: divSize,
+        backgroundImage: `jsvtexturestore://${slashMultiColor}`,
+      }"
+    ></div>
+  </div>
+</template>

package/ImpactStop/App.vue

@@ -14,7 +14,7 @@
         <!-- 滑块 -->
         <jsv-free-move-actor
           ref="actorRef"
-          :top="520 - 30 + 1"
+          :top="520 - 30"
           :left="40"
           :width="30"
           :height="30"

package/LongText/LongTextScroll.vue

@@ -69,16 +69,12 @@ onMounted(() => {
 });
 </script>
 
-
 <template>
-  <jsv-focus-block
-    ref="rootRef"
-    name="longTextScroll"
-    :onAction="onAction"
-  >
+  <jsv-focus-block ref="rootRef" name="longTextScroll" :onAction="onAction">
     <div :style="{ overflow: 'hidden', ...style }">
       <div
         ref="element"
+        data-jsv-perf-loadtex="auto"
         :style="{ top: textY, width: style.width, ...textStyle }"
       >
         {{
@@ -188,4 +184,4 @@ onMounted(() => {
       :scrollBlockStyle="scrollBlockStyle"
     />
   </jsv-focus-block>
-</template>
+</template>

package/QrcodeDemo/App.vue

@@ -1,10 +1,11 @@
 <script setup>
+import { shallowRef } from "vue";
 import { JsvQrcode } from "jsview";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
-const value = "http://www.baidu.com/";
-const size = 400;
+let qrUrl = shallowRef("http://www.baidu.com/");
+const size = 200;
 const fgColor = "#0000FF";
 const bgColor = "#ffff00";
 const level = "H"; // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
@@ -13,13 +14,23 @@ const imageH = 64;
 const imageW = 64;
 const imageSrc =
   "http://oss.image.qcast.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
-const tipsInfo = `功能：二维码展示可配置项：1.前景色 
-2.背景色 
-3.指定小图标 
-4.容错级别：'L', 'M', 'Q', 'H'`;
+const tipsInfo = `功能：二维码展示可配置项：
+
+1.前景色
+
+2.背景色
+
+3.指定小图标
+
+4.容错级别：'L', 'M', 'Q', 'H'
+
+5.按OK刷新:上图为异步(不影响操作)，下图为同步`;
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 13) {
+    qrUrl.value = qrUrl.value + "a";
+    console.log("new url=" + qrUrl.value);
   }
   return true;
 };
@@ -36,8 +47,8 @@ const onKeyDown = (ev) => {
       <div
         :style="{
           textAlign: 'left',
-          fontSize: 30,
-          lineHeight: 50,
+          fontSize: 25,
+          lineHeight: 30,
           color: '#ffffff',
           left: 200 + 420,
           top: 100,
@@ -50,11 +61,28 @@ const onKeyDown = (ev) => {
       </div>
       <div :style="{ left: 200, top: 100 }">
         <jsv-qrcode
-          :value="value"
+          :key="qrUrl"
+          :value="qrUrl"
+          :size="size"
+          :fgColor="fgColor"
+          :bgColor="bgColor"
+          :level="level"
+          :imageSettings="
+            includeImage
+              ? { src: imageSrc, height: imageH, width: imageW }
+              : null
+          "
+        />
+      </div>
+      <div :style="{ left: 200, top: 310 }">
+        <jsv-qrcode
+          :key="qrUrl"
+          :value="qrUrl"
           :size="size"
           :fgColor="fgColor"
           :bgColor="bgColor"
           :level="level"
+          sync="sync"
           :imageSettings="
             includeImage
               ? { src: imageSrc, height: imageH, width: imageW }