@shijiu/jsview-vue 0.9.502 → 0.9.631

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

@@ -1,56 +1,67 @@
+<script setup>
+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>
+
 <template>
-<div id='layout-root'>
+  <div id="layout-root">
     <div>
-        <div class="content-font" :style="{ ...titleStyle }">Translate3d</div>
-        <div :style="{ ...itemStyle, animation: 'AnimTranslate 3s infinite' }"/>
+      <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 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 :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 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 :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>
+  </div>
 </template>
 
-<script>
-export default {
-  computed: {
-    blockSize() {
-      return {
-        width: 70,
-        height: 70,
-      }
-    },
-    titleStyle() {
-      return {
-        width: 60, height: 20,
-        textAlign: 'center',
-        lineHeight: 20
-      }
-    },
-    itemStyle() {
-      return {
-        top: 20,
-        width: 50, height: 50,
-        backgroundColor: 'rgba(255, 0, 0, 1)'
-      }
-    },
-  }
-}
-</script>
-
 <style>
 @keyframes AnimTranslate {
   from {
@@ -59,7 +70,7 @@ export default {
   to {
     transform: translate3d(0, 0, 0);
   }
-};
+}
 
 @keyframes AnimScale {
   from {

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

@@ -1,39 +1,31 @@
+<script setup>
+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>
+
 <template>
-<div id='layout-root'>
+  <div id="layout-root">
     <div>
-        <div class="content-font" :style="{ ...titleStyle }">四种变形动画</div>
-        <div :style="{ ...itemStyle, animation: 'AnimComposite1 3s infinite' }"/>
+      <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 class="content-font" :style="{ ...titleStyle }">变形+透明动画</div>
+      <div :style="{ ...itemStyle, animation: 'AnimComposite2 3s infinite' }" />
     </div>
-</div>
+  </div>
 </template>
 
-<script>
-export default {
-  computed: {
-    titleStyle() {
-      return {
-        width: 100,
-        height: 20,
-        textAlign: 'center',
-        lineHeight: 20
-      }
-    },
-    itemStyle() {
-      return {
-        top: 20,
-        width: 50,
-        height: 50,
-        backgroundColor: 'rgba(255, 0, 0, 1)'
-      }
-    }
-  }
-}
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>
@@ -41,7 +33,8 @@ export default {
 <style>
 @keyframes AnimComposite1 {
   from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1) rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);
   }
   to {
   }
@@ -49,7 +42,8 @@ export default {
 
 @keyframes AnimComposite2 {
   from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1) rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
     opacity: 0.1;
   }
   to {

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

@@ -1,117 +1,154 @@
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  timeCount: Number,
+});
+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)",
+};
+let timerId = -1;
+const state = reactive({
+  transform: null,
+  transformOrigin: null,
+  transformTranslate: null,
+  transformRotate: null,
+  transformScale: null,
+});
+const 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);
+};
+
+onMounted(() => {
+  changeState();
+  timerId = setInterval(() => {
+    changeState();
+  }, 6000);
+});
+
+onBeforeUnmount(() => {
+  if (timerId >= 0) {
+    clearInterval(timerId);
+  }
+  timerId = -1;
+});
+</script>
+
 <template>
-<div id='layout-root'>
+  <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 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 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
+      :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>
+  </div>
 </template>
 
-<script>
-export default {
-  props: {
-    timeCount: Number,
-  },
-  computed: {
-    titleStyle() {
-      return {
-        width: 100,
-        height: 20,
-        textAlign: 'left',
-        lineHeight: 20
-      }
-    },
-    itemStyle() {
-      return {
-        top: 20,
-        width: 50, height: 50,
-        whiteSpace: 'pre-wrap',
-        backgroundColor: 'rgba(255, 0, 0, 1)'
-      }
-    }
-  },
-  methods: {
-    changeState() {
-      setTimeout(() => {
-        // 状态变更
-        this.state.transform = 'translate3d(80px,0px,0) scale3d(2,2,1.0) rotate3d(0, 0, 1, 360deg)';
-        this.state.transformOrigin = 'center center';
-        this.state.transformScale = 'scale3d(0.2,0.2,1.0)';
-        this.state.transformRotate = 'rotate3d(0, 0, 1.0, 360deg)';
-        this.state.transformTranslate = 'translate3d(180px,0px,0)';
-        // 状态变更
-        setTimeout(() => {
-          this.state.transform = 'translate3d(30px,0px,0) scale3d(0.2,0.2,1.0) rotate3d(0, 0, 1, -360deg)';
-          this.state.transformOrigin = 'center center';
-          this.state.transformScale = 'scale3d(1.2,1.2,1.0)';
-          this.state.transformRotate = 'rotate3d(0, 0, 1.0, -360deg)';
-          this.state.transformTranslate = 'translate3d(-80px,0px,0)';
-        }, 3000);
-      }, 3000);
-    }
-  },
-  data() {
-    return {
-      timerId: -1,
-      state: {
-        transform: null,
-        transformOrigin: null,
-        transformTranslate: null,
-        transformRotate: null,
-        transformScale: null,
-      }
-    }
-  },
-  mounted() {
-    this.changeState();
-    this.timerId = setInterval(() => {
-      this.changeState();
-    }, 6000);
-  },
-  beforeUnmount() {
-    if (this.timerId >= 0) {
-      window.clearInterval(this.timerId);
-    }
-    this.timerId = -1;
-  }
-
-}
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>

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

@@ -1,22 +1,44 @@
+<script setup>
+import iconImgPath from "../../assets/icon.png";
+</script>
+
 <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>
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{
+        width: 180,
+        height: 40,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+      }"
+    >
+      style.backgroundColor
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 50,
+        width: 180,
+        height: 40,
+        backgroundImage: `url(${iconImgPath})`,
+      }"
+    >
+      style.backgroundImage(url)
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 100,
+        width: 180,
+        height: 40,
+        backgroundImage: 'linear-gradient(#FF0000, #00FF00)',
+      }"
+    >
+      style.backgroundImage(gradient)
+    </div>
+  </div>
 </template>
 
-<script>
-import iconImgPath from '../../assets/icon.png';
-
-export default {
-    computed: {
-        iconImgPath() {
-            return iconImgPath
-        }
-    }
-}
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>