@shijiu/jsview-vue-samples 2.1.23 → 2.1.200-next-vue.0

package/Basic/components/div/DivBackground.vue

@@ -1,63 +1,92 @@
 <script setup>
-import { onUnmounted, shallowRef } from "vue"
+import { onUnmounted, shallowRef } from "vue";
 import iconImgPath from "../../assets/icon.png";
 import testImgPath from "../../assets/test.jpg";
 
 /* 测试 background 响应式变化 */
-const urlList = [
-  `url(${iconImgPath})`,
-  `url(${testImgPath})`
-];
+const urlList = [`url(${iconImgPath})`, `url(${testImgPath})`];
 let urlIndex = 0;
 
+const bgSwitchList = [`使用img`, `使用color`, `img优先于color`];
+let bgSwitchIndex = shallowRef(0); // 0, 1, 2切换
+
 let bgTestUrl = shallowRef(urlList[0]);
 
-let timerInterval = setInterval(()=>{
+let timerInterval = setInterval(() => {
   urlIndex++;
   if (urlIndex >= urlList.length) {
     urlIndex = 0;
   }
   bgTestUrl.value = urlList[urlIndex];
+
+  bgSwitchIndex.value++;
+  if (bgSwitchIndex.value >= bgSwitchList.length) {
+    bgSwitchIndex.value = 0;
+  }
 }, 1500);
 
 onUnmounted(() => {
   clearInterval(timerInterval);
- })
-
+});
 </script>
 
 <template>
   <div id="layout-root">
-    <div class="content-font" :style="{
-      width: 180,
-      height: 40,
-      backgroundColor: 'rgba(255, 255, 0, 1)',
-    }">
+    <div
+      class="content-font"
+      :style="{
+        width: 180,
+        height: 25,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+      }"
+    >
       style.backgroundColor
     </div>
-    <div class="content-font" :style="{
-        top: 50,
+    <div
+      class="content-font"
+      :style="{
+        top: 30,
         width: 180,
-        height: 40,
-        backgroundImage: bgTestUrl
-      }">
+        height: 25,
+        backgroundImage: bgTestUrl,
+      }"
+    >
       style.backgroundImage(url)
     </div>
-    <div class="content-font" :style="{
+    <div
+      class="content-font"
+      :style="{
+        top: 60,
+        width: 180,
+        height: 25,
+        backgroundColor: bgSwitchIndex >= 1 ? 'rgba(255, 255, 0, 1)' : '',
+        backgroundImage: bgSwitchIndex != 1 ? urlList[0] : '',
+      }"
+    >
+      {{ bgSwitchList[bgSwitchIndex] }}
+    </div>
+    <div
+      class="content-font"
+      :style="{
         top: 100,
         width: 90,
         height: 40,
-        backgroundImage: 'linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0,255,0,1), rgba(0,0,255,1))',
-      }">
+        backgroundImage:
+          'linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0,255,0,1), rgba(0,0,255,1))',
+      }"
+    >
       gradient
     </div>
-    <div class="content-font" :style="{
+    <div
+      class="content-font"
+      :style="{
         top: 100,
         left: 92,
         width: 90,
         height: 40,
         backgroundImage: 'linear-gradient(rgba(255, 0, 0, 1), rgba(0,255,0,1))',
-      }">
+      }"
+    >
       gradient
     </div>
   </div>
@@ -65,4 +94,4 @@ onUnmounted(() => {
 
 <style>
 @import "../FontStyle.css";
-</style>
+</style>

package/BreakRender/App.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { JsvEnableRenderBreak } from "jsview";
+import data from "./data.js";
+import Item from "./Item.vue";
+import { ref, computed } from "vue";
+
+// const renderData = shallowRef(data.slice(0, 16));
+const currentHeadIndex = ref(0);
+const visibleStart = computed(() => {
+  return Math.floor(currentHeadIndex.value / 4) * 210;
+});
+const renderData = computed(() => {
+  return data.slice(currentHeadIndex.value, currentHeadIndex.value + 16);
+});
+
+const maxHeadIndex = data.length - (data.length % 4);
+const onKeyDown = (ev) => {
+  console.log("key", ev.keyCode);
+  switch (ev.keyCode) {
+    case 38:
+      currentHeadIndex.value = Math.max(0, currentHeadIndex.value - 4);
+      break;
+    case 40:
+      currentHeadIndex.value = Math.min(
+        maxHeadIndex,
+        currentHeadIndex.value + 4
+      );
+      break;
+  }
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#AAAAAA',
+    }"
+  ></jsv-focus-block>
+  <div
+    v-for="item in renderData"
+    :key="'item' + item.index"
+    :style="{
+      left: item.left,
+      top: item.top - visibleStart,
+    }"
+  >
+    <jsv-enable-render-break>
+      <template #renderItem>
+        <item :data="item"></item>
+      </template>
+
+      <template #placeHolder>
+        <div
+          :style="{
+            width: item.width,
+            height: item.height,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+          }"
+        ></div>
+      </template>
+    </jsv-enable-render-break>
+  </div>
+</template>

package/BreakRender/Item.vue

@@ -0,0 +1,77 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { JsvPosterImage, JsvPosterDiv } from "jsview";
+
+const props = defineProps({
+  data: Object,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+    }"
+  >
+    <div v-if="data.index % 2 == 0">
+      <jsv-poster-image
+        :style="{
+          width: data.width,
+          height: data.height,
+        }"
+        :src="data.url"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+          }"
+        />
+      </jsv-poster-image>
+      <div
+        :style="{
+          width: 100,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "img_" + data.index }}
+      </div>
+    </div>
+    <div v-else>
+      <jsv-poster-div
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundImage: `url(${data.url})`,
+        }"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+          }"
+        />
+      </jsv-poster-div>
+      <div
+        :style="{
+          width: 100,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "div_" + data.index }}
+      </div>
+    </div>
+  </div>
+</template>

package/BreakRender/assets/imageList.json

@@ -0,0 +1,237 @@
+[
+  "https://img.pddpic.com/gaudit-image/2022-07-11/089049108f2d1246ae9d6dc3d123dd44.jpeg",
+  "https://img.pddpic.com/gaudit-image/2022-06-30/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
+  "https://img.pddpic.com/gaudit-image/2021-09-02/c1fbeecb0d930c5aed173289b1cbe659.jpeg",
+  "https://img.pddpic.com/gaudit-image/2022-08-26/07484ae343de815ad5b7e4dad7fd9d62.jpeg",
+  "https://img.pddpic.com/gaudit-image/2022-10-20/5b1c19c766fce2c9df19f66519626e30.jpeg",
+  "https://img.pddpic.com/gaudit-image/2022-01-03/c3e8959a45ac2a3723ee0908dae640df.jpeg",
+  "https://img.pddpic.com/gaudit-image/2022-09-27/1652a0867e68dd1ec679eb1c81df1188.jpeg",
+  "https://img14.360buyimg.com/pop/jfs/t1/147659/25/25288/269744/623321a5E41c70e55/be821910e1a6180e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/144284/20/31579/61411/636f2df0E01dfe716/dd4b1c7471613493.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/164147/9/31929/43911/6371a827E32d9736f/a06164b26590b994.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/149715/39/27762/70633/637588eeEaaf57540/8a2b507dd6effe91.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/179091/36/28087/35197/632873cbE8079c6b0/d6f86f1b1d5f112d.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/145574/2/28766/47462/636f3023E756c7cf4/e1e898525109d0ea.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/62113/8/21801/25588/63293430E6c2f573f/4b90428b88320241.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/97796/15/32769/71491/63708d25E8a771535/2d08ee397f16baf4.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/198431/1/9617/88640/614bdfb5E85af1998/18a4fe9f05e5f996.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/8559/30/20581/66358/636e6698E95bcfb86/82ce63e356d3bb32.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/180694/25/30806/64270/6374e645E21f8d83b/a4fd835c9c41c716.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/178261/11/28870/62984/6346949eEf5870e0a/e999bc6f5463cb4e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/137029/31/31571/61927/636e58adEaf9f69da/96426ee2f39fb8cb.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/172154/14/29890/38175/634d43e2E4b955033/0fd37f341d1a6186.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/34725/33/18109/46092/637487beEe37c1d6d/973bdf1378842c3c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/127154/12/32143/61264/63744f56E97a20867/db16809921f29988.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/18963/33/18624/23420/63293625E87ebcf22/f7f457be48c0b252.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/99542/29/27716/49463/635bb90eEdd20de26/9e7aca116e9bd23a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/7169/20/17985/33829/63241b3aE7dcfd261/efb35507276509cd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/158022/5/32736/64333/6374bd3cEe9b8d552/03227214ef907ec4.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/161746/5/34308/49523/637204e9Eff946594/987cbb3b5ba75fb0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/18950/18/19713/45576/63510496E5d0adbb5/1bd2ef58f848924a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/4042/14/20347/51643/63749979Ecdcc7474/fb2d21670aca6e09.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/118880/4/26680/52601/63286f62Ebd590f8b/24b9169c46f9bac1.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/37277/25/17367/49700/6374e759E8b19c669/7bc0a6db17c85d7c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/190714/30/28225/52386/636df1a7E45f7dfa0/3bdad46280c4781f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/28757/27/20169/69354/6372021fE72bc0f3c/0e10f1d396382721.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/145999/13/26633/127510/61cafdebEb75a80e2/992bb72c9a6e5537.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/107065/22/31642/38286/635151d2E7dd011f9/1adb7cfd54bad762.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/204132/21/28476/48534/6374a65cEffed3f43/7020af742fbe5895.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/201578/31/15673/77560/619479ceEd1bde507/c0dab826b71e0b84.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/78922/12/21539/28999/632984e5Ebd20a9b8/d3d1a1a5a226139b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/161014/2/20478/140699/6082904aEc60ee1d7/2fa0342ba547cfac.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/177302/34/30515/51170/63732610E6a78b401/af5aa60b611b7861.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/162167/40/32448/60595/63708b7aEdd9c15fa/c7fbefe3075eb97a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/123347/5/28789/58808/63748e9fE634ca2f6/d5d03b9d92c1a90b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/123953/40/32969/43575/636df39fE5088ef24/7071d33d74316ac7.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/148337/28/31440/45923/6370bb15E2b66e4d2/b5011869afdcb72e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/191017/8/30359/62236/636df0ebE7e366c5c/e69c322bfe53a952.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/173117/35/28078/52054/6371ea64E1b9bf8b0/36ececd03608c69a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/110862/4/31934/79319/6374916cE78dd7ff9/07037380fd737c6f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/214598/31/23097/45695/636df732E0feb421a/4998cad21b8dc773.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/196004/13/30120/63861/6364c20cEbbf1af44/afd73496e016d1b1.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/127632/34/26743/55208/6374e70dE3ca95ce8/bd3b38228ac349ba.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/176435/2/31564/49019/6375fab3E527f9540/a057281b5dfba11a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/106346/4/28282/78573/6374e246E04ed6401/3ffb07c15ef70f5e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/193332/18/31061/85394/63733b1aE04601395/dee3ce131ab83da0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/106538/9/35299/64369/63748e53Ed4f2701e/a979551d4cbbc603.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/161332/30/31788/40402/6350fa1aEccc23cc2/0b6fed4c62c0cfdd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/83721/24/23746/52162/6370a6a7E39e50419/8a885019d1e287dd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/178918/7/19768/187857/611cb592Ef40e4d3d/ff1666a5941fde4c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/81152/13/20262/40486/636de581E3e3da380/bbc79217b5621bbc.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/213124/26/23475/65934/6370c324Ed1a7d6c5/fb4b2565485a4eec.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/90668/12/31667/66330/6371f361E4076364e/35865c385a2859a2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/207023/36/31155/36542/636df6efEb4a6a502/51c92e09054c4001.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/141116/27/31253/47862/6374e893E73767776/17619fff9cba8274.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/213122/29/21567/23863/6328620cE150656c2/12267bf7b4a5e477.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/204869/3/25259/146916/6371d808E635ca3b6/d62e0b0e607bbad2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/180779/4/30342/52096/6371f1d6E27b5cf53/59d4f937821167c0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/129047/22/29584/38080/63292f16Eb09b3f21/dde8d7d2cdc3b605.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/35472/20/17865/138335/63155eccE3421c373/83e6937f91b1db0c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/11396/23/20388/95706/637367d7Edbf9d015/f74043d436a6c82a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/31239/31/18638/90124/6374aabeE7afd9777/87f4a75c30238fc9.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/16877/32/9038/220436/6375fa89E5bba5f43/da0328d228a1e3d9.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/202840/11/28638/101683/6373104dEdd17ca97/2cec52d5b31a4194.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/143548/12/31462/148100/63763842E899343cf/15775098507cc561.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/26422/7/20285/141282/637636eaEcd28b526/439e8e7821d7f65f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/68545/3/21695/46474/635b3aa5E6400456e/edd2b54e653f1f22.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/219940/3/22141/154417/63415112Eeedbffd7/b69a505c9ae2b8d8.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/46504/17/17357/123264/637624e7E90d8bfa7/07b0ffd8a2354ce3.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/187730/24/30442/72709/637194a9Eb3848ffd/f22056a877ddb6f5.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/135480/12/32611/131782/637648feEb9c0590e/3df0a8593cab314e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/62648/22/22384/121901/63771a83E51ccab77/3a1cca63312a4406.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/195787/20/30248/39062/6376e365E4670b4d3/d3cddd47928552c3.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/79322/33/23373/111836/637743eaE8679c805/6ec567f350547bb0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/163458/31/31785/149778/63763084Ebab02b5a/3bfb3a6ff92230c2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/6848/16/26688/166558/6364603bEd8d0cfc7/495902170b807db5.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/87122/10/32991/103286/637624d5Ec702d960/e5834d54118f0e5f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/6010/32/16209/193928/6376f5ddE77bac9b5/39b67b243e48f156.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/191975/19/30211/109640/637370abEce9710d8/ebe14ce5b9819f8c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/175217/12/27402/56029/632c3655E36567743/c6dbbc1f71ea225f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/119119/25/30440/147783/637203cbEf1f6b872/fff1e26e8ff67bd5.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/184641/32/30975/92933/6375d595E46fa5557/f2ab2f3f176551fc.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/160225/39/29830/79135/63772396Edfa7157c/28066bfe4368a738.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/79227/23/15753/151866/637741a4E8b8e4ae4/f8e56da420aff5e7.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/201215/38/25974/132177/636f525fEa98d4b8f/3fc77b1409c9a58e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/211940/9/23707/158342/6375d40aEca5b2793/82059496c87b1b79.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/164470/14/32125/241111/6371b0cbEee0f750e/6bc62fddf6a20b2c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/200538/15/27500/164246/6375fa4fEb311d7bd/89e9cbf66e7fb2bd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/1843/28/16705/108589/63774b1aEa2f41965/f06ff89ab26ff0b2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/183777/7/25033/389715/629da3eeE4aaac091/072aad91b430a55b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/205926/4/29016/65228/63736f14Ee5999613/bba49ec8616bfba0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/29020/16/17670/138555/63765007E3d301b5e/97c86a12f2ee9906.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/215270/10/23130/113470/6370eb93E40953a13/8976a2a8c386145a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/175856/33/28804/120164/6371170fE0da208e6/83a0a960ad28855d.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/196463/10/30961/117576/636e736fE8e792711/1f9dd4b0ad1ebef0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/190443/19/29825/69774/6374feadEb74b6264/994eda01dc621932.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/158589/21/32394/196055/63744bc0E6d75a34b/b6154a6a569baa4c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/211918/18/23636/79676/6374b17dE0325465d/c059a11d45efd8e7.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/148729/3/31346/182620/6376f674Ebc70cb32/d8d84d49ec1599fd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/96499/7/34238/187063/6376fa55E9fa2dabd/b1612b9842d2afdf.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/84683/38/19173/119046/637594f2E851b755f/ec00041d9868ff5e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/204041/36/28219/165176/63771933E95371f1d/f1ce95b11c0647c3.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/156010/36/32079/156251/63749475Ed470fe92/27af4c3887d08f9c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/186856/11/29960/451872/6373542eEff64bee0/b3859c18ad7ba8f1.png",
+  "https://img14.360buyimg.com/pop/jfs/t1/127844/40/33026/152517/637498d6E22cae703/66c774ad10dfa76e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/110641/18/30428/153867/62c678d5Ed3d2dc7a/631573ef8d67bece.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/58051/37/22082/140376/637700aaEf15f6d4e/d429d71574a4ba2a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/125976/15/28897/250839/62e781e2E6faeb9f9/40dea8e7afde54b2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/178420/29/30315/201774/6371a74cE82b83985/854fbfb543103c41.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/144026/6/31030/307901/6372662eE6f4851f0/93f21a931c24c0e3.png",
+  "https://img14.360buyimg.com/pop/jfs/t1/221307/16/19361/64648/6363c8dfE68e243b0/e879416e80a4bb64.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/5633/26/19270/206624/62b566c0Ea5d9ce43/960f759e33e81a42.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/14993/26/19432/107912/6342de75E5d2395b6/6d8bf438c38a4540.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/98538/18/31511/144617/62e4fc16E3d8c3f8e/63adb172005fc1fd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/141480/27/32099/112704/637506feE46fec4af/318b0be38c56940b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/44736/1/19065/146737/62b904beE65cda47b/d7b0116771280a1d.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/103415/12/33648/82780/6371f5a6E32ff1844/d7e82badaf087bcc.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/163688/34/32040/153523/6371176cE6d9d7f26/a61534df8883abc5.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/184295/8/27994/100314/6373587dE9956a7fd/68e0f174faf257e5.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/69251/6/22358/70858/6315d5dcE3381b9ec/623155c01cdf5fd2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/210089/5/28377/188369/6374a0a2E04926c25/2b835f45d3e5ab1c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/110203/25/33010/112253/636dac11Ed99ac60d/4fd8ecdfaf4191bb.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/36916/32/18891/269564/6371ff90E86226344/070e63657dedd322.png",
+  "https://img14.360buyimg.com/pop/jfs/t1/135941/22/30384/71885/6371b73eEd2631edc/5709f4cad7ad7df9.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/182557/16/5466/519465/60a8cc02E3ae3607c/71af0f21f5ab84f2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/214307/15/23521/144313/6375d40bE84b1a277/ac76ca830f616267.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/191920/9/27679/141573/630ecde6E3b188c20/fb82c513e662ff4c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/204659/37/28521/648847/635bfa48E3538e888/6e2f2f52659fc7ab.png",
+  "https://img14.360buyimg.com/pop/jfs/t1/132495/39/26601/65900/637743bbE2beddece/5b0fc5da81b01660.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/40152/23/19411/39101/6333d154E756b2a7a/acdc0606d161374c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/28303/24/17789/40525/631aa834E9f564891/27bf3a09d5eb8cef.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/157748/35/27445/138023/618f95b5Eaed76255/cb0111b72eb6a70c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/97700/15/32684/56374/63736ef7Ea052c706/dcdca62b227dd6b3.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/98025/23/28359/211445/63737604E4238f230/a87442615f7da229.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/180416/14/18460/73411/6110e9fcE8a07e4e3/116a5bbe4a39ff7e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/108084/36/29186/40521/63744bb6Ef2622851/90a4062421adde33.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/152197/8/28334/132465/63662281E94b7b59e/56e8e33ebf52f7fa.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/36434/28/19081/106828/6376e1e0E1a6a2e4a/230c87eb3688b8ed.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/91135/25/33805/49673/63744bc4E69c80513/54a4096168d40c83.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/210055/8/28775/50754/637369e3E1f7f7fa7/b4331a258c551d26.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/217548/30/23671/172088/6372196bEb09f47cb/58a98d14efd7a011.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/195180/10/27854/867356/635bfe12E42ee9f76/a06fdd072bc8d295.png",
+  "https://img14.360buyimg.com/pop/jfs/t1/199800/18/29742/166942/637477a8E504bd547/b1448920cf312a4a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/205030/34/17928/146824/625e6c9eEfaab0a8e/9dd0a9f41b3f8921.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/185318/32/30703/75584/6372f63fE0265da5e/ce863f7c5dab7584.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/69416/3/17298/65804/632c187fE6106abec/3e8bb8cba8b1ea6f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/176410/32/21369/208178/619de80fE1fcd0ce8/87e61549f710d27a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/125393/39/28915/89042/6374a1dfE8442152f/e308d7e004a832e6.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/185569/20/30688/89228/636e69f4E1e398222/bb872eee65c77242.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/169609/23/32510/49992/6371084aEce5945cb/bc806144aa881669.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/101117/25/28352/41865/637107a1E21bc0f1d/f14dbc1de8533e1f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/213465/34/21261/131355/63212a61E737270ff/444584dd1c948d5f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/93516/22/30367/129970/62eb3d65E53e397c1/49382e869b870721.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/56988/8/17862/291789/62748b8bEc1cf02a3/1d58cbccd2c78063.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/130117/29/22405/130285/62820802Ed4375ccf/eefc3e51b59238a3.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/26649/32/19173/70411/6376e6bbEa3c2bdb8/fb1a375a97ae5abe.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/47539/19/20229/120584/62f20707E34672378/01987866f8566e16.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/113463/33/29693/749544/635bf84fEcc8682e2/a4cfcb0be51b7077.png",
+  "https://img14.360buyimg.com/pop/jfs/t1/159927/23/30331/186835/632822d6E00915f02/10a26e4693a7e681.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/139564/40/17233/107308/5fcdfe4cE46fb52ed/a0c5278e009cea31.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/161303/12/7919/106942/60385db8Efeb35931/2d530b95381876f1.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/30320/17/1332/102376/5c4a5f94E375c55fb/8436bbd3b6e911ec.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/168647/6/32587/202126/6370f509Ef37b8b02/b7de9c52e8e178bc.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/180821/22/31570/91080/63724122Efa431339/d2456e92f7fa6272.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/180058/1/4876/136450/60a4c82bE374a4625/0ea6966cf575fa0c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t4048/252/288662110/127744/931a566e/58462cd6N653980df.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t3730/175/2005336193/179241/6d51e06/583ba764Na1a6ad63.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t24379/79/969676365/508909/9dae3e31/5b4978d3N399b8d4e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/118909/32/28358/186012/63719831E3bda45ad/6619decddc5fa64a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/202951/24/29278/139448/6375e2ebE3c1e3970/dd7e142aed6f34df.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/129412/4/25589/110641/63019927E029136d8/c04a6dc5ecf21437.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/41858/14/18979/115628/63195288Ea07f5af8/8daf44dfd4077bce.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/109441/34/29127/214659/626f495eEdde4cf12/5b1263bc25ccb743.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/207628/31/27665/203744/636e0db8E86d8e1b9/48853e2393b281de.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/190347/13/29207/146497/632c3427Edcc4cc57/30196967d43d0faa.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/99563/27/29523/262756/62a2f421E58dc05ac/d601fb50df5f2ec2.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/109507/9/33482/150733/6353f68bEed915957/5cfc778381fab6fa.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/143909/18/31812/195900/6371d309E26447c38/992d232d5332ebba.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/208123/32/26775/165511/636e20f7E2b8ca05a/20a849ea0864ff99.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/43618/21/6787/229384/5d0842bfE25b14dac/8760827ea33ae8f3.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/118040/27/32243/120333/6374bafaE9f5c05de/bcd38b57d07310db.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/187235/3/6183/123385/60b76197Eda91ac6e/016ea68b67d0f404.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/166536/37/22521/140765/624fc4c0Eca5e1232/4ada886bbeb9cff4.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/175595/39/12662/90261/60b72d0fE7bef0964/2d2a5400d1d0e695.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/170246/8/14090/131649/60582bb7E06b00acd/b893728d1a0843be.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/161590/20/24644/99908/61690fbdE0d2566fb/8b9de32350fc3347.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t24133/345/2259712899/475066/cc63d026/5b78dff8Nf99eda64.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/129467/30/30559/106411/6319588fEfd7e4341/e9c61352b942e388.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/62608/31/19710/157857/62cb9b83E7377d036/9eeab7adc14802e0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/142361/11/30622/126406/6374babbE3cfffd52/161f83031d25b981.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/22488/1/19203/212318/62f5b143E26de18d7/838fdccf878d6da0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/72156/29/13187/201766/5da5663eE2194501e/4f5ba88bdfbf3dcd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/207654/28/28140/49980/636e3dcdE3d7042b6/fe712dbd1504cd81.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/119661/30/12516/321046/5f27c4c4E7a95f5b8/d9300269ea2e6f87.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/189799/23/5908/66206/60b59e20Ead669811/531f8f6560ab3e8f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/82018/25/17011/145463/63730e68E1ffaa585/bb0b3810b3ed1645.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t4297/120/375562832/241785/c162c78b/58b3c779Na1ec50a0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/215401/32/3302/442712/61864969E5ac77a47/972b84a916fe8d83.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/195020/31/21721/116872/624fc438E8408389e/7c49a9496c9b6f1e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/214417/22/18256/49239/626bb632E6ae50be0/40b1b36491cdc48e.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/158790/4/30734/107950/633685c7E2a23c008/57f0fc494e8aa9fc.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/93108/29/14743/122104/5e6a2875Ef5a85647/fdc0f6379f113b56.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t4141/69/351575720/323555/ccd9008/58b3c601Na4f13da4.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/187191/6/30660/155436/6365c003E0bc09f62/ea46e927714e7776.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/86193/8/24144/341520/62288c27E89a77a6c/7f1879688b822d4c.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/145186/34/30762/107667/63623cecE77d0835e/9ea0ec040a1a9b41.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/146087/33/10439/185342/5f802d68Edce80c74/f92ed8a49d1b22cb.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/140743/8/30695/87802/63589c57Ed6682e87/28a5e676db4ca8fe.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/143045/12/30381/128027/6358ec09E7bc29672/02939cd3062bb89b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/120214/23/24480/250000/624160ebEf8a59bcb/7464a6d8b269c5bb.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/211733/26/23106/78039/6376e137E666d9970/715ef1f0383804d4.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/104519/13/19778/190400/5ea13c86E6fd8afc2/93c15612e9239868.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/55089/37/22662/150363/63305efbE6d226b32/2bb6c492562edae5.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t26317/267/1973577526/72583/8f77fa3d/5bf3ae8aN92842a02.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/183273/8/30477/120281/636fd262Ef1233391/5e62a4a36a1ee07a.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/211706/27/23690/112071/636fcea0E77f1449a/14f1ac9a30d5e0cd.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/168549/31/11019/135295/60472492E2ae30c17/8203f756e4fd472f.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/105092/26/28441/66353/636fcca4E5dd22652/0904c5b0ad5c32c0.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/199735/11/27666/105050/63589d64E5d939bd9/73bf3ab806f3ef55.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/96408/15/20607/440503/61cbfaceE405bc666/4d8dbba0e3057926.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/72116/25/23537/80804/636fcc58Ec034db2a/9f77888b4f70ac4b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/85967/11/30708/24754/636fceecE8249acee/d1b35e75ed18d89b.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/144273/16/32405/64581/636fcfd5Ebd81908c/f716bb1ff6c32981.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/50990/21/20378/256409/6327e83fE714b0ddc/dc6e37fe62335456.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/184100/8/30438/102923/637482f0E907a28ca/a94fc737996d4e26.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/216012/33/14278/317707/622aa502Efa2f7a63/2bb461433e45db34.jpg",
+  "https://img14.360buyimg.com/pop/jfs/t1/19915/29/19308/107504/632d155fE75400368/a3e896c1dbfccd18.jpg"
+]

package/BreakRender/data.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:21:46
+ * @Description: file content
+ */
+import imageUrl from "./assets/imageList.json"
+let data = [];
+for (let i = 0; i < imageUrl.length; ++i) {
+  data.push({
+    left: (i % 4) * 210,
+    top: Math.floor(i / 4) * 210,
+    width: 200,
+    height: 200,
+    url: imageUrl[i],
+    index: i,
+  });
+}
+export default data;

package/ClassDynamicSwitching/App.vue

@@ -0,0 +1,83 @@
+<template>
+  <jsv-focus-block autoFocus :onAction="actionDefines">
+    <div class="showName">{{ ` 当前组件： ` + myName }}</div>
+    <div class="guide">{{ '按 [1] 切换为Style组件，按 [2] 切换为Class组件，按 [3] 切换数据。' }}</div>
+    <StyleShow v-if="index == 0" :style="style" :data="data"></StyleShow>
+    <ClassShow v-else :style="style" :data="data"></ClassShow>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { reactive, shallowRef, provide } from "vue";
+import StyleShow from "./components/StyleShow.vue";
+import ClassShow from "./components/ClassShow.vue";
+
+let index = shallowRef(0);
+
+const style = {
+  width: 1280,
+  height: 720,
+  padding: {
+    left: 10,
+    top: 0,
+  },
+};
+let data = reactive([]);
+for (let i = 0; i < 651; i++) {
+  data.push({
+    width: 140,
+    height: 160,
+    title: `我是标题${i}`,
+  });
+}
+let change = shallowRef(false);
+provide("change", change);
+
+let myName = shallowRef("Style组件");
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 49:
+      //切换到style
+      index.value = 0;
+      myName.value = "Style组件";
+      break;
+    case 50:
+      //切换到class
+      index.value = 1;
+      myName.value = "Class组件";
+      break;
+    case 51:
+      change.value = !change.value;
+      break;
+    default:
+      break;
+  }
+};
+const actionDefines = {
+  onKeyDown,
+};
+</script>
+
+<style lang="scss" scoped>
+.showName {
+  top: 0;
+  left: 0;
+  width: 300;
+  height: 40;
+  background-color: rgba(255, 255, 255, 0.5);
+  font-size: 28;
+  line-height: 40;
+  z-index: 999;
+}
+.guide{
+  top: 0;
+  left: 950;
+  width: 330;
+  height: 120;
+  background-color: rgba(255, 255, 255, 0.5);
+  font-size: 28;
+  line-height: 40;
+  z-index: 999;
+}
+</style>