@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/DemoHomepage/views/Homepage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, shallowRef, onActivated } from "vue";
+import { computed, shallowRef, onActivated, onDeactivated } from "vue";
 import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
 import { useRouter } from "vue-router";
 import TabFrame from "../components/TabFrame.vue";
@@ -119,10 +119,21 @@ let onDialogAction = (msg) => {
   }
 };
 
+// focusHub.enableFocusTrace(true);
+
 // keep-alive后 router 返回本页面时要激活一下focus
+let focusNameOfDeactive = null;
 onActivated(() => {
-  onFocus();
+  if (focusNameOfDeactive) {
+    focusHub.setFocus(focusNameOfDeactive);
+    focusNameOfDeactive = null;
+  }
 });
+
+onDeactivated(() => {
+  focusNameOfDeactive = focusHub.getDeactivedPageFocus();
+});
+
 </script>
 
 <template>

package/DynamicClass/App.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="direction">
+    {{
+      "操作指南：按 [1] 切换json文件，按 [2] 删除第二个背景色class。可通过方向键移动。 当前json: " +
+      styleText
+    }}
+  </div>
+  <div class="myEffect">{{ "当前效果: " + effectText + " " + deletText }}</div>
+  <FloorList name="FloorList" :focusHub="focusHub" :changeStyle="changeStyle" :getStyleClass="getStyleClass"
+    :deleteStyleClass="deleteStyleClass" :changeDeletText="changeDeletText" :changeCount="changeCount" :key="count">
+  </FloorList>
+</template>
+
+<script setup>
+import { shallowRef, provide, reactive, onBeforeUnmount } from "vue";
+import { useFocusHub, JsvStyleSheetsDeclarer } from "jsview";
+import FloorList from "./components/FloorList.vue";
+import style1 from "./style1.json";
+import style2 from "./style2.json";
+
+let style = shallowRef(style1);
+let styleText = shallowRef("style1.json");
+let deletText = shallowRef("未删除第二个class背景色");
+let effectArray = [
+  "整体字体更大，标题颜色变化，聚焦颜色：土黄色以及绿色。",
+  "整体文字变小，标题颜色变化，聚焦颜色：粉色以及荧光绿色。",
+];
+let sureDelete = shallowRef(false)
+provide('sureDelete', sureDelete)
+let effectText = shallowRef(effectArray[0]);
+const focusHub = useFocusHub();
+let count = shallowRef(0)
+const changeCount = () => {
+  count.value += 1;
+};
+
+const changeStyle = () => {
+  style.value = style.value == style1 ? style2 : style1;
+  styleText.value = style.value == style1 ? "style1.json" : "style2.json";
+  effectText.value = style.value == style1 ? effectArray[0] : effectArray[1];
+};
+const changeDeletText = () => {
+  console.log('sureDelete.value', sureDelete.value);
+  if (sureDelete.value == true) {
+    deletText.value = "已删除第二个class背景色";
+  } else {
+    deletText.value = "未删除第二个class背景色";
+  }
+};
+const getStyleClass = () => {
+  for (let className in style.value) {
+    const styleProperties = style.value[className];
+    JsvStyleSheetsDeclarer.DeclareClass(className, styleProperties);
+  }
+};
+getStyleClass();
+
+const deleteStyleClass = () => {
+  for (let className in style.value) {
+    JsvStyleSheetsDeclarer.UndeclareClass(`${className}`);
+  }
+};
+
+let data1 = reactive([]);
+let data2 = reactive([]);
+let data3 = reactive([]);
+const dataShow = (dataNum, data, length) => {
+  dataNum.splice(0, dataNum.length);
+  for (let i = 0; i < length; i++) {
+    const item = {
+      index: i,
+      ...data,
+      title: `我是标题${i}`,
+      text: `我是跑马灯简介我是跑马灯简介我是跑马灯简介${i}`,
+    };
+    dataNum.push(item);
+  }
+};
+dataShow(data1, style.value.floor1Metro.data, 5);
+dataShow(data2, style.value.floor2Metro.data, 2);
+dataShow(data3, style.value.floor3Metro.data, 8);
+
+provide("data1", data1);
+provide("data2", data2);
+provide("data3", data3);
+provide("style", style);
+focusHub.enableFocusTrace(true)
+onBeforeUnmount(() => {
+  deleteStyleClass();
+});
+</script>
+
+<style lang="scss" scoped>
+.direction {
+  top: 10;
+  left: 0;
+  width: 1280;
+  height: 36;
+  font-size: 26;
+  line-height: 36;
+  z-index: 999;
+  color: #0000ff;
+}
+
+.myEffect {
+  top: 50;
+  left: 0;
+  width: 1280;
+  height: 30;
+  line-height: 30;
+  font-size: 26;
+  z-index: 999;
+  color: #ff0000;
+}
+</style>

package/DynamicClass/components/FloorItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :class="[changePoster,changeBg,changeSize]">
+    <!-- 主标题 -->
+    <div :class="changeTitle">
+      {{ props.data.title }}
+    </div>
+    <!-- 简介 -->
+    <JsvMarquee
+    :style="props.data.marqueeData"
+    :text="props.data.text"
+    :slideSpeed="100"
+    :forceSlide="true"
+    />
+    </div>
+</template>
+
+<script setup>
+import { shallowRef,onMounted } from "vue";
+import { JsvMarquee,useFocusHub} from "jsview"
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  getStyleClass: Function,
+  num: Number,
+});
+const focusHub = useFocusHub();
+let changeBg = shallowRef('')
+let changeSize=shallowRef('')
+let changePoster = shallowRef('')
+let changeTitle =shallowRef('')
+
+
+changePoster.value = `poster${props.num}`
+changeTitle.value = `title${props.num}`
+const onFocus = () => {
+  changeBg.value =`focusBg${props.num}`
+  changeSize.value='grow'
+};
+
+const onBlur = () => {
+  changeBg.value =`blurBg1${props.num}` 
+  changeSize.value = ""
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onEdge", props.onEdge);
+onMounted(()=>{
+  focusHub.setFocus('floor1')
+})
+</script>
+
+<style lang="scss" scoped></style>

package/DynamicClass/components/FloorList.vue

@@ -0,0 +1,210 @@
+<template>
+  <jsv-focus-block autoFocus :onAction="actionDefines">
+    <div :class="[bg, bg1]">
+      <metro-widget
+        name="floor"
+        :width="style.bg.width"
+        :height="style.bg.height"
+        :data="data"
+        :direction="VERTICAL"
+        :measures="measures"
+        :onEdge="onEdge1"
+        :sendFocusRectEvent="true"
+        :slideSetting="slideSetting"
+        :on-focus="onFocus"
+        layout-type="absolute"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <!-- 楼层1 -->
+          <div :class="floor1Bg">
+            <metro-widget
+              name="floor1"
+              :width="style.floor1Metro.width"
+              :height="style.floor1Metro.height + 20"
+              :data="data1"
+              :direction="HORIZONTAL"
+              :measures="measures"
+              :onEdge="onEdge1"
+              :padding="style.floor1Metro.padding"
+              :sendFocusRectEvent="true"
+            >
+              <template #renderItem="{ data, query, onEdge, onAction }">
+                <FloorItem
+                  :data="data"
+                  :query="query"
+                  :onEdge="onEdge"
+                  :onAction="onAction"
+                  :num="1"
+                />
+              </template>
+            </metro-widget>
+          </div>
+          <!-- 楼层2 -->
+          <div :class="floor2Bg">
+            <metro-widget
+              name="floor2"
+              :width="style.floor2Metro.width"
+              :height="style.floor2Metro.height + 20"
+              :data="data2"
+              :direction="HORIZONTAL"
+              :measures="measures"
+              :onEdge="onEdge2"
+              :padding="style.floor2Metro.padding"
+              :sendFocusRectEvent="true"
+            >
+              <template #renderItem="{ data, query, onEdge, onAction }">
+                <FloorItem
+                  :data="data"
+                  :query="query"
+                  :onEdge="onEdge"
+                  :onAction="onAction"
+                  :num="2"
+                />
+              </template>
+            </metro-widget>
+          </div>
+          <!-- 楼层3 -->
+          <div :class="floor3Bg">
+            <metro-widget
+              name="floor3"
+              :width="style.floor3Metro.width"
+              :height="style.floor3Metro.height + 20"
+              :data="data3"
+              :direction="HORIZONTAL"
+              :measures="measures1"
+              :onEdge="onEdge3"
+              :padding="style.floor3Metro.padding"
+              :sendFocusRectEvent="true"
+            >
+              <template #renderItem="{ data, query, onEdge, onAction }">
+                <FloorItem
+                  :data="data"
+                  :query="query"
+                  :onEdge="onEdge"
+                  :onAction="onAction"
+                  :num="3"
+                />
+              </template>
+            </metro-widget>
+          </div>
+        </template>
+      </metro-widget>
+    </div>
+  </jsv-focus-block>
+</template>
+<script setup>
+/* eslint-disable */
+import {
+  MetroWidget,
+  VERTICAL,
+  HORIZONTAL,
+  EdgeDirection,
+  METRO_WIDGET_CONST,
+  SeamlessSlide,
+} from "jsview";
+import {
+  onMounted,
+  ref,
+  inject,
+} from "vue";
+import FloorItem from "./FloorItem.vue";
+
+const props = defineProps({
+  changeCount: Function,
+  focusHub: Object,
+  changeStyle: Function,
+  getStyleClass: Function,
+  deleteStyleClass: Function,
+  changeDeletText: Function,
+});
+const slideSetting = new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });
+
+let bg = ref("");
+let bg1 = ref("");
+let floor1Bg = ref("");
+let floor2Bg = ref("");
+let floor3Bg = ref("");
+let style = inject("style");
+let sureDelete = inject("sureDelete");
+const data = [
+  {
+    width: 1280,
+    height: 1350,
+    top: 0,
+    left: 0,
+  },
+];
+let data1 = inject("data1");
+let data2 = inject("data2");
+let data3 = inject("data3");
+
+const measures = (item) => {
+  return {
+    ...item,
+    focusable: true,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+const measures1 = (item) => {
+  return {
+    ...item,
+    focusable: true,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
+  };
+};
+
+const onEdge1 = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    props.focusHub.setFocus("floor2");
+  }
+};
+const onEdge2 = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    props.focusHub.setFocus("floor3");
+  } else if (edgeInfo.direction == EdgeDirection.top) {
+    props.focusHub.setFocus("floor1");
+  }
+};
+
+const onEdge3 = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    props.focusHub.setFocus("floor2");
+  }
+};
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 49:
+      sureDelete.value = false;
+      props.changeDeletText();
+      props.changeStyle();
+      props.getStyleClass();
+      props.changeCount();
+      break;
+    case 50:
+      bg1.value = "";
+      sureDelete.value = true;
+      props.changeDeletText();
+      break;
+    default:
+      break;
+  }
+};
+const actionDefines = {
+  onKeyDown,
+};
+const onFocus = () => {
+  props.focusHub.setFocus("floor1");
+};
+
+bg.value = "bg";
+floor1Bg.value = "floor1-bg";
+floor2Bg.value = "floor2-bg";
+floor3Bg.value = "floor3-bg";
+bg1.value = "bg1";
+
+onMounted(() => {
+  props.focusHub.setFocus("floor1");
+});
+</script>
+<style></style>

package/DynamicClass/style1.json

@@ -0,0 +1,163 @@
+{
+  "bg": {
+    "width": 1280,
+    "height": 720,
+    "top": 0,
+    "left": 0,
+    "backgroundColor": "#000000"
+  },
+  "bg1": {
+    "width": 1280,
+    "height": 720,
+    "top": 0,
+    "left": 0,
+    "backgroundColor": "#FFFFAA"
+  },
+  "floor1-bg": {
+    "width": 1280,
+    "height": 300,
+    "top": 100,
+    "left": 0,
+    "fontSize": 28,
+    "lineHeight": 30,
+    "color": "#FF2312"
+  },
+  "floor1Metro": {
+    "width": 1280,
+    "height": 300,
+    "top": 0,
+    "left": 0,
+    "padding": { "left": 28 },
+    "data": {
+      "width": 200,
+      "height": 300,
+      "marginRight": 56,
+      "marqueeData": {
+        "width": 200,
+        "height": 30,
+        "fontSize": 22,
+        "lineHeight": 30,
+        "direction": "ltr",
+        "top": 270
+      }
+    }
+  },
+  "poster1": {
+    "width": 200,
+    "height": 300,
+    "backgroundColor": "#BBBBAA",
+    "textAlign": "center"
+  },
+  "title1": {
+    "width": 200,
+    "height": 30,
+    "left": 0,
+    "top": 240,
+    "backgroundColor": "#FFFFFF"
+  },
+  "focusBg1": {
+    "backgroundColor": "#DD8800"
+  },
+  "blurBg1": {
+    "backgroundColor": "#BBBBAA"
+  },
+  "floor2-bg": {
+    "width": 1280,
+    "height": 400,
+    "top": 500,
+    "left": 0,
+    "fontSize": 48,
+    "lineHeight": 50,
+    "color": "#FFFFFF"
+  },
+  "floor2Metro": {
+    "width": 1280,
+    "height": 400,
+    "top": 0,
+    "left": 0,
+    "padding": { "left": 0 },
+    "data": {
+      "width": 620,
+      "height": 400,
+      "marginRight": 40,
+      "marqueeData": {
+        "width": 620,
+        "height": 40,
+        "fontSize": 38,
+        "lineHeight": 40,
+        "direction": "ltr",
+        "top": 360
+      }
+    }
+  },
+  "poster2": {
+    "width": 620,
+    "height": 400,
+    "backgroundColor": "#BBAAAA",
+    "textAlign": "center"
+  },
+  "title2": {
+    "width": 620,
+    "height": 50,
+    "left": 0,
+    "top": 310,
+    "backgroundColor": "#FFF221"
+  },
+  "focusBg2": {
+    "backgroundColor": "#00FF00"
+  },
+  "blurBg2": {
+    "backgroundColor": "#BBAAAA"
+  },
+  "floor3-bg": {
+    "width": 1280,
+    "height": 300,
+    "top": 980,
+    "left": 0,
+    "fontSize": 28,
+    "lineHeight": 30,
+    "color": "#FDD312"
+  },
+  "floor3Metro": {
+    "width": 1280,
+    "height": 300,
+    "top": 0,
+    "left": 0,
+    "padding": { "left": 5 },
+    "data": {
+      "width": 150,
+      "height": 300,
+      "marginRight": 30,
+      "marqueeData": {
+        "width": 150,
+        "height": 30,
+        "fontSize": 22,
+        "lineHeight": 30,
+        "direction": "ltr",
+        "top": 270
+      }
+    }
+  },
+  "poster3": {
+    "width": 150,
+    "height": 300,
+    "backgroundColor": "#BBBBBB",
+    "textAlign": "center"
+  },
+  "title3": {
+    "width": 150,
+    "height": 30,
+    "left": 0,
+    "top": 240,
+    "backgroundColor": "#FFFFFF"
+  },
+  "focusBg3": {
+    "backgroundColor": "#DD8800"
+  },
+  "blurBg3": {
+    "backgroundColor": "#BBBBBB"
+  },
+  "grow": {
+    "transform": "scale3d(1,1.1,1)"
+  }
+}