@shijiu/jsview-vue 0.0.1-beta.0

package/samples/LongImage/Button.vue

@@ -0,0 +1,153 @@
+<script lang="ts">
+import { Vue } from "vue-class-component";
+export default class Button extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+  private onKeyDown?: Function = undefined;
+  private leftRef: any = null;
+  private rightRef: any = null;
+  private focusId: Number = 0; // 0：button未获得焦点/焦点移出。 1：button获取焦点切焦点在按钮1上。 2：button获取焦点切焦点在按钮2上。
+  private focusName: String = "";
+
+  onleftRef(ref: any) {
+    this.leftRef = ref;
+  }
+
+  onRightRef(ref: any) {
+    this.rightRef = ref;
+  }
+
+  private getLeftActionCallback() {
+    const onAction = {
+      // onKeyDown: this.onKeyDown,
+      onKeyDown: (ev: any) => {
+        let keyUsed = true;
+        switch (ev.keyCode) {
+          case 37:
+            this.focusName = "btn_left";
+            break;
+          case 38:
+            this.focusName = "LongImageScroll";
+            break;
+          case 39:
+            this.focusName = "btn_right";
+            break;
+          default:
+            keyUsed = false;
+        }
+        if (keyUsed) {
+          console.log("Button requestFocusName = ", this.focusName);
+          this.leftRef.findBlockByName(this.focusName).requestFocus();
+        }
+        return keyUsed;
+      },
+      onFocus: () => {
+        console.log("btn_left getFocus");
+        this.focusId = 1;
+      },
+      onBlur: () => {
+        console.log("btn_left loseFocus");
+        this.focusId = 0;
+      },
+    };
+    return onAction;
+  }
+
+  private getRightActionCallback() {
+    const onAction = {
+      // onKeyDown: this.onKeyDown,
+      onKeyDown: (ev: any) => {
+        let keyUsed = true;
+        switch (ev.keyCode) {
+          case 37:
+            this.focusName = "btn_left";
+            break;
+          case 38:
+            this.focusName = "LongImageScroll";
+            break;
+          case 39:
+            this.focusName = "btn_right";
+            break;
+          default:
+            keyUsed = false;
+        }
+        if (keyUsed) {
+          this.leftRef.findBlockByName(this.focusName).requestFocus();
+        }
+        return keyUsed;
+      },
+      onFocus: () => {
+        console.log("btn_left getFocus");
+        this.focusId = 2;
+      },
+      onBlur: () => {
+        console.log("btn_left loseFocus");
+        this.focusId = 0;
+      },
+    };
+    return onAction;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <jsv-focus-block
+      :ref="onleftRef"
+      namespace="btn_left"
+      :onAction="getLeftActionCallback()"
+    >
+      <div
+        :style="{
+          width: 130,
+          height: 60,
+          left: -25,
+          top: -5,
+          backgroundColor: this.focusId === 1 ? '#DD0000' : '#FFFFFF',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 120,
+          height: 50,
+          left: -20,
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '50px',
+          backgroundColor: '#EEEEEE',
+        }"
+      >
+        按钮1
+      </div>
+    </jsv-focus-block>
+    <jsv-focus-block
+      :ref="onRightRef"
+      namespace="btn_right"
+      :onAction="getRightActionCallback()"
+    >
+      <div
+        :style="{
+          width: 130,
+          height: 60,
+          left: 125,
+          top: -5,
+          backgroundColor: this.focusId === 2 ? '#DD0000' : '#FFFFFF',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 120,
+          height: 50,
+          left: 130,
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '50px',
+          backgroundColor: '#EEEEEE',
+        }"
+      >
+        按钮2
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>

package/samples/LongImage/LongImageScroll.vue

@@ -0,0 +1,127 @@
+<script lang="ts">
+import Scroll from "./Scroll.vue";
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {
+    Scroll,
+  },
+  props: {
+    step: Number,
+    style: Object,
+    scrollStyle: Object,
+    scrollBlockStyle: Object,
+    imageSrc: String,
+  },
+})
+export default class LongImageScroll extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+
+  onMainRef(ref: any) {
+    this.rootRef = ref;
+  }
+
+  private getActionCallback() {
+    const onAction = {
+      onKeyDown: (ev: any) => {
+        const valid =
+          this.element &&
+          this.element.clientHeight &&
+          this.element.clientHeight > this.style.height;
+        // let keyUsed = true;
+        if (valid) {
+          let text_y;
+          switch (ev.keyCode) {
+            case 38:
+              if (this.textY !== 0) {
+                text_y =
+                  this.textY + this.step >= 0 ? 0 : this.textY + this.step;
+                (this.textY = text_y),
+                  (this.scrollY =
+                    (-text_y /
+                      (this.element.clientHeight - this.style.height)) *
+                    (this.scrollStyle.height - this.scrollBlockStyle.height));
+              }
+              break;
+            case 40:
+              if (
+                this.textY !==
+                this.style.height - this.element.clientHeight
+              ) {
+                text_y =
+                  this.textY - this.step <=
+                  this.style.height - this.element.clientHeight
+                    ? this.style.height - this.element.clientHeight
+                    : this.textY - this.step;
+                (this.textY = text_y),
+                  (this.scrollY =
+                    (-text_y /
+                      (this.element.clientHeight - this.style.height)) *
+                    (this.scrollStyle.height - this.scrollBlockStyle.height));
+              } else {
+                this.rootRef.findBlockByName("btn_left").requestFocus();
+              }
+              break;
+          }
+        }
+      },
+      onFocus: () => {
+        console.log("LongImageScroll getFocus");
+      },
+      onBlur: () => {
+        console.log("LongImageScroll loseFocus");
+      },
+    };
+    return onAction;
+  }
+
+  OnLoad = () => {
+    // 图片加载完成的回调
+    console.log("Image loaded!");
+  };
+
+  private element: any = null;
+  private scrollY: Number = 0;
+  private textY: any = 0;
+  private rootRef: any = null;
+  private step: any = 0;
+  private style: any = null;
+  private scrollStyle: any = null;
+  private scrollBlockStyle: any = null;
+  private imageSrc: any = null;
+
+  mounted() {
+    this.rootRef.requestFocus();
+  }
+}
+</script>
+
+
+<template>
+  <jsv-focus-block
+    :ref="onMainRef"
+    namespace="LongImageScroll"
+    :onAction="getActionCallback()"
+  >
+    <div :style="{ overflow: 'hidden', ...style }">
+      <img
+        :alt="{}"
+        :ref="
+          (ele) => {
+            this.element = ele;
+          }
+        "
+        :src="imageSrc"
+        :style="{ top: this.textY, width: style.width }"
+        :onLoad="OnLoad"
+      />
+    </div>
+    <Scroll
+      :top="this.scrollY"
+      :scrollStyle="scrollStyle"
+      :scrollBlockStyle="scrollBlockStyle"
+    />
+  </jsv-focus-block>
+</template>

package/samples/LongImage/Scroll.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+  props: {
+    scrollStyle: Object,
+    top: Number,
+    scrollBlockStyle: Object,
+  },
+};
+</script>
+<template>
+  <div :style="{ ...scrollStyle }">
+    <div :style="{ top: top }">
+      <div :style="{ ...scrollBlockStyle }" />
+    </div>
+  </div>
+</template>

package/samples/LongText/App.vue

@@ -0,0 +1,111 @@
+<!--
+ * 【界面概述】
+ * 协议书的示例
+ *
+ * 【控件介绍】
+ * SimpleWidget：见simpleMetrowidget
+ *
+ * 【技巧说明】
+ * Q: 如何长文字div的高度自适应？
+ * A: 描画长文字的div的高度不设置即可
+ *    并通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 长段文字如何换行？
+ * A: 若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
+ *          <div>{"第一行
+ *          第二行"}</div>
+ *          =======需要改成=======
+ *          <div>{"第一行\n\
+ *          第二行"}</div>
+ *
+ * Q: 文字首行缩进如何做？
+ * A: 目前系统只支持通过空格进行首行缩进，行首加入期望的空格数量即可达到缩进，因为盒子字体库和PC不尽相同，
+ *    所以务必在盒子上实际测试缩进效果。
+ -->
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import LongTextScroll from "./LongTextScroll.vue";
+import Button from "./Button.vue";
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+
+interface KeyEvent {
+  keyCode: Number;
+}
+
+@Options({
+  components: {
+    LongTextScroll,
+    Button,
+  },
+})
+class App extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+
+  onKeyDown(ev: KeyEvent): Boolean {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    }
+    return true;
+  }
+
+  mounted() {
+    // 调试接口，对接JSCenter平台去掉启动图的处理
+    jJsvRuntimeBridge.notifyPageLoaded();
+  }
+}
+export default App;
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div>
+      <div
+        :style="{
+          textAlign: 'center',
+          fontSize: '30px',
+          lineHeight: '50px',
+          color: '#ffffff',
+          left: 140,
+          top: 20,
+          width: 1000,
+          height: 50,
+          backgroundColor: 'rgba(27,38,151,0.8)',
+        }"
+      >
+        可展示篇幅超过一屏的文字
+      </div>
+      <div :style="{ left: 140, top: 100 }">
+        <LongTextScroll
+          :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+          :textStyle="{ color: '#000000', fontSize: 20 }"
+          :scrollBlockStyle="{
+            width: 10,
+            height: 30,
+            backgroundColor: '#555555',
+          }"
+          :scrollStyle="{
+            left: 1005,
+            width: 10,
+            height: 500,
+            backgroundColor: '#DDDDDD',
+          }"
+          :step="20"
+        >
+        </LongTextScroll>
+        <div :style="{ left: 400, top: 550 }">
+          <Button />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+

package/samples/LongText/Button.vue

@@ -0,0 +1,153 @@
+<script lang="ts">
+import { Vue } from "vue-class-component";
+export default class Button extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+  private onKeyDown?: Function = undefined;
+  private leftRef: any = null;
+  private rightRef: any = null;
+  private focusId: Number = 0; // 0：button未获得焦点/焦点移出。 1：button获取焦点切焦点在按钮1上。 2：button获取焦点切焦点在按钮2上。
+  private focusName: String = "";
+
+  onleftRef(ref: any) {
+    this.leftRef = ref;
+  }
+
+  onRightRef(ref: any) {
+    this.rightRef = ref;
+  }
+
+  private getLeftActionCallback() {
+    const onAction = {
+      // onKeyDown: this.onKeyDown,
+      onKeyDown: (ev: any) => {
+        let keyUsed = true;
+        switch (ev.keyCode) {
+          case 37:
+            this.focusName = "btn_left";
+            break;
+          case 38:
+            this.focusName = "LongTextScroll";
+            break;
+          case 39:
+            this.focusName = "btn_right";
+            break;
+          default:
+            keyUsed = false;
+        }
+        if (keyUsed) {
+          console.log("Button requestFocusName = ", this.focusName);
+          this.leftRef.findBlockByName(this.focusName).requestFocus();
+        }
+        return keyUsed;
+      },
+      onFocus: () => {
+        console.log("btn_left getFocus");
+        this.focusId = 1;
+      },
+      onBlur: () => {
+        console.log("btn_left loseFocus");
+        this.focusId = 0;
+      },
+    };
+    return onAction;
+  }
+
+  private getRightActionCallback() {
+    const onAction = {
+      // onKeyDown: this.onKeyDown,
+      onKeyDown: (ev: any) => {
+        let keyUsed = true;
+        switch (ev.keyCode) {
+          case 37:
+            this.focusName = "btn_left";
+            break;
+          case 38:
+            this.focusName = "LongTextScroll";
+            break;
+          case 39:
+            this.focusName = "btn_right";
+            break;
+          default:
+            keyUsed = false;
+        }
+        if (keyUsed) {
+          this.leftRef.findBlockByName(this.focusName).requestFocus();
+        }
+        return keyUsed;
+      },
+      onFocus: () => {
+        console.log("btn_left getFocus");
+        this.focusId = 2;
+      },
+      onBlur: () => {
+        console.log("btn_left loseFocus");
+        this.focusId = 0;
+      },
+    };
+    return onAction;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <jsv-focus-block
+      :ref="onleftRef"
+      namespace="btn_left"
+      :onAction="getLeftActionCallback()"
+    >
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          left: -10,
+          top: -5,
+          backgroundColor: this.focusId === 1 ? '#DD0000' : '#FFFFFF',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 90,
+          height: 50,
+          left: -5,
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '50px',
+          backgroundColor: '#EEEEEE',
+        }"
+      >
+        同意
+      </div>
+    </jsv-focus-block>
+    <jsv-focus-block
+      :ref="onRightRef"
+      namespace="btn_right"
+      :onAction="getRightActionCallback()"
+    >
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          left: 110,
+          top: -5,
+          backgroundColor: this.focusId === 2 ? '#DD0000' : '#FFFFFF',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 90,
+          height: 50,
+          left: 115,
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '50px',
+          backgroundColor: '#EEEEEE',
+        }"
+      >
+        取消
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>