@shijiu/jsview-vue 0.9.254 → 0.9.267

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

@@ -1,53 +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 {
-  }
-}
+<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

@@ -1,116 +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>
+<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

@@ -1,15 +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";
+<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

@@ -1,81 +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";
+<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

@@ -1,27 +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>
+<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>