@shijiu/jsview-vue-samples 1.9.747

package/DemoHomepage/components/Dialog.vue

@@ -0,0 +1,94 @@
+<script>
+export default {
+  props: {
+    name: String,
+    onAction: Function,
+  },
+  data() {
+    return {
+      focusId: 0,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (this.focusId == 1) {
+            this.focusId = 0;
+          }
+          break;
+        case 39:
+          if (this.focusId == 0) {
+            this.focusId = 1;
+          }
+          break;
+        case 10000:
+        case 27:
+          this.onAction("back");
+          break;
+        case 13:
+          this.onAction(this.focusId == 0 ? "ok" : "cancel");
+          break;
+        default:
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :name="name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div :style="{ top: 200, left: 465 }">
+      <div class="background"></div>
+      <div class="message">是否退出</div>
+      <div :style="{ top: 120, left: 30 }">
+        <div v-if="focusId == 0" class="focus"></div>
+        <div class="normal">确定</div>
+      </div>
+      <div :style="{ top: 120, left: 220 }">
+        <div v-if="focusId == 1" class="focus"></div>
+        <div class="normal">取消</div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.focus {
+  top: -5px;
+  left: -5px;
+  width: 100px;
+  height: 50px;
+  background-color: #0000ff;
+}
+
+.normal {
+  width: 90px;
+  height: 40px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 30px;
+}
+.background {
+  left: 0px;
+  top: 0px;
+  width: 350px;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.message {
+  top: 20px;
+  width: 350px;
+  height: 50px;
+  color: #ffffff;
+  font-size: 40px;
+  text-align: center;
+}
+</style>

package/DemoHomepage/components/Item.vue

@@ -0,0 +1,77 @@
+<script>
+export default {
+  props: {
+    style: Object,
+    itemClick: Function,
+    itemFocus: Function,
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  data() {
+    return {
+      focused: false,
+      anim: "flip 1s",
+    };
+  },
+  computed: {
+    foucsStyle() {
+      return {
+        width: this.style.width,
+        height: this.style.height,
+      };
+    },
+    itemStyle() {
+      return {
+        width: this.style.width - 10,
+        height: this.style.height - 10,
+        backgroundColor: this.style.backgroundColor,
+        color: this.style.color,
+      };
+    },
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      if (this.itemFocus) {
+        this.itemFocus(this.data);
+      }
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onClick() {
+      if (this.itemClick) {
+        this?.itemClick(this.query.id, this.data);
+      }
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="focus" :style="foucsStyle" v-if="focused" />
+    <div class="item" :style="itemStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  top: -5;
+  left: -5;
+  background-color: #0000ff;
+}
+.item {
+  text-align: center;
+  font-size: 30;
+}
+</style>

package/DemoHomepage/components/TabFrame.vue

@@ -0,0 +1,85 @@
+<script>
+import { MetroWidget, VERTICAL } from "jsview";
+import Item from "./Item.vue";
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    focusable: item.focusable,
+  };
+};
+
+export default {
+  components: {
+    MetroWidget,
+    Item,
+  },
+  props: {
+    name: String,
+    itemFocus: Function,
+    onEdge: Function,
+    initId: Number,
+  },
+  setup() {
+    const width = 1280;
+    const height = 100;
+    const data = [
+      {
+        width: 200,
+        height: 50,
+        name: "功能实例",
+        focusable: true,
+        id: 0,
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "MetroWidget",
+        focusable: true,
+        id: 1,
+      },
+    ];
+    const direction = VERTICAL;
+    return {
+      width,
+      height,
+      data,
+      direction,
+      measures,
+    };
+  },
+};
+</script>
+
+<template>
+  <metro-widget
+    :name="name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :data="data"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="onEdge"
+    :initFocusId="initId"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <Item
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundColor: '#00AA00',
+          color: '#FFFFFF',
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemFocus="itemFocus"
+      >
+        {{ data.name }}
+      </Item>
+    </template>
+  </metro-widget>
+</template>

package/DemoHomepage/router.js

@@ -0,0 +1,196 @@
+import { createRouter } from 'vue-router';
+import { jsvCreateHashHistory } from 'jsview';
+
+const routeList = [
+  // 功能实例
+  {
+    name: 'Home',
+    path: '/',
+    component: () => import('./views/Homepage.vue'),
+  },
+  {
+    name: '基础示例合集',
+    path: '/feature/Basic',
+    component: () => import('jsview-vue-samples/Basic/App.vue'),
+  },
+  {
+    name: '可视化变化通知',
+    path: '/feature/VisibleSensorDemo',
+    component: () => import('jsview-vue-samples/VisibleSensorDemo/App.vue'),
+  },
+  {
+    name: '快速刷新的表格布局组件',
+    path: '/feature/GridDemo',
+    component: () => import('jsview-vue-samples/GridDemo/App.vue'),
+  },
+  {
+    name: '.9图焦点框漂移',
+    path: '/feature/NinePatchDemo',
+    component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
+  },
+  {
+    name: '视频',
+    path: '/feature/VideoDemo',
+    component: () => import('jsview-vue-samples/VideoDemo/App.vue'),
+  },
+  {
+    name: '焦点切换demo',
+    path: '/feature/BasicFocusControl',
+    component: () => import('jsview-vue-samples/BasicFocusControl/App.vue'),
+  },
+  {
+    name: 'Hash方式路由切换',
+    path: '/feature/HashHistory',
+    props: { routePath: '/feature/HashHistory' },
+    component: () => import('jsview-vue-samples/HashHistory/App.vue'),
+  },
+  {
+    name: '翻牌游戏',
+    path: '/feature/FlipCard',
+    component: () => import('jsview-vue-samples/FlipCard/App.vue'),
+  },
+  {
+    name: '设置颜色空间',
+    path: '/feature/ColorSpace',
+    component: () => import('jsview-vue-samples/ColorSpace/App.vue'),
+  },
+  {
+    name: '制定Texture尺寸',
+    path: '/feature/TextureSize',
+    component: () => import('jsview-vue-samples/TextureSize/App.vue'),
+  },
+  {
+    name: '动图',
+    path: '/feature/AnimPicture',
+    component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
+  },
+  {
+    name: '粒子效果',
+    path: '/feature/SprayView',
+    component: () => import('jsview-vue-samples/SprayView/App.vue'),
+  },
+  {
+    name: '长文字',
+    path: '/feature/LongText',
+    component: () => import('jsview-vue-samples/LongText/App.vue'),
+  },
+  {
+    name: '长图片',
+    path: '/feature/LongImage',
+    component: () => import('jsview-vue-samples/LongImage/App.vue'),
+  },
+  {
+    name: '二维码',
+    path: '/feature/QrcodeDemo',
+    component: () => import('jsview-vue-samples/QrcodeDemo/App.vue'),
+  },
+  {
+    name: '文字阴影',
+    path: '/feature/TextShadowDemo',
+    component: () => import('jsview-vue-samples/TextShadowDemo/App.vue'),
+  },
+  {
+    name: '多行文字区域内对齐',
+    path: '/feature/TextBox',
+    component: () => import('jsview-vue-samples/TextBox/App.vue'),
+  },
+  {
+    name: '抛物运动写法样例',
+    path: '/feature/ThrowMoveDemo',
+    component: () => import('jsview-vue-samples/ThrowMoveDemo/App.vue'),
+  },
+  {
+    name: '精灵图',
+    path: '/feature/SpriteImage',
+    component: () => import('jsview-vue-samples/SpriteImage/App.vue'),
+  },
+  {
+    name: '文字滚动(标题跑马灯)',
+    path: '/feature/Marquee',
+    component: () => import('jsview-vue-samples/Marquee/App.vue'),
+  },
+  {
+    name: '文字输入',
+    path: '/feature/Input',
+    component: () => import('jsview-vue-samples/Input/App.vue'),
+  },
+  {
+    name: '拼图demo',
+    path: '/feature/MaskClip',
+    component: () => import('jsview-vue-samples/MaskClip/App.vue'),
+  },
+  {
+    name: 'SoundPool',
+    path: '/feature/SoundPool',
+    component: () => import('jsview-vue-samples/SoundPool/App.vue'),
+  },
+  {
+    name: 'TextureAnimation',
+    path: '/feature/TextureAnimation',
+    component: () => import('jsview-vue-samples/TextureAnimation/App.vue'),
+  },
+  {
+    name: '焦点框旋转光效果',
+    path: '/feature/TextureAnimation2',
+    component: () => import('jsview-vue-samples/TextureAnimation/App2.vue'),
+  },
+  {
+    name: '公祭日黑白效果',
+    path: '/feature/FilterDemo',
+    component: () => import('jsview-vue-samples/FilterDemo/App.vue'),
+  },
+  {
+    name: '预加载',
+    path: '/feature/Preload',
+    component: () => import('jsview-vue-samples/Preload/App.vue'),
+  },
+  {
+    name: '图片缩小算法',
+    path: '/feature/ScaleDownNeon',
+    component: () => import('jsview-vue-samples/ScaleDownNeon/App.vue'),
+  },
+  // {
+  //   name: '碰撞检测',
+  //   path: '/feature/Collision',
+  //   component: () => import('jsview-vue-samples/Collision/App'),
+  // },
+  // {
+  //   name: '碰撞即停',
+  //   path: '/feature/ImpactStop',
+  //   component: () => import('jsview-vue-samples/ImpactStop/App'),
+  // },
+
+  // MetroWidget示例
+  {
+    name: '简单示例',
+    path: '/metroWidget/Simple',
+    component: () => import('jsview-vue-samples/MetroWidgetDemos/Simple/App.vue'),
+  },
+  {
+    name: '嵌套示例',
+    path: '/metroWidget/Advanced',
+    component: () => import('jsview-vue-samples/MetroWidgetDemos/Advanced/App.vue'),
+  },
+  {
+    name: '性能测试',
+    path: '/metroWidget/PerformanceTest',
+    component: () =>
+      import('jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue'),
+  },
+  {
+    name: '乒乓模式',
+    path: '/metroWidget/PingPong',
+    component: () =>
+      import('jsview-vue-samples/MetroWidgetDemos/PingPong/App.vue'),
+  },
+];
+
+const router = createRouter({
+  // 浏览器调试和盒子上都可以使用类WebHashHistory的jsvCreateHashHistory(推荐)
+  // 或 createMemoryHistory;
+  // createWebHashHistory只能用于浏览器调试，盒子不支持
+  history: jsvCreateHashHistory(),
+  routes: routeList,
+});
+
+export { router, routeList };

package/DemoHomepage/views/Homepage.vue

@@ -0,0 +1,195 @@
+<script>
+import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
+import TabFrame from "../components/TabFrame.vue";
+import BodyFrame from "../components/BodyFrame.vue";
+import Dialog from "../components/Dialog.vue";
+import { routeList } from "../router.js";
+
+const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
+
+const featureData = [];
+const metroWidgetData = [];
+for (let item of routeList) {
+  let obj = {
+    name: item.name,
+    path: item.path,
+    width: 300,
+    height: 100,
+    focusable: true,
+  };
+  if (item.path.indexOf("feature") >= 0) {
+    obj.backgroundColor = colorTemplete[featureData.length % 4];
+    featureData.push(obj);
+  } else if (item.path.indexOf("metroWidget") >= 0) {
+    obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
+    metroWidgetData.push(obj);
+  }
+}
+const dataList = [featureData, metroWidgetData];
+
+export default {
+  components: {
+    TabFrame,
+    Dialog,
+    BodyFrame,
+  },
+  data() {
+    return {
+      showExitDialog: false,
+      contentData: dataList[0],
+      tabId: 0,
+      preFocusName: "",
+      curFocusName: "",
+    };
+  },
+  setup() {
+    return {
+      name: "/home",
+    };
+  },
+  computed: {
+    address() {
+      return window.localStorage.href;
+    },
+  },
+  methods: {
+    onFocus() {
+      this.changeFocus(this.name + "/bodyFrame");
+    },
+    onKeyDown(ev) {
+      // 处理返回键
+      if (
+        ev.keyCode == 8 || // Backspace
+        ev.keyCode == 27 || // Escape
+        ev.keyCode == 10000 // 盒子返回键
+      ) {
+        this.showExitDialog = !this.showExitDialog;
+        if (!this.showExitDialog) {
+          this.changeFocus(this.preFocusName);
+        } else {
+          this.preFocusName = this.curFocusName;
+          this.curFocusName = this.name + "/exitDialog";
+        }
+      }
+      return true;
+    },
+    changeFocus(name) {
+      this.preFocusName = this.curFocusName;
+      this.curFocusName = name;
+      this.$refs.rootNode.findBlockByName(name).requestFocus();
+    },
+    onTabEdge(edgeInfo) {
+      if (edgeInfo.direction === EdgeDirection.bottom) {
+        this.changeFocus(this.name + "/bodyFrame");
+      }
+    },
+    onContentEdge(edgeInfo) {
+      if (edgeInfo.direction === EdgeDirection.top) {
+        this.changeFocus(this.name + "/tabFrame");
+      }
+    },
+    tabItemFocus(data) {
+      if (data.id != this.tabId) {
+        this.tabId = data.id;
+        this.contentData = dataList[this.tabId];
+      }
+    },
+    onDialogAction(msg) {
+      this.showExitDialog = false;
+      this.changeFocus(this.preFocusName);
+      switch (msg) {
+        case "ok":
+          jJsvRuntimeBridge.closePage();
+          // if (!window.JsView) {
+          //   // 浏览器调试
+          //   window.location.href = "about:blank";
+          // }
+          break;
+        case "back":
+        case "cancel":
+          break;
+      }
+    },
+  },
+  created() {
+    if (typeof localStorage.curTab !== "undefined") {
+      this.tabId = parseInt(localStorage.curTab);
+    }
+    localStorage.curTab = 0;
+    this.contentData = dataList[this.tabId];
+  },
+  mounted() {},
+  beforeUnmount() {},
+};
+</script>
+
+<template>
+  <div class="rootSize">
+    <div class="address">
+      {{ address }}
+    </div>
+    <div class="logo">JsView-Vue3(Vite3)</div>
+
+    <jsv-focus-block
+      autoFocus
+      ref="rootNode"
+      :onAction="{
+        onKeyDown: onKeyDown,
+        onFocus: onFocus,
+      }"
+    >
+      <div :style="{ left: 10 }">
+        <tab-frame
+          :name="name + '/tabFrame'"
+          :onEdge="onTabEdge"
+          :itemFocus="tabItemFocus"
+          :initId="tabId"
+        />
+      </div>
+
+      <div
+        :style="{
+          left: 10,
+          top: 100,
+        }"
+      >
+        <body-frame
+          :data="contentData"
+          :name="name + '/bodyFrame'"
+          :onEdge="onContentEdge"
+          :tabId="tabId"
+        />
+      </div>
+
+      <Dialog
+        v-if="showExitDialog"
+        :name="name + '/exitDialog'"
+        :onAction="onDialogAction"
+      ></Dialog>
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped>
+.rootSize {
+  width: 1280;
+  height: 720;
+  background-color: #334c4c;
+}
+
+.address {
+  width: 1280;
+  height: 30;
+  color: #ffffff;
+  font-size: 20px;
+}
+
+.logo {
+  width: 1280;
+  height: 30;
+  color: #00ff00;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: right;
+}
+</style>

package/FilterDemo/AnimatePic.vue

@@ -0,0 +1,58 @@
+<script setup>
+const item_url =
+  "http://oss.image.51vtv.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
+</script>
+
+<template>
+  <div
+    className="blockStyle"
+    :style="{
+      backgroundColor: '#0000FF',
+      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+    }"
+  />
+  <img
+    className="blockStyle"
+    :style="{
+      objectFit: 'contain',
+      animation: 'opacityDemo_CompositeOpacity 3s infinite',
+    }"
+    :src="item_url"
+  />
+</template>
+
+<style scoped>
+.blockStyle {
+  top: 50;
+  left: 50;
+  width: 150;
+  height: 150;
+}
+
+.picTitleTextClass {
+  font-size: 25;
+  height: 68;
+  line-height: 34;
+  color: "#000000";
+  text-align: "center";
+}
+
+@keyframes opacityDemo_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+}
+</style>