@shijiu/jsview-vue-samples 1.9.888 → 1.9.931

package/AnimPicture/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { LoopType, JsvApic } from "jsview";
 import catRun from "./assets/animated_webp.webp";
@@ -53,10 +53,10 @@ const ballCallback = {
     ballPlay.value = false;
   },
 };
-let catRunRef = shallowRef(null);
-let girlRunRef = shallowRef(null);
-let quanRef = shallowRef(null);
-let ballRef = shallowRef(null);
+let catRunRef = ref(null);
+let girlRunRef = ref(null);
+let quanRef = ref(null);
+let ballRef = ref(null);
 
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
@@ -187,7 +187,7 @@ const onKeyDown = (ev) => {
           width: 1180,
           textAlign: 'center',
           color: '#000000',
-          fontSize: '30px',
+          fontSize: 30,
         }"
       >
         {{ `(按键可进行停止/重播操作)` }}
@@ -198,10 +198,10 @@ const onKeyDown = (ev) => {
 
 <style scoped>
 .text {
-  font-size: 25px;
-  height: 68px;
-  line-height: 34px;
+  font-size: 25;
+  height: 68;
+  line-height: 34;
   color: #000000;
   text-align: center;
 }
-</style>
+</style>

package/Basic/App.vue

@@ -15,7 +15,7 @@
  *    <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，不会展示图片
+ *    注意，不设置width和height的情况是默认尺寸为0 * 0，不会展示图片
  *
  * Q: 如何对图片进行剪切，只展示图片的局部内容？
  * A: 参照div/DivClip，使用style中的overflow:"hidden"属性进行裁剪，或者使用style中clipPath属性进行裁剪

package/Basic/components/FontStyle.css

@@ -1,16 +1,16 @@
 
 .title-font {
   font-family: 黑体;
-  font-size: 16px;
+  font-size: 16;
 }
 
 .container-font {
   color: #FFFFFF;
   font-family: 黑体;
-  font-size: 16px;
+  font-size: 16;
 }
 
 .content-font {
   font-family: 黑体;
-  font-size: 12px;
+  font-size: 12;
 }

package/Basic/components/anim/AnimKeyframeBasic.vue

@@ -65,7 +65,7 @@ const itemStyle = {
 <style>
 @keyframes AnimTranslate {
   from {
-    transform: translate3d(50%, 50px, 0);
+    transform: translate3d(50%, 50, 0);
   }
   to {
     transform: translate3d(0, 0, 0);

package/Basic/components/anim/AnimKeyframeComposite.vue

@@ -33,7 +33,7 @@ const itemStyle = {
 <style>
 @keyframes AnimComposite1 {
   from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
       rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);
   }
   to {
@@ -42,7 +42,7 @@ const itemStyle = {
 
 @keyframes AnimComposite2 {
   from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
       rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
     opacity: 0.1;
   }

package/Basic/components/anim/AnimTransition.vue

@@ -28,19 +28,19 @@ const changeState = () => {
   setTimeout(() => {
     // 状态变更
     state.transform =
-      "translate3d(80px,0px,0) scale3d(2,2,1.0) rotate3d(0, 0, 1, 360deg)";
+      "translate3d(80,0,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)";
+    state.transformTranslate = "translate3d(180,0,0)";
     // 状态变更
     setTimeout(() => {
       state.transform =
-        "translate3d(30px,0px,0) scale3d(0.2,0.2,1.0) rotate3d(0, 0, 1, -360deg)";
+        "translate3d(30,0,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)";
+      state.transformTranslate = "translate3d(-80,0,0)";
     }, 3000);
   }, 3000);
 };

package/Basic/components/div/DivClip.vue

@@ -112,45 +112,6 @@ const clipSize = {
         </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>
 

package/Basic/components/div/DivCssScoped.vue

@@ -7,7 +7,7 @@ defineProps({
 <template>
   <div>
     <div>
-      <div :class="jsvclass" jsv-inherit-class="2">
+      <div :class="jsvclass" data-jsv-extend-class-attr="2">
         Scoped CSS穿透, 此处的属性是Container设进来的.
       </div>
     </div>

package/Basic/components/div/DivLayout.vue

@@ -3,6 +3,7 @@
     <div
       class="content-font"
       :style="{ width: 70, height: 25, backgroundColor: 'rgba(0, 255, 0, 1)' }"
+      @load.jsvoption="onJsvEventCallback"
     >
       坐标未设
     </div>
@@ -51,7 +52,7 @@
 </template>
 
 <script setup>
-import { ref, shallowRef, onUnmounted } from 'vue'
+import { ref, onUnmounted } from 'vue'
 
 // v-show 控制
 let vShow = ref(false);
@@ -63,6 +64,10 @@ onUnmounted(() => {
   clearInterval(loopVShow);
 });
 
+function onJsvEventCallback() {
+  console.error('Event jsview options example of writing, never be called.');
+}
+
 </script>
 
 <style>

package/Basic/components/div/DivRadius.vue

@@ -15,7 +15,7 @@ const gap = 5;
         width: blockSize.width,
         height: blockSize.height,
         backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '10px',
+        borderRadius: 10,
       }"
     >
       各角相同
@@ -27,7 +27,7 @@ const gap = 5;
         width: blockSize.width,
         height: blockSize.height,
         backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '0 10px 20px 30px',
+        borderRadius: '0 10 20 30',
       }"
     >
       各角不同
@@ -39,7 +39,7 @@ const gap = 5;
         width: blockSize.width,
         height: blockSize.height,
         backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '10px',
+        borderRadius: 10,
       }"
     >
       各角相同
@@ -52,7 +52,7 @@ const gap = 5;
         width: blockSize.width,
         height: blockSize.height,
         backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '0 10px 20px 30px',
+        borderRadius: '0 10 20 30',
       }"
     >
       各角不同

package/Basic/components/img/ImageGroup.vue

@@ -1,6 +1,6 @@
 <template>
     <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="图片显示">
+        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="img标签ObjectFit">
              <ImgLayout/>
         </ContentBlock>
     </div>
@@ -23,7 +23,7 @@ export default {
         contentBlockProps() {
             return {
                 colIndex: 0,
-                itemSides: this.itemSides
+                itemSides:{...this.itemSides, height: this.itemSides.height * 2}
             }
         }
     }

package/Basic/components/img/ImgLayout.vue

@@ -1,13 +1,54 @@
 <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)' }">
-            <img :style="{ left: 2, top: 2,
-                width: imageSize.width, height: imageSize.height}"
-                :src="testImgPath"/>
+        <div id="0列0行" :style="{left: coloumWidth * 0, top: tabLineHeight * 0}">
+            <div class="content-font titleStyle"> fill(缩放变形)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'fill' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列0行" :style="{left: coloumWidth * 1, top: tabLineHeight * 0}">
+            <div class="content-font titleStyle">contain</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'contain' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="0列1行" :style="{left: coloumWidth * 0, top: tabLineHeight * 1}">
+            <div class="content-font titleStyle">none</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'none' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列1行" :style="{left: coloumWidth * 1, top: tabLineHeight * 1}">
+            <div class="content-font titleStyle">scale-down</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="0列2行" :style="{left: coloumWidth * 0, top: tabLineHeight * 2}">
+            <div class="content-font titleStyle">cover</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'cover' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列2行" :style="{left: coloumWidth * 1, top: tabLineHeight * 2}">
+            <div class="content-font titleStyle">none(小图)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'none' }"
+                    :src="tinyImgPath"/>
+            </div>
+        </div>
+        <div id="0列3行" :style="{left: coloumWidth * 0, top: tabLineHeight * 3}">
+            <div class="content-font titleStyle">scale-down(小图)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
+                    :src="tinyImgPath"/>
+            </div>
         </div>
     </div>
 </div>
@@ -15,21 +56,22 @@
 
 <script>
 import testImgPath from '../../assets/test.jpg';
+import tinyImgPath from '../../assets/icon.png';
 
 export default {
     computed: {
         testImgPath() {
             return testImgPath;
         },
-        titleHeight() {
-            return 16;
+        tinyImgPath() {
+            return tinyImgPath;
         },
-        imageSize() {
-            return {
-                width: 80,
-                height: 64,
-            }
+        coloumWidth() {
+            return 120;
         },
+        tabLineHeight() {
+            return 76; // imageSize.height + 26
+        }
     }
 }
 
@@ -38,4 +80,26 @@ export default {
 
 <style>
 @import "../FontStyle.css";
+</style>
+
+<style scoped>
+.titleStyle {
+    width: 100;
+    height: 16;
+}
+
+.imageStyle {
+    top: 2;
+    left: 2;
+    width: 100;
+    height: 50;
+}
+
+.frameStyle {
+    top: 16; /* titleHeight */
+    width: 104; /* imageSize.width+4 */
+    height: 54; /* imageSize.height+4 */
+    background-color: rgba(0, 255, 0, 1)
+}
+
 </style>

package/Basic/components/text/TextDirection.vue

@@ -82,23 +82,23 @@ const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
 @import "../FontStyle.css";
 
 .base {
-  top: 25px;
-  width: 180px;
-  height: 30px;
-  line-height: 30px;
+  top: 25;
+  width: 180;
+  height: 30;
+  line-height: 30;
   background-color: rgba(255, 255, 0, 0.5);
   color: #ff0000;
-  font-size: 25px;
+  font-size: 25;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .explain {
-  width: 180px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 15px;
+  width: 180;
+  height: 20;
+  line-height: 20;
+  font-size: 15;
   color: #000000;
 }
 </style>

package/Basic/components/text/TextEmoji.vue

@@ -5,12 +5,17 @@
         width: 300,
         height: 100,
         fontSize: 20,
+        JsvTextEmoji: 1,
       }"
-      jsv_text_emoji="true"
     >
       {{ `style: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭` }}
     </div>
-    <div class="emoji" jsv_text_emoji="true">
+    <div
+      class="emoji"
+      :style="{
+        JsvTextEmoji: 1,
+      }"
+    >
       {{ `class: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭` }}
     </div>
   </div>

package/Basic/components/text/TextFontStyle.vue

@@ -34,8 +34,8 @@ const blockStyle = {
           width: blockStyle.width + 30,
           height: 28,
           fontFamily: '黑体',
-          fontSize: '24px',
-          WebkitTextStroke: '1px rgba(255,255,0,1.0)',
+          fontSize: 24,
+          WebkitTextStroke: '1 rgba(255,255,0,1.0)',
         }"
       >
         abc描边
@@ -62,7 +62,7 @@ const blockStyle = {
 
     <div :style="{ top: 75 }">
       <div class="content-font" :style="{ ...blockStyle }">[其他]</div>
-      <div :style="{ top: 25, width: 130, height: 35, fontSize: '30px' }">
+      <div :style="{ top: 25, width: 130, height: 35, fontSize: 30 }">
         abc字号
       </div>
       <div
@@ -73,7 +73,7 @@ const blockStyle = {
           height: 35,
           color: 'rgba(255, 0, 0, 1)',
           fontFamily: 'sans-serif',
-          fontSize: '30px',
+          fontSize: 30,
           fontStyle: 'italic',
           fontWeight: 'bold',
         }"

package/Basic/components/text/TextGroup1.vue

@@ -38,7 +38,7 @@ const contentBlockProps = {
     <ContentBlock
       :class="contentClass"
       :style="{ top: itemSides.height * 2 }"
-      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 320 } }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
       :index="2"
       title="文字折行"
     >

package/Basic/components/text/TextGroup2.vue

@@ -1,7 +1,7 @@
 <script setup>
 import ContentBlock from "../ContentBlock.vue";
 import TextEmoji from "./TextEmoji.vue";
-import TextDirection from "./TextDirection.vue";
+import TextDirection from "./TextDirection.vue"
 
 const props = defineProps({
   contentClass: String,
@@ -20,7 +20,7 @@ const contentBlockProps = {
       :style="{ top: itemSides.height * 0 }"
       :="contentBlockProps"
       :index="0"
-      title="emoji"
+      title="文字对齐"
     >
       <TextEmoji />
     </ContentBlock>

package/BasicFocusControl/App.vue

@@ -87,8 +87,8 @@ const onKeyDown = (ev) => {
 <style scoped>
 .title {
   text-align: center;
-  font-size: 30px;
-  line-height: 50px;
+  font-size: 30;
+  line-height: 50;
   color: #ffffff;
   left: 100;
   top: 50;

package/BasicFocusControl/components/BaseBlock.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 const props = defineProps({
   name: String,
   style: {
@@ -12,7 +12,7 @@ const props = defineProps({
 });
 
 const fullName = ref("");
-const blockRef = shallowRef(null);
+const blockRef = ref(null);
 const hasFocused = ref(false);
 
 onMounted(() => {

package/BasicFocusControl/components/MainArea.vue

@@ -66,8 +66,8 @@ const onFocus = () => {
 <style scoped>
 .title {
   text-align: center;
-  font-size: 30px;
-  line-height: 50px;
+  font-size: 30;
+  line-height: 50;
   color: #ffffff;
   left: 100;
   top: 50;

package/BasicFocusControl/components/SideBar.vue

@@ -41,8 +41,8 @@ const onKeyDown = (ev) => {
 <style scoped>
 .title {
   text-align: center;
-  font-size: 30px;
-  line-height: 50px;
+  font-size: 30;
+  line-height: 50;
   color: #ffffff;
   left: 100;
   top: 50;

package/Collision/App.vue

@@ -7,21 +7,21 @@
 -->
 <script setup>
 import { createImpactTracer, createImpactCallback } from "jsview";
-import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-const transEle1 = shallowRef(null),
-  transEle2 = shallowRef(null),
-  rotateEle1 = shallowRef(null),
-  rotateEle2 = shallowRef(null),
-  rotateEle3 = shallowRef(null),
-  rotateEle4 = shallowRef(null),
-  scaleEle1 = shallowRef(null),
-  scaleEle2 = shallowRef(null),
-  skewEle1 = shallowRef(null),
-  skewEle2 = shallowRef(null);
+const transEle1 = ref(null),
+  transEle2 = ref(null),
+  rotateEle1 = ref(null),
+  rotateEle2 = ref(null),
+  rotateEle3 = ref(null),
+  rotateEle4 = ref(null),
+  scaleEle1 = ref(null),
+  scaleEle2 = ref(null),
+  skewEle1 = ref(null),
+  skewEle2 = ref(null);
 
 let sensors = [];
 
@@ -164,8 +164,8 @@ onBeforeUnmount(() => {
     <div
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 100,
         top: 20,
@@ -348,7 +348,7 @@ onBeforeUnmount(() => {
     transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
   }
   to {
-    transform: translate3d(-300px, 0, 0) scale3d(1.5, 1.5, 1);
+    transform: translate3d(-300, 0, 0) scale3d(1.5, 1.5, 1);
   }
 }
 
@@ -357,7 +357,7 @@ onBeforeUnmount(() => {
     transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
   }
   to {
-    transform: translate3d(300px, 0, 0) scale3d(1.5, 1.5, 1);
+    transform: translate3d(300, 0, 0) scale3d(1.5, 1.5, 1);
   }
 }
 
@@ -449,4 +449,4 @@ onBeforeUnmount(() => {
     transform-origin: center center;
   }
 }
-</style>
+</style>