@shijiu/jsview-vue-samples 1.9.887 → 1.9.915

package/DivMetroPerformance/data.js

@@ -0,0 +1,124 @@
+// const data = [
+//     {
+//         blocks: {
+//             w: 200,
+//             h: 160
+//         },
+//         focusable: true,
+//         color: "#000022",
+//         content: 0
+//     },
+//     {
+//         blocks: {
+//             w: 200,
+//             h: 160
+//         },
+//         focusable: true,
+//         color: "#003300",
+//         content: 1
+//     },
+//     {
+//         blocks: {
+//             w: 200,
+//             h: 160
+//         },
+//         focusable: true,
+//         color: "#000044",
+//         content: 2
+//     },
+//     {
+//         blocks: {
+//             w: 400,
+//             h: 320
+//         },
+//         focusable: true,
+//         color: "#000055",
+//         content: 3
+//     },
+//     {
+//         blocks: {
+//             w: 200,
+//             h: 160
+//         },
+//         focusable: true,
+//         color: "#000066",
+//         content: 4
+//     },
+//     {
+//         blocks: {
+//             w: 200,
+//             h: 160
+//         },
+//         focusable: true,
+//         color: "#0000CD",
+//         content: 5
+//     },
+// ];
+
+// let content = 6;
+// for (let i = 0; i < 10; i++) {
+//     data.push({
+//         blocks: {
+//             w: 200,
+//             h: 320
+//         },
+//         focusable: true,
+//         color: "#000022",
+//         content: content++
+//     });
+//     data.push({
+//         blocks: {
+//             w: 200,
+//             h: 160
+//         },
+//         focusable: true,
+//         color: "#003300",
+//         content: content++
+//     });
+// }
+
+let data1 = [];
+
+// 添加300个模拟数据
+for (let i = 0; i < 50; i++) {
+  data1.push(Object.freeze({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  }));
+}
+
+let data2 = [];
+for (let i = 0; i < 49; i++) {
+  data2.push(Object.freeze({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  }));
+}
+
+let data3 = [];
+for (let i = 0; i < 48; i++) {
+  data3.push(Object.freeze({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  }));
+}
+
+export { data1, data2, data3 };

package/DivMetroPerformance/utils/GridItem.vue

@@ -0,0 +1,28 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-01-14 18:18:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-01-26 17:35:26
+ * @Description: file content
+-->
+<script>
+export default {
+  props: ["data", "index"],
+  created() {},
+  mounted() {},
+};
+</script>
+
+<template>
+  <div
+    ref="element"
+    :style="{
+      left: data.xPos,
+      top: data.yPos,
+      width: data.width,
+      height: data.height,
+    }"
+  >
+    <slot name="renderItem" :data="data.data"></slot>
+  </div>
+</template>

package/DivMetroPerformance/utils/GridPlate.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-22 13:47:23
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-02-11 17:55:55
+ * @Description: file content
+-->
+<script>
+import GridItem from "./GridItem.vue";
+
+export default {
+  props: {
+    data: Object,
+    height: {
+      type: Number,
+      required: true,
+    },
+    width: {
+      type: Number,
+      required: true,
+    },
+    measures: {
+      type: Function,
+      required: true,
+    },
+  },
+  components: {
+    GridItem,
+  },
+  created() {
+    this.configWidth = this.width;
+    this.configHeight = this.height;
+
+    // 通过measure函数，计算item信息
+    let measure_result = this.measures();
+    let current_line_x = 0;
+    let current_line_y = 0;
+    for (let idx = 0; idx < this.data.length; idx++) {
+      if (current_line_x + measure_result.width > this.configWidth) {
+        // new line
+        current_line_x = 0;
+        current_line_y += measure_result.height;
+      }
+
+      this.itemData.push(
+        Object.freeze({
+          id: idx,
+          xPos: current_line_x,
+          yPos: current_line_y,
+          data: this.data[idx],
+        })
+      );
+
+      // next item x
+      current_line_x += measure_result.width;
+    }
+  },
+  setup() {
+    return {
+      configWidth: 0,
+      configHeight: 0,
+      itemData: [],
+    };
+  },
+  mounted() {},
+  updated() {},
+};
+</script>
+
+<template>
+  <div
+    :style="{ width: configWidth, height: configHeight, overflow: 'hidden' }"
+  >
+    <grid-item
+      v-for="(item, index) in itemData"
+      :key="item.id"
+      :index="index"
+      :data="item"
+    >
+      <template v-slot:renderItem="slotProps">
+        <slot name="renderItem" v-bind="slotProps"></slot>
+      </template>
+    </grid-item>
+  </div>
+</template>

package/FilterDemo/AnimatePic.vue

@@ -39,7 +39,7 @@ const item_url =
 
 @keyframes opacityDemo_CompositeOpacity {
   from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
       rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
     opacity: 0.1;
   }
@@ -49,10 +49,10 @@ const item_url =
 
 @keyframes opacityDemo_CompositeNoOpacity {
   from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
       rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
   }
   to {
   }
-}
+} ;
 </style>

package/FilterDemo/App.vue

@@ -6,11 +6,11 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
-import sample from "./jpegDemo.jpeg";
-import webpSample from "./webpDemo.webp";
+import sample from "../assets/jpegDemo.jpeg";
+import webpSample from "../assets/webpDemo.webp";
 import AnimatePic from "./AnimatePic.vue";
 import VideoLayer from "./VideoLayer.vue";
 

package/FlipCard/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useRouter } from "vue-router";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { HORIZONTAL, MetroWidget } from "jsview";
 import FlipCard from "./FlipCard.vue";
 import { data } from "./data.js";
@@ -8,7 +8,7 @@ import redEgg from "./assets/red_egg.png";
 import blueEgg from "./assets/blue_egg.png";
 
 const name = "/flipCard";
-const focusNode = shallowRef(null);
+const focusNode = ref(null);
 const router = useRouter();
 
 const onKeyDown = (ev) => {

package/FlipCard/FlipCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 const props = defineProps({
   initFlipped: Boolean,
   width: Number,
@@ -18,7 +18,7 @@ let flipAnim = ref("");
 let flipped = ref(props.initFlipped);
 let focused = ref(false);
 let keyLocked = false;
-let focusNode = shallowRef(null);
+let focusNode = ref(null);
 
 const onFocus = () => {
   focused.value = true;

package/GridDemo/Item.vue

@@ -1,12 +1,12 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:48:32
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-16 16:25:06
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, onUpdated, onMounted } from "vue";
+import { ref, onUpdated, onMounted } from "vue";
 
 const props = defineProps({
   userData: Object,
@@ -24,16 +24,16 @@ const divNumber = new Array(50);
 const blurAction = false;
 
 const onFocus = () => {
-  console.log("item onfocus", props.userData);
+  // console.log("item onfocus", props.userData);
   focused.value = true;
 };
 const onBlur = () => {
-  console.log(
-    "item onblur",
-    props.userData,
-    props.widgetData.getCurrentFocusId(),
-    props.widgetData.dataIndex
-  );
+  // console.log(
+  //   "item onblur",
+  //   props.userData,
+  //   props.widgetData.getCurrentFocusId(),
+  //   props.widgetData.dataIndex
+  // );
   focused.value = false;
 };
 const onClick = () => {
@@ -45,10 +45,10 @@ props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
 
 onUpdated(() => {
-  console.log("item updated", props.userData, props.widgetData);
+  // console.log("item updated", props.userData, props.widgetData);
 });
 onMounted(() => {
-  console.log("item mounted", props.userData, props.widgetData);
+  // console.log("item mounted", props.userData, props.widgetData);
 });
 </script>
 
@@ -67,7 +67,7 @@ onMounted(() => {
     :style="{
       width: 100,
       height: 50,
-      fontSize: '30px',
+      fontSize: 30,
       color: '#FFFFFF',
     }"
   >

package/HashHistory/App.vue

@@ -7,7 +7,6 @@ export default {
 
 <script setup>
 import { jJsvRuntimeBridge } from "jsview";
-import { router, routeList } from "./router.js";
 import { useRouter, useRoute } from "vue-router";
 import { onMounted, ref, shallowRef } from "vue";
 

package/HashHistory/components/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 const props = defineProps({
   style: Object,
   name: String,
@@ -25,7 +25,7 @@ const itemStyle = {
   height: props.style.height,
   backgroundColor: "#0FF000",
   lineHeight: props.style.height,
-  fontSize: `${Math.floor(props.style.height * 0.55)}px`,
+  fontSize: Math.floor(props.style.height * 0.55),
 };
 </script>
 

package/HashHistory/views/MainPage.vue

@@ -50,7 +50,7 @@ const onBack = () => {
   top: 100;
   width: 1280;
   height: 100;
-  line-height: 100px;
+  line-height: 100;
   text-align: center;
   font-size: 55;
 }

package/HashHistory/views/SubPage.vue

@@ -50,7 +50,7 @@ const onBack = () => {
   top: 100;
   width: 1280;
   height: 100;
-  line-height: 100px;
+  line-height: 100;
   text-align: center;
   font-size: 55;
 }
@@ -59,7 +59,7 @@ const onBack = () => {
   top: 330;
   width: 1280;
   height: 100;
-  line-height: 100px;
+  line-height: 100;
   text-align: center;
   font-size: 30;
 }

package/ImpactStop/App.vue

@@ -6,7 +6,6 @@
  * @Description: file content
 -->
 <script setup>
-import { jJsvRuntimeBridge } from "@shijiu/jsview-vue/utils/JsViewVueTools/JsvRuntimeBridge";
 import {
   JsvActorMoveControl,
   JsvActorMove,
@@ -14,7 +13,7 @@ import {
   createImpactCallback,
   createImpactAutoFroze,
 } from "jsview";
-import { ref, shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
+import { shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const CONST_BOARD_LEFT = 0;
@@ -26,6 +25,7 @@ const CONST_BOX_HEIGHT = 30;
 
 const horizontalControl = new JsvActorMoveControl();
 const verticalControl = new JsvActorMoveControl();
+
 const boxLeft = shallowRef(null);
 const boxMid = shallowRef(null);
 const boxRight = shallowRef(null);
@@ -42,9 +42,9 @@ const actorState = {
   jumping: false,
   hMoving: false,
 };
-const showPrecisionGuild = ref(true);
-const direction = ref(1);
-const bodyState = ref(0);
+const showPrecisionGuild = shallowRef(true);
+const direction = shallowRef(1);
+const bodyState = shallowRef(0);
 const isJsView = Boolean(window.JsView);
 
 const actorColor = computed(() => {
@@ -238,8 +238,6 @@ onMounted(() => {
   );
 
   reset();
-
-  jJsvRuntimeBridge.notifyPageLoaded();
 });
 
 onBeforeUnmount(() => {
@@ -263,8 +261,8 @@ onBeforeUnmount(() => {
       v-if="isJsView"
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 100,
         top: 20,
@@ -428,9 +426,9 @@ onBeforeUnmount(() => {
 }
 
 .text {
-  font-size: 30px;
+  font-size: 30;
   color: #73665c;
-  line-height: 40px;
+  line-height: 40;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/Input/InputPanel.vue

@@ -1,14 +1,13 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:33:07
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-02 13:44:41
+ * @LastEditTime: 2023-02-01 13:46:07
  * @Description: file content
 -->
 <script>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";
@@ -39,7 +38,6 @@ export default {
       this.focusHub.setFocus(`${this.name}/keyboard`);
     },
     _onBlur() {
-      console.log("testtest onblur");
       this.showCursor = false;
       this.cursorColor = blurColor;
     },

package/LongImage/App.vue

@@ -43,8 +43,8 @@ const onKeyDown = (ev) => {
     <div
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 100,
         top: 20,

package/LongImage/Button.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/LongImage/ButtonItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 
 const props = defineProps({
   data: Object,

package/LongText/App.vue

@@ -27,7 +27,7 @@
 import LongTextScroll from "./LongTextScroll.vue";
 import Button from "./Button.vue";
 import { jJsvRuntimeBridge } from "jsview";
-import { onMounted, ref, shallowRef } from "vue";
+import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -55,8 +55,8 @@ onMounted(() => {
       <div
         :style="{
           textAlign: 'center',
-          fontSize: '30px',
-          lineHeight: '50px',
+          fontSize: 30,
+          lineHeight: 50,
           color: '#ffffff',
           left: 140,
           top: 20,

package/LongText/Button.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/LongText/ButtonItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 
 const props = defineProps({
   data: Object,

package/LongText/LongTextScroll.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Scroll from "./Scroll.vue";
-import { ref, shallowRef, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 const props = defineProps({
   step: Number,
@@ -10,8 +10,8 @@ const props = defineProps({
   textStyle: Object,
 });
 
-const rootRef = shallowRef(null);
-const element = shallowRef(null);
+const rootRef = ref(null);
+const element = ref(null);
 const scrollY = ref(0);
 const textY = ref(0);
 
@@ -77,7 +77,7 @@ onMounted(() => {
     name="longTextScroll"
     :onAction="onAction"
   >
-    <div :style="{ clipPath: 'inset(0px 0px 0px 0px)', ...style }">
+    <div :style="{ overflow: 'hidden', ...style }">
       <div
         ref="element"
         :style="{ top: textY, width: style.width, ...textStyle }"

package/Marquee/longText.js

@@ -1,8 +1,6 @@
 /*
  * @Author: ChenChanghua
  * @Date: 2022-11-10 15:08:28
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-21 17:47:57
  * @Description: file content
  */
 const longLongText =

package/MaskClip/App.vue

@@ -45,7 +45,7 @@ onMounted(() => {
           width: 1200,
           height: 100,
           color: '#FFFFFF',
-          fontSize: '30px',
+          fontSize: 30,
         }"
       >
         原始图片通过四个拼图形状的遮罩切成四种形状以形成拼图效果
@@ -53,8 +53,8 @@ onMounted(() => {
       <div
         :style="{
           textAlign: 'center',
-          fontSize: '30px',
-          lineHeight: '50px',
+          fontSize: 30,
+          lineHeight: 50,
           color: '#ffffff',
           left: 10,
           top: 100,
@@ -119,4 +119,4 @@ onMounted(() => {
       </div>
     </div>
   </jsv-focus-block>
-</template>
+</template>