@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/SimpleWidgetDemo/components/MyTab.vue

@@ -1,117 +1,117 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-29 16:13:35
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 17:07:19
- * @Description: file content
--->
-<script>
-import { ref } from "vue";
-
-export default {
-  props: {
-    name: Object,
-    onEdgeDown: Function,
-    onItemFocus: Function,
-  },
-  setup() {
-    let activeId = ref(0);
-    let focused = ref(false);
-    return {
-      activeId,
-      focused,
-    };
-  },
-  computed: {
-    tab1Class() {
-      if (this.activeId == 0) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-    tab2Class() {
-      if (this.activeId == 1) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          if (this.activeId == 1) {
-            this.activeId = 0;
-            this.onItemFocus(0);
-          }
-          break;
-        case 39:
-          if (this.activeId == 0) {
-            this.activeId = 1;
-            this.onItemFocus(1);
-          }
-          break;
-        case 40:
-          this.onEdgeDown();
-          break;
-      }
-    },
-    onFocus() {
-      this.focused = true;
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    getOnAction() {
-      return {
-        onKeyDown: this.onKeyDown,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block :name="name" :onAction="getOnAction()"></jsv-focus-block>
-  <div :class="tab1Class">Tab1</div>
-  <div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
-</template>
-
-<style scoped>
-.text-normal {
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
-  color: #444444;
-  font-size: 25px;
-  text-align: center;
-}
-
-.text-active {
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
-  color: #ffffff;
-  font-size: 25px;
-  text-align: center;
-}
-
-.item-focused {
-  width: 200px;
-  height: 50px;
-  background-color: #008080;
-}
-.item-normal {
-  width: 200px;
-  height: 50px;
-  background-color: #87CECB;
-}
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-29 16:13:35
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-09-29 17:07:19
+ * @Description: file content
+-->
+<script>
+import { ref } from "vue";
+
+export default {
+  props: {
+    name: Object,
+    onEdgeDown: Function,
+    onItemFocus: Function,
+  },
+  setup() {
+    let activeId = ref(0);
+    let focused = ref(false);
+    return {
+      activeId,
+      focused,
+    };
+  },
+  computed: {
+    tab1Class() {
+      if (this.activeId == 0) {
+        return this.focused
+          ? "text-active item-focused"
+          : "text-active item-normal";
+      } else {
+        return "text-normal item-normal";
+      }
+    },
+    tab2Class() {
+      if (this.activeId == 1) {
+        return this.focused
+          ? "text-active item-focused"
+          : "text-active item-normal";
+      } else {
+        return "text-normal item-normal";
+      }
+    },
+  },
+  methods: {
+    onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (this.activeId == 1) {
+            this.activeId = 0;
+            this.onItemFocus(0);
+          }
+          break;
+        case 39:
+          if (this.activeId == 0) {
+            this.activeId = 1;
+            this.onItemFocus(1);
+          }
+          break;
+        case 40:
+          this.onEdgeDown();
+          break;
+      }
+    },
+    onFocus() {
+      this.focused = true;
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    getOnAction() {
+      return {
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block :name="name" :onAction="getOnAction()"></jsv-focus-block>
+  <div :class="tab1Class">Tab1</div>
+  <div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
+</template>
+
+<style scoped>
+.text-normal {
+  width: 200px;
+  height: 50px;
+  line-height: 50px;
+  color: #444444;
+  font-size: 25px;
+  text-align: center;
+}
+
+.text-active {
+  width: 200px;
+  height: 50px;
+  line-height: 50px;
+  color: #ffffff;
+  font-size: 25px;
+  text-align: center;
+}
+
+.item-focused {
+  width: 200px;
+  height: 50px;
+  background-color: #008080;
+}
+.item-normal {
+  width: 200px;
+  height: 50px;
+  background-color: #87CECB;
+}
 </style>

package/samples/SimpleWidgetDemo/data.js

@@ -1,110 +1,110 @@
-// 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 < 500; i++) {
-  data1.push({
-    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 < 500; i++) {
-  data2.push({
-    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 };
+// 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 < 500; i++) {
+  data1.push({
+    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 < 500; i++) {
+  data2.push({
+    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 };