@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/MetroWidgetDemos/focusableItemMix/ButtonItem.vue

@@ -4,7 +4,7 @@
  * @Description: 一个简单的按左右键, 焦点在左右两个view来回切换的控件
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useFocusHub } from "jsview";
 
 const props = defineProps({

package/MetroWidgetDemos/focusableItemMix/Item.vue

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

package/MetroWidgetDemos/itemSizeUpdate/backward/Item.vue

@@ -33,29 +33,7 @@ const duration = 200;
 
 let timeoutHandler = -1;
 
-const getResizeAnchor = () => {
-  if (props.query.index == 0) {
-    return 0;
-  } else if (props.query.index == props.dataLength - 1) {
-    return 1;
-  } else {
-    return 0.5;
-  }
-};
-
-const locateSetting = {
-  type: METRO_WIDGET_CONST.ITEM_RESIZE.CUSTOMER_SET,
-  func: (oldRect, newRect, oldItemPadding) => {
-    if (oldItemPadding + newRect.width > props.widgetLayout.width) {
-      return (
-        props.widgetLayout.width - newRect.width - props.widgetPadding.right
-      );
-    } else {
-      return oldItemPadding;
-    }
-  },
-};
-
+let originPadding;
 const animInfo = {
   duration: duration,
   onEnd: () => {
@@ -74,7 +52,22 @@ const onFocus = () => {
           width: width.value,
           height: props.data.height,
         },
-        locateSetting,
+        {
+          type: METRO_WIDGET_CONST.ITEM_RESIZE.CUSTOMER_SET,
+          func: (oldRect, newRect, oldItemPadding) => {
+            originPadding = oldItemPadding;
+            if (oldItemPadding + newRect.width > props.widgetLayout.width) {
+              //新的item超出了widget的宽度
+              return (
+                props.widgetLayout.width -
+                newRect.width -
+                props.widgetPadding.right
+              );
+            } else {
+              return oldItemPadding;
+            }
+          },
+        },
         animInfo
       );
     }, 1000); /* 延迟1秒变化 */
@@ -91,7 +84,12 @@ const onBlur = () => {
         width: width.value,
         height: props.data.height,
       },
-      locateSetting,
+      {
+        type: METRO_WIDGET_CONST.ITEM_RESIZE.CUSTOMER_SET,
+        func: (oldRect, newRect, oldItemPadding) => {
+          return originPadding;
+        },
+      },
       animInfo
     );
   }

package/MetroWidgetDemos/layoutType/App.vue

@@ -8,8 +8,6 @@ import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
 import Item from "./Item.vue";
 import { onMounted } from "vue";
 
-const TAG = "MetroWidgetDemo";
-
 const focusHub = useFocusHub();
 
 const randomColor = () => {

package/MetroWidgetDemos/layoutType/Item.vue

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

package/MetroWidgetDemos/ninePatchFocusPage/App.vue

@@ -7,7 +7,6 @@
 import {
   MetroWidget,
   VERTICAL,
-  EdgeDirection,
   useFocusHub,
   JsvNinePatch,
 } from "jsview";

package/MetroWidgetDemos/ninePatchFocusPage/PageRow.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({

package/MetroWidgetDemos/padding/App.vue

@@ -8,8 +8,6 @@ import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
 import Item from "./Item.vue";
 import { onMounted } from "vue";
 
-const TAG = "MetroWidgetDemo";
-
 const focusHub = useFocusHub();
 
 const randomColor = () => {

package/MetroWidgetDemos/padding/Item.vue

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

package/MetroWidgetDemos/slideSetting/Item.vue

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

package/MockjsDemo/App.vue

@@ -2,6 +2,8 @@
 import KeyEventCatcher from './KeyEventCatcher.vue';
 import resImage from '../assets/pngNoAlphaDemo.png';
 import { ref } from 'vue';
+
+// 打开注释为只在开发环境下生效
 // if(process.env.NODE_ENV == 'development') {
   await import('./mock/index.js')
 // }
@@ -11,8 +13,9 @@ export default {
     KeyEventCatcher,
   },
   data() {
-    const defName = "这是Mock前的数据"
+    const defName = "这是Mock前的本地数据"
     return {
+      index: 0,
       defName: defName,
       name: ref(defName),
       resImage: resImage,
@@ -20,18 +23,30 @@ export default {
   },
   mounted() {
     setInterval(async () => {
-      if (this.name != this.defName) {
-        this.name = this.defName;
-      } else {
+      this.index = (this.index + 1) % 3
+
+      let url = null;
+      switch(this.index) {
+        case 0: 
+          this.name = this.defName;
+          break;
+        case 1: 
+          url = '/api/testData';
+          break;
+        case 2: 
+          url = 'http://test.com/api/testData';
+          break;
+      }
+      if (url) {
         const xhr = new XMLHttpRequest();
-        xhr.open('GET', '/api/testData');
+        xhr.open('GET', url);
         xhr.onload = () => {
-          if (xhr.status !== 200) {
-            console.error('Failed to get data from mockjs')
-            return;
+          try {
+            const jsonData = JSON.parse(xhr.responseText);
+            this.name = jsonData.data.name;
+          } catch(ex) {
+            console.error('Failed to get data from mockjs', ex)
           }
-          const jsonData = JSON.parse(xhr.responseText);
-          this.name = jsonData.data.name;
         };
         xhr.send();
       }
@@ -43,7 +58,7 @@ export default {
 
 <template>
   <KeyEventCatcher/>
-  <div :style="{left:450, top: 200, width:500,
+  <div :style="{left:450, top:200, width:800,
      fontSize: 50, color: '#6688FF'}">
     {{ name }}
   </div>

package/MockjsDemo/mock/index.js

@@ -5,7 +5,15 @@ console.log("Generating mock data...");
 Mock.mock('/api/testData', 'get', {
     code: 0,
     data: {
-        name: '从Mockjs获取的数据'
+        name: '从Mockjs同域名获取的数据'
+    }
+})
+
+
+Mock.mock('http://test.com/api/testData', 'get', {
+    code: 0,
+    data: {
+        name: '从Mockjs跨域名获取的数据'
     }
 })
 

package/QrcodeDemo/App.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { JsvQrcode } from "jsview";
-import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();

package/SoundPool/App.vue

@@ -12,11 +12,10 @@ import {
   JsvAudio,
   globalLoadJsvAudioPlugin,
 } from "jsview";
-import { onMounted, onBeforeUnmount, shallowRef, toRaw } from "vue";
+import { onMounted, onBeforeUnmount, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 import bgMusic from "./bgmusic.mp3";
-// const bgMusic = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/bg_30s_music.mp3";
 
 const router = useRouter();
 const soundPool = new JsvSoundPool(10);

package/SpriteImage/App.vue

@@ -25,149 +25,113 @@
  * A: meta.size为整张切图的大小；frames中为每一帧的位置和大小信息，目前仅支持统一大小的帧
  -->
 
-<script>
+<script setup>
 import { SpriteController, JsvSpriteAnim } from "jsview";
 import spriteImage from "./images/egg_break.png";
 import config_json from "./images/egg_break.json";
-export default {
-  components: {
-    JsvSpriteAnim,
-  },
-  setup() {
-    return {
-      spriteImage: spriteImage,
-      config_json: config_json,
-    };
-  },
-  data() {
-    console.log(
-      "test spriteImage =",
-      spriteImage,
-      "/n config_json=",
-      config_json
-    );
-    const sprite_info = this._formatInfo();
-    console.log("test sprite_into =", sprite_info);
-    const view_size = {
-      w: sprite_info.maxW,
-      h: sprite_info.maxH,
-    };
-    console.log("test view_size =", view_size);
-    return {
-      sprite_info,
-      view_size,
-      spriteController: new SpriteController(),
-      show: true,
-    };
-  },
-  methods: {
-    spriteAnimEnd() {
-      this.show = false;
-    },
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      return true;
-    },
-    _formatInfo() {
-      const info = {
-        frames: [],
-        meta: {
-          size: this.config_json.meta.size,
-        },
-      };
+import { shallowRef } from "vue"
+import { useRouter } from "vue-router";
 
-      let frames_ref = info.frames;
-      let max_width = 0;
-      let max_height = 0;
+console.log("test spriteImage =", spriteImage, "/n config_json=", config_json);
+const router = useRouter();
 
-      for (let i = 0; i < this.config_json.frames.length; i++) {
-        const target = this.config_json.frames[i].spriteSourceSize;
-        frames_ref.push({
-          target,
-          source: this.config_json.frames[i].frame,
-        });
-        const sprite_with = target.x + target.w;
-        const sprite_height = target.y + target.h;
-        if (sprite_with > max_width) {
-          max_width = sprite_with;
-        }
-        if (sprite_height > max_height) {
-          max_height = sprite_height;
-        }
-      }
-      return { info, maxW: max_width, maxH: max_height };
+const _formatInfo = () => {
+  const info = {
+    frames: [],
+    meta: {
+      size: config_json.meta.size,
     },
-  },
+  };
+
+  let frames_ref = info.frames;
+  let max_width = 0;
+  let max_height = 0;
+
+  for (let i = 0; i < config_json.frames.length; i++) {
+    const target = config_json.frames[i].spriteSourceSize;
+    frames_ref.push({
+      target,
+      source: config_json.frames[i].frame,
+    });
+    const sprite_with = target.x + target.w;
+    const sprite_height = target.y + target.h;
+    if (sprite_with > max_width) {
+      max_width = sprite_with;
+    }
+    if (sprite_height > max_height) {
+      max_height = sprite_height;
+    }
+  }
+  return { info, maxW: max_width, maxH: max_height };
+}
+
+const spriteController = new SpriteController()
+const sprite_info = _formatInfo();
+console.log("test sprite_into =", sprite_info);
+
+const view_size = {
+  w: sprite_info.maxW,
+  h: sprite_info.maxH,
 };
+
+let show = shallowRef(true)
+
+const spriteAnimEnd = () => {
+  show.value = false;
+}
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  return true;
+}
 </script>
 
 <template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: 30,
-        lineHeight: 50,
-        color: '#ffffff',
-        left: 200,
-        top: 100,
-        width: 434,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
+  <jsv-focus-block autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+  }">
+    <div :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 200,
+      top: 100,
+      width: 434,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }">
       精灵图效果
     </div>
     <!--
                 通过show进行 清理精灵图，用于验证精灵图清理后，StyleSheet中cssRules的keyFrame清理工作能正常完成
             -->
-    <div
-      v-if="this.show"
-      :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }"
-    >
-      <JsvSpriteAnim
-        :spriteInfo="sprite_info.info"
-        :loop="10"
-        :viewSize="view_size"
-        :duration="0.8"
-        :controller="this.spriteController"
-        :autostart="true"
-        :onAnimEnd="spriteAnimEnd"
-        :imageUrl="spriteImage"
-      />
+    <div v-if="show" :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }">
+      <JsvSpriteAnim :spriteInfo="sprite_info.info" :loop="10" :viewSize="view_size" :duration="0.8"
+        :controller="spriteController" :autostart="true" :onAnimEnd="spriteAnimEnd" :imageUrl="spriteImage" />
     </div>
 
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: 30,
-        lineHeight: 50,
-        color: '#ffffff',
-        left: 700,
-        top: 100,
-        width: 434,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
+    <div :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 700,
+      top: 100,
+      width: 434,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }">
       原始图片
     </div>
-    <div
-      :style="{
-        left: 700,
-        top: 150,
-        width: 434,
-        height: 372,
-        backgroundImage: `url(${spriteImage})`,
-      }"
-    />
+    <div :style="{
+      left: 700,
+      top: 150,
+      width: 434,
+      height: 372,
+      backgroundImage: `url(${spriteImage})`,
+    }" />
   </jsv-focus-block>
 </template>

package/Swiper/App.vue

@@ -6,12 +6,10 @@
 
 <script setup>
 import { JsvSwiper, useFocusHub, EdgeDirection } from "jsview";
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 
 const focusHub = useFocusHub();
 
-const mySwiper = ref(null);
-
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
   return (