@shijiu/jsview-vue 0.9.254 → 0.9.267

package/samples/HashHistory/views/BasePage.vue

@@ -1,19 +1,19 @@
-<script lang="ts">
-import { Vue } from "vue-class-component";
-
-export default class BasePage extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-
-  mounted() {
-    // this.$emit('requestFocus', this.branchName);
-  }
-
-  onBack() {
-    this.$router?.go(-1); // 有router时，回退
-  }
-
-  protected branchName?: string;
-}
+<script lang="ts">
+import { Vue } from "vue-class-component";
+
+export default class BasePage extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+
+  mounted() {
+    // this.$emit('requestFocus', this.branchName);
+  }
+
+  onBack() {
+    this.$router?.go(-1); // 有router时，回退
+  }
+
+  protected branchName?: string;
+}
 </script>

package/samples/HashHistory/views/MainPage.vue

@@ -1,68 +1,68 @@
-<script lang="ts">
-import { Options } from "vue-class-component";
-import HorizontalButtonList from "../components/HorizontalButtonList.vue";
-import BasePage from "./BasePage.vue"
-
-@Options({
-  components: {
-    HorizontalButtonList
-  }
-})
-export default class MainPage extends BasePage {
-  constructor(props: any) {
-    super(props);
-
-    this.branchName = "./MainPage.ButtonList"
-  }
-
-  private getButtonListConfig() {
-    const buttonListConfig = [{
-      name: "启动子界面-First",
-      route: {
-        path: "SubPageFirst",
-        query: { from: 'main' },
-      }
-    }, {
-      name: "启动子界面-Second",
-      route: {
-        path: "SubPageSecond",
-        query: { from: 'main' },
-      }
-    }];
-
-    return buttonListConfig;
-  }
-
-  private onButtonClick(idx: number) {
-    const buttonListConfig = this.getButtonListConfig();
-    const config = buttonListConfig[idx];
-    console.log("Jump page to: " + config.name)
-    this.$router.push(config.route);
-  }
-}
-</script>
-
-<template>
-<div>
-  <div class="title">
-      这是主界面
-  </div>
-  <HorizontalButtonList
-      :style="{top: 330}"
-      :buttonConfig="getButtonListConfig()"
-      :onButtonClick="onButtonClick"
-      :onBack="onBack"
-  />
-</div>
-</template>
-
-<style scoped>
-.title {
-  top: 100;
-  width: 1280;
-  height: 100;
-  line-height: 100px;
-  text-align: center;
-  font-size: 55;
-}
+<script lang="ts">
+import { Options } from "vue-class-component";
+import HorizontalButtonList from "../components/HorizontalButtonList.vue";
+import BasePage from "./BasePage.vue"
+
+@Options({
+  components: {
+    HorizontalButtonList
+  }
+})
+export default class MainPage extends BasePage {
+  constructor(props: any) {
+    super(props);
+
+    this.branchName = "./MainPage.ButtonList"
+  }
+
+  private getButtonListConfig() {
+    const buttonListConfig = [{
+      name: "启动子界面-First",
+      route: {
+        path: "SubPageFirst",
+        query: { from: 'main' },
+      }
+    }, {
+      name: "启动子界面-Second",
+      route: {
+        path: "SubPageSecond",
+        query: { from: 'main' },
+      }
+    }];
+
+    return buttonListConfig;
+  }
+
+  private onButtonClick(idx: number) {
+    const buttonListConfig = this.getButtonListConfig();
+    const config = buttonListConfig[idx];
+    console.log("Jump page to: " + config.name)
+    this.$router.push(config.route);
+  }
+}
+</script>
+
+<template>
+<div>
+  <div class="title">
+      这是主界面
+  </div>
+  <HorizontalButtonList
+      :style="{top: 330}"
+      :buttonConfig="getButtonListConfig()"
+      :onButtonClick="onButtonClick"
+      :onBack="onBack"
+  />
+</div>
+</template>
+
+<style scoped>
+.title {
+  top: 100;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 55;
+}
 </style>

package/samples/HashHistory/views/SubPage.vue

@@ -1,79 +1,79 @@
-<script lang="ts">
-import { Options } from "vue-class-component";
-import HorizontalButtonList from "../components/HorizontalButtonList.vue";
-import BasePage from "./BasePage.vue"
-
-@Options({
-  components: {
-    HorizontalButtonList
-  }
-})
-export default class SubPage extends BasePage {
-  constructor(props: any, name: string, jumpTo: string) {
-    super(props);
-
-    this.name = name;
-    this.jumpTo = jumpTo;
-    this.branchName = "./ButtonList/SubPage" + this.name;
-  }
-
-  private getButtonListConfig() {
-    const buttonListConfig = [{
-      name: "跳转子界面-" + this.jumpTo,
-      route: {
-        path: "SubPage" + this.jumpTo,
-        query: { from: 'sub' + this.name },
-      }
-    }];
-
-    return buttonListConfig;
-  }
-
-  private onButtonClick(idx: number) {
-    const buttonListConfig = this.getButtonListConfig();
-    const config = buttonListConfig[idx];
-    console.log("Jump page to: " + config.name)
-    this.$router.push(config.route);
-  }
-
-  private readonly name: string;
-  private readonly jumpTo: string;
-}
-</script>
-
-<template>
-<div>
-  <div class="title">
-    这是子界面{{name}}
-  </div>
-  <HorizontalButtonList
-      :style="{top: 230}"
-      :buttonConfig="getButtonListConfig()"
-      :onButtonClick="onButtonClick"
-      :onBack="onBack"
-  />
-  <div class="tip">
-    按返回键返回前一页
-  </div>
-</div>
-</template>
-
-<style scoped>
-.title {
-  top: 100;
-  width: 1280;
-  height: 100;
-  line-height: 100px;
-  text-align: center;
-  font-size: 55;
-}
-
-.tip {
-  top: 330;
-  width: 1280;
-  height: 100;
-  line-height: 100px;
-  text-align: center;
-  font-size: 30;
-}
+<script lang="ts">
+import { Options } from "vue-class-component";
+import HorizontalButtonList from "../components/HorizontalButtonList.vue";
+import BasePage from "./BasePage.vue"
+
+@Options({
+  components: {
+    HorizontalButtonList
+  }
+})
+export default class SubPage extends BasePage {
+  constructor(props: any, name: string, jumpTo: string) {
+    super(props);
+
+    this.name = name;
+    this.jumpTo = jumpTo;
+    this.branchName = "./ButtonList/SubPage" + this.name;
+  }
+
+  private getButtonListConfig() {
+    const buttonListConfig = [{
+      name: "跳转子界面-" + this.jumpTo,
+      route: {
+        path: "SubPage" + this.jumpTo,
+        query: { from: 'sub' + this.name },
+      }
+    }];
+
+    return buttonListConfig;
+  }
+
+  private onButtonClick(idx: number) {
+    const buttonListConfig = this.getButtonListConfig();
+    const config = buttonListConfig[idx];
+    console.log("Jump page to: " + config.name)
+    this.$router.push(config.route);
+  }
+
+  private readonly name: string;
+  private readonly jumpTo: string;
+}
+</script>
+
+<template>
+<div>
+  <div class="title">
+    这是子界面{{name}}
+  </div>
+  <HorizontalButtonList
+      :style="{top: 230}"
+      :buttonConfig="getButtonListConfig()"
+      :onButtonClick="onButtonClick"
+      :onBack="onBack"
+  />
+  <div class="tip">
+    按返回键返回前一页
+  </div>
+</div>
+</template>
+
+<style scoped>
+.title {
+  top: 100;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 55;
+}
+
+.tip {
+  top: 330;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 30;
+}
 </style>

package/samples/HashHistory/views/SubPageFirst.vue

@@ -1,10 +1,10 @@
-<script lang="ts">
-import SubPage from "./SubPage.vue";
-
-export default class SubPageFirst extends SubPage {
-  constructor(props: any) {
-    super(props, 'First', 'Second');
-  }
-}
-
+<script lang="ts">
+import SubPage from "./SubPage.vue";
+
+export default class SubPageFirst extends SubPage {
+  constructor(props: any) {
+    super(props, 'First', 'Second');
+  }
+}
+
 </script>

package/samples/HashHistory/views/SubPageSecond.vue

@@ -1,10 +1,10 @@
-<script lang="ts">
-import SubPage from "./SubPage.vue";
-
-export default class SubPageSecond extends SubPage {
-  constructor(props: any) {
-    super(props, 'Second', 'First');
-  }
-}
-
+<script lang="ts">
+import SubPage from "./SubPage.vue";
+
+export default class SubPageSecond extends SubPage {
+  constructor(props: any) {
+    super(props, 'Second', 'First');
+  }
+}
+
 </script>

package/samples/LongImage/App.vue

@@ -1,96 +1,96 @@
-<!--
- *
- * 【界面概述】
- * 带下拉条的长图片展示样例
- *
- * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
- *
- * 【技巧说明】
- * Q: 如何让图片的高度自适应？
- * A: 使用img元素，并且style中高度不设置即可
- *    通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
- *
- * Q: 如何知道图片加载完成？
- * A: 为img标签追加OnLoad回调函数来接收图片加载完成的消息
- *
- -->
-
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import LongImageScroll from "./LongImageScroll.vue";
-import Button from "./Button.vue";
-import LongImageSource from "./assets/1280x7200.jpg";
-
-interface KeyEvent {
-  keyCode: Number;
-}
-
-@Options({
-  components: {
-    LongImageScroll,
-    Button,
-  },
-})
-class App extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-  private LongImageSource: String = LongImageSource;
-
-  onKeyDown(ev: KeyEvent): Boolean {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-    }
-    return true;
-  }
-}
-export default App;
-</script>
-
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
-        color: '#ffffff',
-        left: 100,
-        top: 20,
-        width: 1000,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
-      可加载长或宽超过2048px的图片
-    </div>
-    <div :style="{ left: 100, top: 100 }">
-      <LongImageScroll
-        :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
-        :imageSrc="LongImageSource"
-        :scrollBlockStyle="{
-          width: 10,
-          height: 30,
-          backgroundColor: '#555555',
-        }"
-        :scrollStyle="{
-          left: 1005,
-          width: 10,
-          height: 500,
-          backgroundColor: '#DDDDDD',
-        }"
-        :step="60"
-      />
-      <div :style="{ left: 400, top: 550 }">
-        <Button />
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
+<!--
+ *
+ * 【界面概述】
+ * 带下拉条的长图片展示样例
+ *
+ * 【控件介绍】
+ * SimpleWidget：见simpleMetrowidget
+ *
+ * 【技巧说明】
+ * Q: 如何让图片的高度自适应？
+ * A: 使用img元素，并且style中高度不设置即可
+ *    通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 如何知道图片加载完成？
+ * A: 为img标签追加OnLoad回调函数来接收图片加载完成的消息
+ *
+ -->
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import LongImageScroll from "./LongImageScroll.vue";
+import Button from "./Button.vue";
+import LongImageSource from "./assets/1280x7200.jpg";
+
+interface KeyEvent {
+  keyCode: Number;
+}
+
+@Options({
+  components: {
+    LongImageScroll,
+    Button,
+  },
+})
+class App extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+  private LongImageSource: String = LongImageSource;
+
+  onKeyDown(ev: KeyEvent): Boolean {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    }
+    return true;
+  }
+}
+export default App;
+</script>
+
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      可加载长或宽超过2048px的图片
+    </div>
+    <div :style="{ left: 100, top: 100 }">
+      <LongImageScroll
+        :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+        :imageSrc="LongImageSource"
+        :scrollBlockStyle="{
+          width: 10,
+          height: 30,
+          backgroundColor: '#555555',
+        }"
+        :scrollStyle="{
+          left: 1005,
+          width: 10,
+          height: 500,
+          backgroundColor: '#DDDDDD',
+        }"
+        :step="60"
+      />
+      <div :style="{ left: 400, top: 550 }">
+        <Button />
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>