@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/LongText/App.vue

@@ -1,111 +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>
-
-
+<!--
+ * 【界面概述】
+ * 协议书的示例
+ *
+ * 【控件介绍】
+ * 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

@@ -1,153 +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>
+<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>