@shijiu/jsview-vue 0.0.1-beta.0

package/samples/TextBox/App.vue

@@ -0,0 +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>
+</template>

package/samples/TextBox/RenderCenter.vue

@@ -0,0 +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>
+</template>

package/samples/TextBox/RenderLeft.vue

@@ -0,0 +1,109 @@
+<script>
+import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+export default {
+  props: {
+    text: String,
+    moveCount: Number,
+    sStyleToken: String,
+    sLayoutSet: Object,
+    sFontSetLeft40Top: Object,
+    sFontSetLeft40Center: Object,
+    sFontSetLeft40Bottom: Object,
+    sFontSetLeft80: Object,
+  },
+  components: { JsvTextBox },
+};
+</script>
+
+<template>
+  <div :style="{ top: 50 }">
+    <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, sFontSetLeft40Top, { left: 0, top: 0 }]"
+    >
+      {{ `测试文字变化能引起刷新: [${moveCount}]\n[TL]${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, sFontSetLeft40Center, { left: 410, top: 0 }]"
+    >
+      {{ `[ML]${text}` }}
+    </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, sFontSetLeft40Bottom, { left: 820, top: 0 }]"
+    >
+      {{ `[BL]${text}` }}
+    </JsvTextBox>
+    <div
+      :style="{
+        left: 1240,
+        top: -50,
+        width: 500,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向上对齐、文字水平居左显示、行高80px
+    </div>
+    <JsvTextBox
+      :verticalAlign="'top'"
+      :styleToken="sStyleToken"
+      :stylesList="[
+        sLayoutSet,
+        sFontSetLeft80,
+        { left: 1240, top: 0, width: 500 },
+      ]"
+    >
+      {{ `[TL]${text}` }}
+    </JsvTextBox>
+  </div>
+</template>

package/samples/TextBox/RenderOneLine.vue

@@ -0,0 +1,120 @@
+<script>
+import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+export default {
+  props: {
+    text: String,
+    sStyleToken: String,
+  },
+  components: { JsvTextBox },
+};
+</script>
+
+<template>
+  <div :style="{ top: 750 + 300 + 50 }">
+    <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="[
+        {
+          left: 0,
+          top: 0,
+          width: 400,
+          height: 80,
+          backgroundColor: 'rgba(255,255,0,0.5)',
+        },
+        {
+          backgroundColor: 'rgba(255,255,0,0.5)',
+          fontSize: '30px',
+          textAlign: 'left',
+          lineHeight: '80px',
+        },
+      ]"
+    >
+      {{ 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="[
+        {
+          left: 410,
+          top: 0,
+          width: 400,
+          height: 80,
+          backgroundColor: 'rgba(255,255,0,0.5)',
+        },
+        {
+          backgroundColor: 'rgba(255,255,0,0.5)',
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '80px',
+        },
+      ]"
+    >
+      {{ text }}
+    </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="[
+        {
+          left: 820,
+          top: 0,
+          width: 400,
+          height: 80,
+          backgroundColor: 'rgba(255,255,0,0.5)',
+        },
+        {
+          backgroundColor: 'rgba(255,255,0,0.5)',
+          fontSize: '30px',
+          textAlign: 'right',
+          lineHeight: '80px',
+        },
+      ]"
+    >
+      {{ text }}
+    </JsvTextBox>
+  </div>
+</template>

package/samples/TextBox/RenderRight.vue

@@ -0,0 +1,107 @@
+<script>
+import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+export default {
+  props: {
+    text: String,
+    sStyleToken: String,
+    sLayoutSet: Object,
+    sFontSetRight40: Object,
+    sFontSetRight80: Object,
+  },
+  components: { JsvTextBox },
+};
+</script>
+
+<template>
+  <div :style="{ top: 750 }">
+    <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, sFontSetRight40, { left: 0, top: 0 }]"
+    >
+      {{ `[TR]${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, sFontSetRight40, { left: 410, top: 0 }]"
+    >
+      {{ `[MR]${text}` }}
+    </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, sFontSetRight40, { left: 820, top: 0 }]"
+    >
+      {{ `[BR]${text}` }}
+    </JsvTextBox>
+
+    <div
+      :style="{
+        left: 1240,
+        top: -50,
+        width: 500,
+        height: 50,
+        fontSize: '20px',
+        textAlign: 'left',
+        lineHeight: '50px',
+        backgroundColor: '#00ff00',
+      }"
+    >
+      整体垂直向下对齐、文字水平居右显示、行高80px
+    </div>
+    <JsvTextBox
+      :verticalAlign="'bottom'"
+      :styleToken="sStyleToken"
+      :stylesList="[
+        sLayoutSet,
+        sFontSetRight80,
+        { left: 1240, top: 0, width: 500 },
+      ]"
+    >
+      {{ `[BR]${text}` }}
+    </JsvTextBox>
+  </div>
+</template>