@shijiu/jsview-vue 0.0.1-beta.0

package/samples/Basic/App.vue

@@ -0,0 +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;
+}
+
+</style>

package/samples/Basic/components/ContentBlock.vue

@@ -0,0 +1,36 @@
+<template>
+<div>
+  <div class="title-font" :style=titleStyle>
+    {{title}}
+  </div>
+  <div key="blockColor" :style="{ top: titleStyle.lineHeight, width: itemSides.width, height: itemSides.height - 18, backgroundColor: 'rgba(0,0,255,'+blockOpacity+')' }">
+  </div>
+  <div key="container" :style="{ top: titleStyle.lineHeight }">
+    <slot/>
+  </div>
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { defineProps } from "vue";
+
+const name = 'TitleBlock';
+const props = defineProps({
+  title: String,
+  index: Number,
+  itemSides: Object 
+})
+
+const blockOpacity = (((props.index) % 2 === 0) ? 0.2 : 0.5);
+
+const titleStyle = { 
+  lineHeight: 18,
+  width: props.itemSides.width, height: 18,
+  backgroundColor: 'rgba(0,0,255,0.7)',
+};
+</script>
+
+<style>
+@import "./FontStyle.css";
+</style>

package/samples/Basic/components/FontStyle.css

@@ -0,0 +1,10 @@
+
+.title-font {
+  font-family: 黑体;
+  font-size: 16px;
+}
+
+.content-font {
+  font-family: 黑体;
+  font-size: 12px;
+};

package/samples/Basic/components/TitleBar.vue

@@ -0,0 +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;
+}
+
+</style>

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

@@ -0,0 +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
+};
+</script>

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

@@ -0,0 +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%;
+  }
+}
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+<div id='layout-root'>
+    <div>
+        <div class="content-font" :style="{ ...titleStyle }">四种变形动画</div>
+        <div :style="{ ...itemStyle, animation: 'AnimComposite1 3s infinite' }"/>
+    </div>
+    <div :style="{ left: 100 }">
+        <div class="content-font" :style="{ ...titleStyle }">变形+透明动画</div>
+        <div :style="{ ...itemStyle, animation: 'AnimComposite2 3s infinite' }"/>
+    </div>
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+const titleStyle = {
+    width: 100,
+    height: 20,
+    textAlign: 'center',
+    lineHeight: 20
+};
+
+const itemStyle = {
+    top: 20,
+    width: 50,
+    height: 50,
+    backgroundColor: 'rgba(255, 0, 0, 1)'
+};
+
+</script>
+
+<style>
+@import "../FontStyle.css";
+</style>
+
+<style>
+@keyframes AnimComposite1 {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1) rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+}
+
+@keyframes AnimComposite2 {
+  from {
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1) rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+<div id='layout-root'>
+    <div>
+        <div class="content-font" :style="{ ...titleStyle }">坐标变化</div>
+        <div class="content-font" :style="{ ...itemStyle,
+          left: timeCount*10%200,
+          transition: 'left 1s linear' }"/>
+    </div>
+    <div :style="{ top: 70 }">
+        <div class="content-font" :style="{ ...titleStyle }">坐标和尺寸变化</div>
+        <div class="content-font" :style="{ ...itemStyle,
+          left: timeCount*10%200,
+          width: timeCount*10%100+10,
+          transition: 'left 0.5s linear, width 1s linear 1s' }"/>
+    </div>
+
+    <div :style="{ top: 140, width: 240, height: 160, backgroundColor: 'rgba(0, 0, 255, 0.5)' }">
+        <div :style="{ ...titleStyle }">transform</div>
+        <div class="content-font" :style="{ ...itemStyle,
+            top: 20,
+            transition: 'transform 2.5s linear 0.5s',
+            transform: state.transform,
+            transformOrigin: state.transformOrigin }">移动缩放旋转</div>
+        <div class="content-font" :style="{ ...itemStyle,
+            top: 100,
+            transition: 'transform 2.5s linear 0.5s',
+            transformOrigin: 'center center',
+            transform: state.transformTranslate }">移动</div>
+        <div class="content-font" :style="{ ...itemStyle,
+            left: 140, top: 20,
+            transition: 'transform 2.5s linear 0.5s',
+            transformOrigin: 'center center',
+            transform: state.transformScale }">缩放</div>
+        <div class="content-font" :style="{ ...itemStyle,
+            top: 75,
+            left: 140,
+            transition: 'transform 2.5s linear 0.5s',
+            transformOrigin: 'center center',
+            transform: state.transformRotate }">旋转</div>
+    </div>
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { defineProps, onMounted, onBeforeUnmount } from "vue";
+
+
+const props = defineProps({
+  timeCount: Number,
+})
+
+var state = {
+    transform: null,
+    transformOrigin: null,
+    transformTranslate: null,
+    transformRotate: null,
+    transformScale: null,
+};
+
+var timerId = -1;
+
+onMounted(() => {
+    changeState();
+    timerId = setInterval(() => {
+      changeState();
+    }, 6000);
+});
+
+onBeforeUnmount(() => {
+    if (timerId >= 0) {
+      window.clearInterval(timerId);
+    }
+    timerId = -1;
+});
+
+function changeState() {
+    setTimeout(() => {
+        // 状态变更
+        state.transform = 'translate3d(80px,0px,0) scale3d(2,2,1.0) rotate3d(0, 0, 1, 360deg)';
+        state.transformOrigin = 'center center';
+        state.transformScale = 'scale3d(0.2,0.2,1.0)';
+        state.transformRotate = 'rotate3d(0, 0, 1.0, 360deg)';
+        state.transformTranslate = 'translate3d(180px,0px,0)';
+        // 状态变更
+        setTimeout(() => {
+            state.transform = 'translate3d(30px,0px,0) scale3d(0.2,0.2,1.0) rotate3d(0, 0, 1, -360deg)';
+            state.transformOrigin = 'center center';
+            state.transformScale = 'scale3d(1.2,1.2,1.0)';
+            state.transformRotate = 'rotate3d(0, 0, 1.0, -360deg)';
+            state.transformTranslate = 'translate3d(-80px,0px,0)';
+        }, 3000);
+    }, 3000);
+}
+
+const titleStyle = {
+    width: 100,
+    height: 20,
+    textAlign: 'left',
+    lineHeight: 20
+};
+
+const itemStyle = {
+    top: 20,
+    width: 50, height: 50,
+    whiteSpace: 'pre-wrap',
+    backgroundColor: 'rgba(255, 0, 0, 1)'
+};
+</script>
+
+<style>
+@import "../FontStyle.css";
+</style>
+
+<style>
+</style>

package/samples/Basic/components/div/DivBackground.vue

@@ -0,0 +1,15 @@
+<template>
+<div id='layout-root'>
+    <div class="content-font" :style="{ width: 180, height: 50, backgroundColor: 'rgba(255, 255, 0, 1)' }">style.backgroundColor</div>
+    <div class="content-font" :style="{ top: 60, width: 180, height: 50, backgroundImage: `url(${iconImgPath})` }">style.backgroundImage</div>
+</div>;
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import iconImgPath from '../../assets/icon.png';
+</script>
+
+<style>
+@import "../FontStyle.css";
+</style>

package/samples/Basic/components/div/DivClip.vue

@@ -0,0 +1,81 @@
+<template>
+<div id='layout-root'>
+    <div style="{top: 0}">
+        <div class="content-font" :style="{width: 50, height: titleHeight}">原图</div>
+        <div :style="{top: titleHeight,
+            width: imageSize.width+4, height: imageSize.height+4,
+            backgroundColor: 'rgba(0, 255, 0, 1)' }">
+            <div :style="{ left: 2, top: 2,
+                width: imageSize.width, height: imageSize.height,
+                backgroundImage: `url(${testImgPath})` }"/>
+        </div>
+    </div>
+
+    <div :style="{top: imageSize.height+titleHeight+4}">
+        <div class="content-font" :style="{ width: 120, height: titleHeight }">左上Overflow</div>
+        <div :style="{ top: titleHeight,
+            width: imageSize.width+4, height: imageSize.height+4,
+            backgroundColor: 'rgba(0, 255, 0, 1)' }">
+            <div key="clipArea" :style="{ left: 2, top: 2,
+                width: clipSize.width, height: clipSize.height,
+                overflow: 'hidden' }">
+                <div :style="{ width: imageSize.width,
+                    height: imageSize.height,
+                    backgroundImage: `url(${testImgPath})` }"/>
+            </div>
+        </div>
+    </div>
+
+    <div :style="{ top: (imageSize.height+titleHeight+4)*2 }">
+        <div class="content-font" :style="{ width: 120, height: titleHeight }">右下Overflow</div>
+        <div :style="{ top: titleHeight,
+            width: imageSize.width+4, height: imageSize.height+4,
+            backgroundColor: 'rgba(0, 255, 0, 1)' }">
+            <div key="clipArea" :style="{ top: 2+(imageSize.height-clipSize.height),
+                left: 2+(imageSize.width-clipSize.width),
+                width: clipSize.width, height: clipSize.height,
+                overflow: 'hidden' }">
+                <div :style="{ top: -((imageSize.height-clipSize.height)),
+                    left: -(imageSize.width-clipSize.width),
+                    width: imageSize.width, height: imageSize.height,
+                    backgroundImage: `url(${testImgPath})` }"/>
+            </div>
+        </div>
+    </div>
+
+    <div :style="{ top: imageSize.height+titleHeight+4, left: imageSize.width+16 }">
+        <div class="content-font" :style="{ width: 100, height: titleHeight }">ClipPath</div>
+        <div :style="{ top: titleHeight,
+            width: imageSize.width+4, height: imageSize.height+4,
+            backgroundColor: 'rgba(0, 255, 0, 1)' }">
+            <div key="clipArea" :style="{ left: 2, top: 2,
+                width: imageSize.width, height: imageSize.height,
+                clipPath: 'inset(5px 10px 15px 20px)'/* margin of top, right, bottom, left */ }">
+                <div :style="{ width: imageSize.width, height: imageSize.height,
+                    backgroundImage: `url(${testImgPath})` }"/>
+            </div>
+        </div>
+    </div>
+
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import testImgPath from '../../assets/test.jpg';
+
+const titleHeight = 16;
+const imageSize = {
+    width: 80,
+    height: 64,
+};
+const clipSize = {
+    width: 50,
+    height: 40,
+};
+</script>
+
+
+<style>
+@import "../FontStyle.css";
+</style>

package/samples/Basic/components/div/DivCssScoped.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div :class="jsvclass" v-bind="containerDataV">
+            Scoped CSS穿透, 此处的属性是Container设进来的.
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    jsvclass: String,
+  },
+
+  data() {
+    return { containerDataV: undefined }
+  },
+
+  mounted () {
+    this.containerDataV = Object.keys(this.$el).filter(p => p.startsWith('data-v-')) // 过滤'data-v-xxx属性'
+                                               .reduce((acc,curr)=> (acc[curr]='',acc),{}); // 数组转Object
+  },
+}
+</script>
+
+<style scoped>
+</style>