@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1073

package/NinePatchDemo/Item.vue

@@ -1,18 +1,17 @@
 <script setup>
-import { ref, inject } from "vue";
+import { shallowRef, inject } from "vue";
+import imgSrc from "../assets/jpegDemo.jpeg";
 
 const focusSize = inject("focusSize");
 
 const props = defineProps({
   data: Object,
   query: Object,
-  onEdge: Function,
   onAction: Object,
-  frameChanged: Function,
 });
 
-const focused = ref(false);
-const divRef = ref(null);
+const focused = shallowRef(false);
+const divRef = shallowRef(null);
 
 const onFocus = () => {
   focused.value = true;
@@ -46,6 +45,7 @@ props.onAction.register("onClick", onClicked);
 
 <template>
   <div
+    v-if="query.index == 1"
     ref="divRef"
     :class="focused ? 'focus' : 'blur'"
     :style="{
@@ -57,6 +57,16 @@ props.onAction.register("onClick", onClicked);
   >
     {{ data.content }}
   </div>
+  <img
+    v-else
+    ref="divRef"
+    :class="focused ? 'focus' : 'blur'"
+    :src="`url(${imgSrc})`"
+    :style="{
+      width: data.width,
+      height: data.height,
+    }"
+  />
 </template>
 
 <style scoped>

package/Preload/Item.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { ref } from "vue";
+import { shallowRef, watch } from "vue";
 const props = defineProps({
   data: Object,
   query: Object,
   onEdge: Function,
   onAction: Object,
 });
-const focus = ref(false);
+const focus = shallowRef(false);
 
 const onFocus = () => {
   focus.value = true;
@@ -19,14 +19,31 @@ props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", () => {
   console.log("cchtest item on click ", data);
 });
+
+const imgUrl = shallowRef(props.data.url);
+
+watch(focus, () => {
+  imgUrl.value = focus.value ? props.data.focusUrl : props.data.url;
+});
 </script>
 
 <template>
-  <div
-    :style="{
-      width: 166,
-      height: 90,
-      backgroundImage: focus ? data.focusUrl : data.url,
-    }"
-  ></div>
-</template>
+  <div>
+    <!-- 测试div的backgroundImage响应式处理 -->
+    <!-- <div
+      :style="{
+        width: 166,
+        height: 90,
+        backgroundImage: imgUrl,
+      }"
+    ></div> -->
+    <!-- 测试img的src响应式处理 -->
+    <img
+      :src="imgUrl"
+      :style="{
+        width: 166,
+        height: 90,
+      }"
+    />
+  </div>
+</template>

package/SprayView/App.vue

@@ -9,9 +9,19 @@
 import { JsvSpray } from "jsview";
 import { ref } from "vue";
 import snow from "./assets/snow.png";
+import GoldenCoin1 from "./assets/goldencoin1.png";
+import GoldenCoin2 from "./assets/goldencoin2.png";
+import RedPacket1 from "./assets/redpacket1.png";
+import RedPacket2 from "./assets/redpacket2.png";
+import Star1 from "./assets/star1.png";
+import Star2 from "./assets/star2.png";
+import Star3 from "./assets/star3.png";
+import Star4 from "./assets/star4.png";
+//定义图片url列表
+const ImgData = [snow, GoldenCoin1, GoldenCoin2, RedPacket1, RedPacket2, Star1, Star2, Star3, Star4]
 const sprayOk = {
   type: 0,
-  particleNum: 100,
+  particleNum: 50,
   deltaAngle: 180,
   deltaWidth: 50,
   deltaHeight: 50,
@@ -30,7 +40,7 @@ const sprayOk = {
 
 const sprayRotate = {
   type: 1,
-  particleNum: 100,
+  particleNum: 50,
   deltaAngle: 0,
   deltaWidth: 0,
   deltaHeight: 50,
@@ -134,33 +144,26 @@ const s = {
 
 <template>
   <div class="root">
-    <jsv-focus-block
-      autoFocus
-      :onAction="{
-        onKeyDown: onKeyDown,
-      }"
-    >
+    <jsv-focus-block autoFocus :onAction="{
+      onKeyDown: onKeyDown,
+    }">
       <div :style="{ top: 20, left: 400 }">
-        <div
-          :style="{
-            width: 40,
-            height: 40,
-            animation: 'cycle 3s linear infinite',
-          }"
-        >
+        <div :style="{
+          width: 40,
+          height: 40,
+          animation: 'cycle 3s linear infinite',
+        }">
           <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayCycle" />
         </div>
-        <div
-          :style="{
-            top: 20,
-            width: 400,
-            height: 100,
-            lineHeight: 100,
-            textAlign: 'center',
-            fontSize: 50,
-            color: '#FFFFFF',
-          }"
-        >
+        <div :style="{
+          top: 20,
+          width: 400,
+          height: 100,
+          lineHeight: 100,
+          textAlign: 'center',
+          fontSize: 50,
+          color: '#FFFFFF',
+        }">
           粒子效果
         </div>
         <div class="describe">
@@ -168,24 +171,22 @@ const s = {
         </div>
       </div>
 
-      <div
-        :style="{
-          left: 0,
-          top: 200,
-          width: 400,
-          height: 600,
-          overflow: 'hidden',
-        }"
-      >
+      <div :style="{
+        left: 0,
+        top: 200,
+        width: 400,
+        height: 600,
+        overflow: 'hidden',
+      }">
         <div :style="{ top: 150, left: 150 }">
           <div class="spray-ok">
-            <jsv-spray
-              v-if="okCount > 0"
-              :key="okCount"
-              :pointRes="`url(${snow})`"
+            <div v-if="okCount > 0">
+              <jsv-spray v-for="item in ImgData" 
+              :key="okCount" 
+              :pointRes="`url(${item})`" 
               :sprayStyle="sprayOk"
-              :ignoreClip="true"
-            />
+              :ignoreClip="true" />
+            </div>
           </div>
           <div class="describe">
             {{
@@ -194,36 +195,29 @@ const s = {
           </div>
         </div>
       </div>
-      <div
-        :style="{
-          left: 400,
-          top: 200,
-          width: 400,
-          height: 600,
-          overflow: 'hidden',
-        }"
-      >
+      <div :style="{
+        left: 400,
+        top: 200,
+        width: 400,
+        height: 600,
+        overflow: 'hidden',
+      }">
         <div :style="{ top: 150, left: 195 }">
           <div class="spray-rotate">
-            <jsv-spray
-              pointRes="rgba(0, 255, 0, 1)"
-              :sprayStyle="sprayRotate"
-            />
+            <jsv-spray v-for="item in ImgData" :pointRes="`url(${item})`" :sprayStyle="sprayRotate" />
           </div>
           <div class="describe">
             {{ `#粒子沿长边随机生成\n#初速度沿长边方向\n#受竖直方向的力作用` }}
           </div>
         </div>
       </div>
-      <div
-        :style="{
-          left: 800,
-          top: 200,
-          width: 400,
-          height: 600,
-          overflow: 'hidden',
-        }"
-      >
+      <div :style="{
+        left: 800,
+        top: 200,
+        width: 400,
+        height: 600,
+        overflow: 'hidden',
+      }">
         <div :style="{ top: 150, left: 150 }">
           <div class="spray-move">
             <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayMove" />
@@ -244,15 +238,19 @@ const s = {
   0% {
     transform: translate3d(0, 0, 0);
   }
+
   25% {
     transform: translate3d(100, 0, 0);
   }
+
   50% {
     transform: translate3d(0, 0, 0);
   }
+
   75% {
     transform: translate3d(100, 0, 0);
   }
+
   100% {
     transform: translate3d(0, 0, 0);
   }
@@ -262,6 +260,7 @@ const s = {
   from {
     transform: rotate3d(0, 0, 1, 0);
   }
+
   to {
     transform: rotate3d(0, 0, 1, 360deg);
   }
@@ -271,19 +270,24 @@ const s = {
   0% {
     transform: translate3d(0, 0, 0);
   }
+
   40% {
     transform: translate3d(400, 0, 0);
   }
+
   50% {
     transform: translate3d(400, 100, 0);
   }
+
   90% {
     transform: translate3d(0, 100, 0);
   }
+
   100% {
     transform: translate3d(0, 0, 0);
   }
 }
+
 .root {
   width: 1280;
   height: 720;
@@ -295,23 +299,27 @@ const s = {
   height: 100;
   background-color: #00ff00;
 }
+
 .spray-rotate {
   width: 10;
   height: 100;
   background-color: #00ff00;
   animation: rotate 3s linear infinite;
 }
+
 .spray-move {
   width: 100;
   height: 100;
   background-color: #00ff00;
   animation: move-back-force 10s linear infinite;
 }
+
 .spray-cycle {
   width: 40;
   height: 40;
   animation: cycle 3s linear infinite;
 }
+
 .describe {
   left: 0;
   top: 140;

package/Swiper/App.vue

@@ -140,7 +140,7 @@ onMounted(() => {
               dataIndex == currentIndex
                 ? 'rgba(100, 100, 100, 0.7)'
                 : '#ff0000',
-            borderRadius: '15px',
+            borderRadius: 10,
           }"
         ></div>
       </template>

package/TextureAnimation/App2.vue

@@ -12,6 +12,9 @@ import {
 import img from "./assets/light.png";
 import img2 from "./assets/light2.png";
 import mask from "./assets/mask.png";
+import { getDataUrl } from "../CommonUtils/ResourceData";
+//无网络环境下使用
+const DemoResourceBase = getDataUrl()
 
 const getRandom = (start, end) => {
   return Math.round(Math.random() * (end - start) + start);
@@ -58,8 +61,7 @@ const onKeyDown = (ev) => {
     :style="{
       width: 1280,
       height: 720,
-      backgroundImage:
-        'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
+      backgroundImage: DemoResourceBase ?`${DemoResourceBase}/BackgroundLongmao.jpg` :'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
     }"
   >
     <div

package/TouchSample/Item.vue

@@ -6,7 +6,6 @@
  * @Description: file content
 -->
 <script>
-import { getPositionRelativeToView } from "jsview";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.0.1021",
+  "version": "2.0.1073",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",
@@ -13,6 +13,7 @@
   ],
   "devDependencies": {
     "less": "4.1.3",
+    "mockjs": "1.1.0",
     "sass": "1.58.1",
     "stylus": "0.59.0"
   },