@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/Basic/App.vue

@@ -1,129 +1,129 @@
-<!--
- * 【界面概述】
- * div元素style中设置值对应的样例
- *
- * 【控件介绍】
- * 无
- *
- * 【技巧说明】
- * Q: 如何将div布局到指定坐标中？
- * A: 设置div style中的top和left，坐标值是相对于父div的左上角的坐标值
- *
- * Q: 如何在界面上描画图片？
- * A: 参照div/DivBackground，div的style中，
- *    描绘纯色时，通过backgroundColor来设置，例如
- *    <div style={{width:200, height:200, backgroundColor: 'rgba(255, 255, 0, 1)'}}>
- *    描绘图片时，通过backgroundImage来设置，例如
- *    <div style={{width:200, height:200, backgroundColor:`url(${iconImgPath})`}}>
- *    注意，不设置width和height的情况是默认尺寸为0px * 0px，不会展示图片
- *
- * Q: 如何对图片进行剪切，只展示图片的局部内容？
- * A: 参照div/DivClip，使用style中的overflow:"hidden"属性进行裁剪，或者使用style中clipPath属性进行裁剪
- *
- * Q: 如何将展示图片的四个角变成圆角？
- * A: 参照img/ImgRadius，通过设置style中的borderRadius属性完成圆角改变
- *
- * Q: 文字如何描绘？
- * A: 在div标签的内容中可填写需要描绘的文字，文字的字体字号等属性，通过div标签中的style来控制，参照text文件夹中的各个js。
- *    注意：若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
- *          <div>{"第一行
- *          第二行"}</div>
- *          =======需要改成=======
- *          <div>{"第一行\n\
- *          第二行"}</div>
- *
- * Q: 几个位置使用的文字属性是统一的情况下，如何减少每个div中设置文字style的代码量？
- * A: 将统一的文字属性定义到一个js文件中(例如本Demo中的CommonFontStyle)，使用时，在style中采用array扩展的方式即可：
- *    <div style={{...TitleFont}}>
- *
- * Q: 如何让div产生动画效果？
- * A: 动画需要通过以下两种方式实现，具体见anim文件夹各个js:
- *    方式1：声明keyframe结构，通过div的style中的animation来引用keyFrame，启动动画
- *    方式2：设置div style中的transition属性，然后调整div的left/top/width/height之后，会按照transition规则进行动画。
- *    注意点1：keyFrame可以声明在css文件中，也可以通过document.styleSheet来动态加载，可以参考转盘demo(turntableDemo)
- *    在JsView系统中，css文件中只能声明keyFrame内容，不能声明其他内容
- *    注意点2：transition目前只支持left/top/width/height属性的跟踪，其他属性目前不支持
--->
-
-<script>
-import { Options, Vue } from "vue-class-component";
-import TitleBar from './components/TitleBar';
-import DivGroup1 from './components/div/DivGroup1';
-import DivGroup2 from './components/div/DivGroup2';
-import TextGroup from './components/text/TextGroup';
-import AnimGroup from './components/anim/AnimGroup';
-
-@Options({
-  components: {
-    TitleBar,
-    DivGroup1, DivGroup2,
-    TextGroup, AnimGroup
-  }
-})
-
-class App extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.itemSides = {
-      top: 0,
-      left: 0,
-      width: 240,
-      height: 160,
-    };
-  }
-
-  // Override
-  mounted() {
-    window.jJsvRuntimeBridge?.notifyPageLoaded();
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      console.log("Basic has this.$router: ", !!this.$router)
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true
-    }
-    return false;
-  }
-}
-
-export default App;
-</script>
-
-<template>
-<div>
-  <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown"/>
-
-  <div class="root">
-    <div class="content-size" :style="{top:20, left:20}">
-      <TitleBar class="content-size" :itemSides=itemSides />
-      <div class="content-size" :style="{top:20}">
-        <DivGroup1 class="content-size"
-          contentClass="content-size" :itemSides=itemSides />
-        <DivGroup2 :style="{left: itemSides.width}"
-          contentClass="content-size" :itemSides=itemSides />
-        <TextGroup :style="{left: itemSides.width*2}"
-          contentClass="content-size" :itemSides=itemSides />
-        <AnimGroup :style="{left: itemSides.width*3}"
-          contentClass="content-size" :itemSides=itemSides />
-      </div>
-    </div>
-  </div>
-</div>
-</template>
-
-<style>
-.root {
-  top: 10; left: 10;
-  width: 1250; height: 670;
-  background-color: rgba(200, 200, 200, 1)
-}
-
-.content-size {
-  width: 1210; height: 630;
-}
-
+<!--
+ * 【界面概述】
+ * div元素style中设置值对应的样例
+ *
+ * 【控件介绍】
+ * 无
+ *
+ * 【技巧说明】
+ * Q: 如何将div布局到指定坐标中？
+ * A: 设置div style中的top和left，坐标值是相对于父div的左上角的坐标值
+ *
+ * Q: 如何在界面上描画图片？
+ * A: 参照div/DivBackground，div的style中，
+ *    描绘纯色时，通过backgroundColor来设置，例如
+ *    <div style={{width:200, height:200, backgroundColor: 'rgba(255, 255, 0, 1)'}}>
+ *    描绘图片时，通过backgroundImage来设置，例如
+ *    <div style={{width:200, height:200, backgroundColor:`url(${iconImgPath})`}}>
+ *    注意，不设置width和height的情况是默认尺寸为0px * 0px，不会展示图片
+ *
+ * Q: 如何对图片进行剪切，只展示图片的局部内容？
+ * A: 参照div/DivClip，使用style中的overflow:"hidden"属性进行裁剪，或者使用style中clipPath属性进行裁剪
+ *
+ * Q: 如何将展示图片的四个角变成圆角？
+ * A: 参照img/ImgRadius，通过设置style中的borderRadius属性完成圆角改变
+ *
+ * Q: 文字如何描绘？
+ * A: 在div标签的内容中可填写需要描绘的文字，文字的字体字号等属性，通过div标签中的style来控制，参照text文件夹中的各个js。
+ *    注意：若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
+ *          <div>{"第一行
+ *          第二行"}</div>
+ *          =======需要改成=======
+ *          <div>{"第一行\n\
+ *          第二行"}</div>
+ *
+ * Q: 几个位置使用的文字属性是统一的情况下，如何减少每个div中设置文字style的代码量？
+ * A: 将统一的文字属性定义到一个js文件中(例如本Demo中的CommonFontStyle)，使用时，在style中采用array扩展的方式即可：
+ *    <div style={{...TitleFont}}>
+ *
+ * Q: 如何让div产生动画效果？
+ * A: 动画需要通过以下两种方式实现，具体见anim文件夹各个js:
+ *    方式1：声明keyframe结构，通过div的style中的animation来引用keyFrame，启动动画
+ *    方式2：设置div style中的transition属性，然后调整div的left/top/width/height之后，会按照transition规则进行动画。
+ *    注意点1：keyFrame可以声明在css文件中，也可以通过document.styleSheet来动态加载，可以参考转盘demo(turntableDemo)
+ *    在JsView系统中，css文件中只能声明keyFrame内容，不能声明其他内容
+ *    注意点2：transition目前只支持left/top/width/height属性的跟踪，其他属性目前不支持
+-->
+
+<script>
+import { Options, Vue } from "vue-class-component";
+import TitleBar from './components/TitleBar';
+import DivGroup1 from './components/div/DivGroup1';
+import DivGroup2 from './components/div/DivGroup2';
+import TextGroup from './components/text/TextGroup';
+import AnimGroup from './components/anim/AnimGroup';
+
+@Options({
+  components: {
+    TitleBar,
+    DivGroup1, DivGroup2,
+    TextGroup, AnimGroup
+  }
+})
+
+class App extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.itemSides = {
+      top: 0,
+      left: 0,
+      width: 240,
+      height: 160,
+    };
+  }
+
+  // Override
+  mounted() {
+    window.jJsvRuntimeBridge?.notifyPageLoaded();
+  }
+
+  onKeyDown(ev) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      console.log("Basic has this.$router: ", !!this.$router)
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      return true
+    }
+    return false;
+  }
+}
+
+export default App;
+</script>
+
+<template>
+<div>
+  <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown"/>
+
+  <div class="root">
+    <div class="content-size" :style="{top:20, left:20}">
+      <TitleBar class="content-size" :itemSides=itemSides />
+      <div class="content-size" :style="{top:20}">
+        <DivGroup1 class="content-size"
+          contentClass="content-size" :itemSides=itemSides />
+        <DivGroup2 :style="{left: itemSides.width}"
+          contentClass="content-size" :itemSides=itemSides />
+        <TextGroup :style="{left: itemSides.width*2}"
+          contentClass="content-size" :itemSides=itemSides />
+        <AnimGroup :style="{left: itemSides.width*3}"
+          contentClass="content-size" :itemSides=itemSides />
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<style>
+.root {
+  top: 10; left: 10;
+  width: 1250; height: 670;
+  background-color: rgba(200, 200, 200, 1)
+}
+
+.content-size {
+  width: 1210; height: 630;
+}
+
 </style>

package/samples/Basic/components/TitleBar.vue

@@ -1,29 +1,29 @@
-<template>
-  <div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 0}">div标签1</div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 1}">div标签2</div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 2}">div文本</div>
-    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 3}">动画</div>
-  </div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
-
-const name = 'Title';
-const props = defineProps({
-  itemSides: Object 
-})
-</script>
-
-<style>
-@import "./FontStyle.css";
-</style>
-
-<style scoped>
-.item-style {
-  text-align: center;
-}
-
+<template>
+  <div>
+    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 0}">div标签1</div>
+    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 1}">div标签2</div>
+    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 2}">div文本</div>
+    <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * 3}">动画</div>
+  </div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { defineProps } from "vue";
+
+const name = 'Title';
+const props = defineProps({
+  itemSides: Object 
+})
+</script>
+
+<style>
+@import "./FontStyle.css";
+</style>
+
+<style scoped>
+.item-style {
+  text-align: center;
+}
+
 </style>

package/samples/Basic/components/anim/AnimGroup.vue

@@ -1,68 +1,68 @@
-<template>
-    <div id='item-root'>
-        <ContentBlock
-            :class=contentClass
-            :style="{ top: itemSides.height * 0 }"
-            :=contentBlockProps
-            :index=1
-            title="Keyframe基础动画集合">
-            <AnimKeyframeBasic/>
-        </ContentBlock>
-        <ContentBlock
-            :class=contentClass
-            :style="{ top: itemSides.height * 1 }"
-            :=contentBlockProps
-            :index=2
-            title="Keyframe组合示例">
-            <AnimKeyframeComposite/>
-        </ContentBlock>
-        <ContentBlock
-            :class=contentClass
-            :style="{ top: itemSides.height * 2}"
-            :="{...contentBlockProps, itemSides: {...itemSides, height:290}}"
-            :index=3
-            title="Transition动画示例">
-            <AnimTransition :timeCount=state.timeCount />
-        </ContentBlock>
-    </div>
-
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps, reactive, onMounted, onBeforeUnmount } from "vue";
-import ContentBlock from '../ContentBlock';
-import AnimKeyframeBasic from './AnimKeyframeBasic';
-import AnimKeyframeComposite from './AnimKeyframeComposite';
-import AnimTransition from './AnimTransition';
-
-const name = 'DivGroup2';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-
-const state = reactive({
-    timeCount: 20
-})
-var timerId = -1;
-
-onMounted(() => {
-    timerId = setInterval(() => {
-        // console.log('change timeCount: ' + timeCount);
-        state.timeCount = (state.timeCount + 5);
-    }, 2000);
-});
-
-onBeforeUnmount(() => {
-    if (timerId >= 0) {
-      window.clearInterval(timerId);
-    }
-    timerId = -1;
-});
-
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
+<template>
+    <div id='item-root'>
+        <ContentBlock
+            :class=contentClass
+            :style="{ top: itemSides.height * 0 }"
+            :=contentBlockProps
+            :index=1
+            title="Keyframe基础动画集合">
+            <AnimKeyframeBasic/>
+        </ContentBlock>
+        <ContentBlock
+            :class=contentClass
+            :style="{ top: itemSides.height * 1 }"
+            :=contentBlockProps
+            :index=2
+            title="Keyframe组合示例">
+            <AnimKeyframeComposite/>
+        </ContentBlock>
+        <ContentBlock
+            :class=contentClass
+            :style="{ top: itemSides.height * 2}"
+            :="{...contentBlockProps, itemSides: {...itemSides, height:290}}"
+            :index=3
+            title="Transition动画示例">
+            <AnimTransition :timeCount=state.timeCount />
+        </ContentBlock>
+    </div>
+
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { defineProps, reactive, onMounted, onBeforeUnmount } from "vue";
+import ContentBlock from '../ContentBlock';
+import AnimKeyframeBasic from './AnimKeyframeBasic';
+import AnimKeyframeComposite from './AnimKeyframeComposite';
+import AnimTransition from './AnimTransition';
+
+const name = 'DivGroup2';
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object 
+})
+
+const state = reactive({
+    timeCount: 20
+})
+var timerId = -1;
+
+onMounted(() => {
+    timerId = setInterval(() => {
+        // console.log('change timeCount: ' + timeCount);
+        state.timeCount = (state.timeCount + 5);
+    }, 2000);
+});
+
+onBeforeUnmount(() => {
+    if (timerId >= 0) {
+      window.clearInterval(timerId);
+    }
+    timerId = -1;
+});
+
+const contentBlockProps = {
+    colIndex: 0,
+    itemSides: props.itemSides
+};
 </script>

package/samples/Basic/components/anim/AnimKeyframeBasic.vue

@@ -1,102 +1,102 @@
-<template>
-<div id='layout-root'>
-    <div>
-        <div class="content-font" :style="{ ...titleStyle }">Translate3d</div>
-        <div :style="{ ...itemStyle, animation: 'AnimTranslate 3s infinite' }"/>
-    </div>
-    <div :style="{ left: blockSize.width }">
-        <div class="content-font" :style="{ ...titleStyle }">Scale3d</div>
-        <div :style="{ ...itemStyle, animation: 'AnimScale 3s infinite linear' }"/>
-    </div>
-    <div :style="{ left: blockSize.width*2 }">
-        <div class="content-font" :style="{ ...titleStyle }">Rotate3d</div>
-        <div :style="{ ...itemStyle, animation: 'AnimRotate 3s infinite linear' }"/>
-    </div>
-    <div :style="{ left: blockSize.width, top: blockSize.height }">
-        <div class="content-font" :style="{ ...titleStyle }">Skew</div>
-        <div :style="{ ...itemStyle, animation: 'AnimSkew 3s infinite ease-in' }"/>
-    </div>
-    <div :style="{ left: blockSize.width*2, top: blockSize.height }">
-        <div class="content-font" :style="{ ...titleStyle }">Opacity</div>
-        <div :style="{ ...itemStyle, width: 20, animation: 'AnimOpacityOut 3s infinite ease-out' }"/>
-        <div :style="{ ...itemStyle, left: 25, width: 20, animation: 'AnimOpacityIn 3s infinite ease-in-out' }"/>
-    </div>
-</div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-const blockSize = {
-    width: 70,
-    height: 70,
-};
-
-const titleStyle = {
-    width: 60, height: 20,
-    textAlign: 'center',
-    lineHeight: 20
-};
-
-const itemStyle = {
-    top: 20,
-    width: 50, height: 50,
-    backgroundColor: 'rgba(255, 0, 0, 1)'
-};
-
-</script>
-
-<style>
-@keyframes AnimTranslate {
-  from {
-    transform: translate3d(50%, 50px, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-};
-
-@keyframes AnimScale {
-  from {
-    transform: scale3d(1.5, 1.5, 1);
-  }
-  to {
-    transform: scale3d(0, 0, 0);
-  }
-}
-
-@keyframes AnimRotate {
-  from {
-    transform: rotate3d(1.5, 1, 1, 90deg);
-  }
-  to {
-    transform: rotate3d(1.5, 1, 1, 0);
-  }
-}
-
-@keyframes AnimSkew {
-  from {
-    transform: skew(30deg, 45deg);
-  }
-  to {
-    transform: skew(0, 0);
-  }
-}
-
-@keyframes AnimOpacityOut {
-  from {
-    opacity: 0.1;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes AnimOpacityIn {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 20%;
-  }
-}
+<template>
+<div id='layout-root'>
+    <div>
+        <div class="content-font" :style="{ ...titleStyle }">Translate3d</div>
+        <div :style="{ ...itemStyle, animation: 'AnimTranslate 3s infinite' }"/>
+    </div>
+    <div :style="{ left: blockSize.width }">
+        <div class="content-font" :style="{ ...titleStyle }">Scale3d</div>
+        <div :style="{ ...itemStyle, animation: 'AnimScale 3s infinite linear' }"/>
+    </div>
+    <div :style="{ left: blockSize.width*2 }">
+        <div class="content-font" :style="{ ...titleStyle }">Rotate3d</div>
+        <div :style="{ ...itemStyle, animation: 'AnimRotate 3s infinite linear' }"/>
+    </div>
+    <div :style="{ left: blockSize.width, top: blockSize.height }">
+        <div class="content-font" :style="{ ...titleStyle }">Skew</div>
+        <div :style="{ ...itemStyle, animation: 'AnimSkew 3s infinite ease-in' }"/>
+    </div>
+    <div :style="{ left: blockSize.width*2, top: blockSize.height }">
+        <div class="content-font" :style="{ ...titleStyle }">Opacity</div>
+        <div :style="{ ...itemStyle, width: 20, animation: 'AnimOpacityOut 3s infinite ease-out' }"/>
+        <div :style="{ ...itemStyle, left: 25, width: 20, animation: 'AnimOpacityIn 3s infinite ease-in-out' }"/>
+    </div>
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+const blockSize = {
+    width: 70,
+    height: 70,
+};
+
+const titleStyle = {
+    width: 60, height: 20,
+    textAlign: 'center',
+    lineHeight: 20
+};
+
+const itemStyle = {
+    top: 20,
+    width: 50, height: 50,
+    backgroundColor: 'rgba(255, 0, 0, 1)'
+};
+
+</script>
+
+<style>
+@keyframes AnimTranslate {
+  from {
+    transform: translate3d(50%, 50px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+};
+
+@keyframes AnimScale {
+  from {
+    transform: scale3d(1.5, 1.5, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 0);
+  }
+}
+
+@keyframes AnimRotate {
+  from {
+    transform: rotate3d(1.5, 1, 1, 90deg);
+  }
+  to {
+    transform: rotate3d(1.5, 1, 1, 0);
+  }
+}
+
+@keyframes AnimSkew {
+  from {
+    transform: skew(30deg, 45deg);
+  }
+  to {
+    transform: skew(0, 0);
+  }
+}
+
+@keyframes AnimOpacityOut {
+  from {
+    opacity: 0.1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes AnimOpacityIn {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 20%;
+  }
+}
 </style>