@shijiu/jsview-vue 0.9.254 → 0.9.267

package/samples/TextBox/App.vue

@@ -1,179 +1,179 @@
-<!--
- * 【界面概述】
- * 展示文字垂直对齐方式显示控件的用法
- *
- * 【控件介绍】
- *
- * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
- *      props说明:
- *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
- *          stylesList {array}    布局样式(必需)，数组中可包含样式对象或者JsvStyleClass，或者JsvTextStyleClass对象，
- *                                  样式对象内容为{left:0, top:0, width:xxx, height:xxx}，
- *                                  布局样式为数组中所有样式的合并。
- *          styleToken {string}     类似于vue html元素的key，当style变化时，由使用者改变此Token通知hoc进行style重新识别。
- *                                  Token不变的场景，props变化不会引起render，以提高渲染性能
- *
- * 【技巧说明】
- * Q: 如何实现文字居中对齐方式显示?
- * A: verticalAlign属性设置为middle
- *
- * Q: 如何触发控件重绘?
- * A: 1. 变更styleToken属性，将触发控件重新解析styles并重绘
- *    2. 变更文字内容，将触发控件重绘，但不会重新解析styles
- -->
-
- <script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import RenderLeft from "./RenderLeft.vue";
-import RenderRight from "./RenderRight.vue";
-import RenderCenter from "./RenderCenter.vue";
-import RenderOneLine from "./RenderOneLine.vue";
-import {
-  JsvTextStyleClass,
-  JsvStyleClass,
-} from "jsview/utils/JsViewVueTools/JsvStyleClass.js";
-
-@Options({
-  components: {
-    RenderLeft,
-    RenderRight,
-    RenderCenter,
-    RenderOneLine,
-  },
-})
-export default class App extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-
-  private offsetX: any = 0;
-  private offsetY: any = 0;
-  private onLineText = "abcdefghigk";
-  private text: any = `静夜思 --唐李白
-床前明月光，疑是地上霜；
-举头望明月，低头思故乡。`;
-  private text_latex: String = `静夜思 --唐李白
-床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
-举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
-  private sLayoutSet: any = new JsvStyleClass({
-    width: 400,
-    height: 300,
-    backgroundColor: "rgba(255,255,0,0.5)",
-  });
-  private sFontSetLeft40Top: any = new JsvTextStyleClass({
-    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft40Center: any = new JsvTextStyleClass({
-    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft40Bottom: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "left",
-    lineHeight: "80px",
-  });
-  private sFontSetCenter40: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "center",
-    lineHeight: "40px",
-  });
-  private sFontSetCenter80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "center",
-    lineHeight: "80px",
-  });
-  private sFontSetRight40: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "right",
-    lineHeight: "80px",
-  });
-  private sFontSetRight80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "right",
-    lineHeight: "80px",
-  });
-  private sStyleToken: String = "v1.0";
-  private rootRef: any = null;
-  private moveCount: any = 0;
-
-  onKeyDown(ev: any) {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
-    switch (ev.keyCode) {
-      case 37:
-        this.offsetX += 30;
-        this.moveCount++;
-        break;
-      case 39:
-        this.offsetX -= 30;
-        this.moveCount++;
-        break;
-      case 38:
-        this.offsetY += 30;
-        this.moveCount++;
-        break;
-      case 40:
-        this.offsetY -= 30;
-        this.moveCount++;
-        break;
-    }
-    return true;
-  }
-  onFocus() {
-    console.log("TextBox getFocus");
-  }
-  onBlur() {
-    console.log("TextBox loseFocus");
-  }
-}
-</script>
-
- <template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-      onFocus: onFocus,
-      onBlur: onBlur,
-    }"
-  >
-    <div :style="{ top: offsetY, left: offsetX }">
-      <RenderLeft
-        :text="text"
-        :moveCount="moveCount"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetLeft40Top="sFontSetLeft40Top"
-        :sFontSetLeft40Center="sFontSetLeft40Center"
-        :sFontSetLeft40Bottom="sFontSetLeft40Bottom"
-        :sFontSetLeft80="sFontSetLeft80"
-      />
-      <RenderRight
-        :text="text"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetRight40="sFontSetRight40"
-        :sFontSetRight80="sFontSetRight80"
-      />
-      <RenderCenter
-        :text="text"
-        :text_latex="text_latex"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetCenter40="sFontSetCenter40"
-        :sFontSetCenter80="sFontSetCenter80"
-      />
-      <RenderOneLine :text="onLineText" :sStyleToken="sStyleToken" />
-    </div>
-  </jsv-focus-block>
+<!--
+ * 【界面概述】
+ * 展示文字垂直对齐方式显示控件的用法
+ *
+ * 【控件介绍】
+ *
+ * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
+ *      props说明:
+ *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
+ *          stylesList {array}    布局样式(必需)，数组中可包含样式对象或者JsvStyleClass，或者JsvTextStyleClass对象，
+ *                                  样式对象内容为{left:0, top:0, width:xxx, height:xxx}，
+ *                                  布局样式为数组中所有样式的合并。
+ *          styleToken {string}     类似于vue html元素的key，当style变化时，由使用者改变此Token通知hoc进行style重新识别。
+ *                                  Token不变的场景，props变化不会引起render，以提高渲染性能
+ *
+ * 【技巧说明】
+ * Q: 如何实现文字居中对齐方式显示?
+ * A: verticalAlign属性设置为middle
+ *
+ * Q: 如何触发控件重绘?
+ * A: 1. 变更styleToken属性，将触发控件重新解析styles并重绘
+ *    2. 变更文字内容，将触发控件重绘，但不会重新解析styles
+ -->
+
+ <script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import RenderLeft from "./RenderLeft.vue";
+import RenderRight from "./RenderRight.vue";
+import RenderCenter from "./RenderCenter.vue";
+import RenderOneLine from "./RenderOneLine.vue";
+import {
+  JsvTextStyleClass,
+  JsvStyleClass,
+} from "jsview/utils/JsViewVueTools/JsvStyleClass.js";
+
+@Options({
+  components: {
+    RenderLeft,
+    RenderRight,
+    RenderCenter,
+    RenderOneLine,
+  },
+})
+export default class App extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+
+  private offsetX: any = 0;
+  private offsetY: any = 0;
+  private onLineText = "abcdefghigk";
+  private text: any = `静夜思 --唐李白
+床前明月光，疑是地上霜；
+举头望明月，低头思故乡。`;
+  private text_latex: String = `静夜思 --唐李白
+床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
+举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
+  private sLayoutSet: any = new JsvStyleClass({
+    width: 400,
+    height: 300,
+    backgroundColor: "rgba(255,255,0,0.5)",
+  });
+  private sFontSetLeft40Top: any = new JsvTextStyleClass({
+    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
+    textAlign: "left",
+    lineHeight: "40px",
+  });
+  private sFontSetLeft40Center: any = new JsvTextStyleClass({
+    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
+    textAlign: "left",
+    lineHeight: "40px",
+  });
+  private sFontSetLeft40Bottom: any = new JsvTextStyleClass({
+    fontSize: "30px",
+    textAlign: "left",
+    lineHeight: "40px",
+  });
+  private sFontSetLeft80: any = new JsvTextStyleClass({
+    fontSize: "30px",
+    textAlign: "left",
+    lineHeight: "80px",
+  });
+  private sFontSetCenter40: any = new JsvTextStyleClass({
+    fontSize: "30px",
+    textAlign: "center",
+    lineHeight: "40px",
+  });
+  private sFontSetCenter80: any = new JsvTextStyleClass({
+    fontSize: "30px",
+    textAlign: "center",
+    lineHeight: "80px",
+  });
+  private sFontSetRight40: any = new JsvTextStyleClass({
+    fontSize: "30px",
+    textAlign: "right",
+    lineHeight: "80px",
+  });
+  private sFontSetRight80: any = new JsvTextStyleClass({
+    fontSize: "30px",
+    textAlign: "right",
+    lineHeight: "80px",
+  });
+  private sStyleToken: String = "v1.0";
+  private rootRef: any = null;
+  private moveCount: any = 0;
+
+  onKeyDown(ev: any) {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      return true;
+    }
+    switch (ev.keyCode) {
+      case 37:
+        this.offsetX += 30;
+        this.moveCount++;
+        break;
+      case 39:
+        this.offsetX -= 30;
+        this.moveCount++;
+        break;
+      case 38:
+        this.offsetY += 30;
+        this.moveCount++;
+        break;
+      case 40:
+        this.offsetY -= 30;
+        this.moveCount++;
+        break;
+    }
+    return true;
+  }
+  onFocus() {
+    console.log("TextBox getFocus");
+  }
+  onBlur() {
+    console.log("TextBox loseFocus");
+  }
+}
+</script>
+
+ <template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+    }"
+  >
+    <div :style="{ top: offsetY, left: offsetX }">
+      <RenderLeft
+        :text="text"
+        :moveCount="moveCount"
+        :sStyleToken="sStyleToken"
+        :sLayoutSet="sLayoutSet"
+        :sFontSetLeft40Top="sFontSetLeft40Top"
+        :sFontSetLeft40Center="sFontSetLeft40Center"
+        :sFontSetLeft40Bottom="sFontSetLeft40Bottom"
+        :sFontSetLeft80="sFontSetLeft80"
+      />
+      <RenderRight
+        :text="text"
+        :sStyleToken="sStyleToken"
+        :sLayoutSet="sLayoutSet"
+        :sFontSetRight40="sFontSetRight40"
+        :sFontSetRight80="sFontSetRight80"
+      />
+      <RenderCenter
+        :text="text"
+        :text_latex="text_latex"
+        :sStyleToken="sStyleToken"
+        :sLayoutSet="sLayoutSet"
+        :sFontSetCenter40="sFontSetCenter40"
+        :sFontSetCenter80="sFontSetCenter80"
+      />
+      <RenderOneLine :text="onLineText" :sStyleToken="sStyleToken" />
+    </div>
+  </jsv-focus-block>
 </template>

package/samples/TextBox/RenderCenter.vue

@@ -1,109 +1,109 @@
-<script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
-export default {
-  props: {
-    text: String,
-    text_latex: String,
-    sStyleToken: String,
-    sLayoutSet: Object,
-    sFontSetCenter40: Object,
-    sFontSetCenter80: Object,
-  },
-  components: { JsvTextBox },
-};
-</script>
-
-<template>
-  <div :style="{ top: 400 }">
-    <div
-      :style="{
-        left: 0,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: '20px',
-        textAlign: 'left',
-        lineHeight: '50px',
-        backgroundColor: '#00ff00',
-      }"
-    >
-      整体垂直向上对齐、文字水平居中显示
-    </div>
-    <JsvTextBox
-      :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 0, top: 0 }]"
-    >
-      {{ `[TC]${text}` }}
-    </JsvTextBox>
-    <div
-      :style="{
-        left: 410,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: '20px',
-        textAlign: 'left',
-        lineHeight: '50px',
-        backgroundColor: '#00ff00',
-      }"
-    >
-      整体垂直居中对齐、文字水平居中显示
-    </div>
-    <JsvTextBox
-      :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 410, top: 0 }]"
-      :enableLatex="true"
-    >
-      {{ `[MC]${text_latex}` }}
-    </JsvTextBox>
-    <div
-      :style="{
-        left: 820,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: '20px',
-        textAlign: 'left',
-        lineHeight: '50px',
-        backgroundColor: '#00ff00',
-      }"
-    >
-      整体垂直向下对齐、文字水平居中显示
-    </div>
-    <JsvTextBox
-      :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 820, top: 0 }]"
-    >
-      {{ `[BC]${text}` }}
-    </JsvTextBox>
-
-    <div
-      :style="{
-        left: 1240,
-        top: -50,
-        width: 500,
-        height: 50,
-        fontSize: '20px',
-        textAlign: 'left',
-        lineHeight: '50px',
-        backgroundColor: '#00ff00',
-      }"
-    >
-      整体垂直居中对齐、文字水平居中显示、行高80px
-    </div>
-    <JsvTextBox
-      :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        sLayoutSet,
-        sFontSetCenter80,
-        { left: 1240, top: 0, width: 500 },
-      ]"
-    >
-      {{ `[MC]${text}` }}
-    </JsvTextBox>
-  </div>
+<script>
+import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+export default {
+  props: {
+    text: String,
+    text_latex: String,
+    sStyleToken: String,
+    sLayoutSet: Object,
+    sFontSetCenter40: Object,
+    sFontSetCenter80: Object,
+  },
+  components: { JsvTextBox },
+};
+</script>
+
+<template>
+  <div :style="{ top: 400 }">
+    <div
+      :style="{
+        left: 0,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向上对齐、文字水平居中显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'top'"
+      :styleToken="sStyleToken"
+      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 0, top: 0 }]"
+    >
+      {{ `[TC]${text}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 410,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直居中对齐、文字水平居中显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'middle'"
+      :styleToken="sStyleToken"
+      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 410, top: 0 }]"
+      :enableLatex="true"
+    >
+      {{ `[MC]${text_latex}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 820,
+        top: -50,
+        width: 400,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向下对齐、文字水平居中显示
+    </div>
+    <JsvTextBox
+      :verticalAlign="'bottom'"
+      :styleToken="sStyleToken"
+      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 820, top: 0 }]"
+    >
+      {{ `[BC]${text}` }}
+    </JsvTextBox>
+
+    <div
+      :style="{
+        left: 1240,
+        top: -50,
+        width: 500,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直居中对齐、文字水平居中显示、行高80px
+    </div>
+    <JsvTextBox
+      :verticalAlign="'middle'"
+      :styleToken="sStyleToken"
+      :stylesList="[
+        sLayoutSet,
+        sFontSetCenter80,
+        { left: 1240, top: 0, width: 500 },
+      ]"
+    >
+      {{ `[MC]${text}` }}
+    </JsvTextBox>
+  </div>
 </template>