@shijiu/jsview-vue 0.9.490 → 0.9.590

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

@@ -1,94 +1,159 @@
+<script setup>
+import testImgPath from "../../assets/test.jpg";
+
+const titleHeight = 16;
+const imageSize = {
+  width: 80,
+  height: 64,
+};
+
+const clipSize = {
+  width: 50,
+  height: 40,
+};
+</script>
+
 <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 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 :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 :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
+      :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>
+  </div>
 </template>
 
-<script>
-import testImgPath from '../../assets/test.jpg';
-
-export default {
-    computed: {
-        testImgPath() {
-            return testImgPath;
-        },
-        titleHeight() {
-            return 16;
-        },
-        imageSize() {
-            return {
-                width: 80,
-                height: 64,
-            }
-        },
-        clipSize() {
-            return {
-                width: 50,
-                height: 40,
-            }
-        }
-    }
-}
-
-</script>
-
-
 <style>
 @import "../FontStyle.css";
 </style>

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

@@ -1,20 +1,20 @@
+<script setup>
+defineProps({
+  jsvclass: String,
+});
+</script>
+
 <template>
-<div>
   <div>
-    <div :class="jsvclass" jsv-inherit-class="2">
+    <div>
+      <div :class="jsvclass" jsv-inherit-class="2">
         Scoped CSS穿透, 此处的属性是Container设进来的.
+      </div>
     </div>
   </div>
-</div>
 </template>
 
-<script>
-export default {
-  props: {
-    jsvclass: String,
-  },
-}
-</script>
+
 
 <style scoped>
 </style>

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

@@ -1,49 +1,47 @@
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+let timerId = -1;
+let state = reactive({
+  foreColor: "#FF0000",
+  backColor: "#00FF00",
+});
+onMounted(() => {
+  timerId = setInterval(() => {
+    if (state.foreColor == "#00FF00") {
+      state.foreColor = "#FF0000";
+      state.backColor = "#00FF00";
+    } else {
+      state.foreColor = "#00FF00";
+      state.backColor = "#FF0000";
+    }
+  }, 3000);
+});
+onBeforeUnmount(() => {
+  {
+    if (timerId >= 0) {
+      clearInterval(timerId);
+    }
+    timerId = -1;
+  }
+});
+</script>
+
 <template>
-    <div class="block">
-        顶级元素的CSS class中包含变量 (不推荐)
-    </div>
+  <div class="block">顶级元素的CSS class中包含变量 (不推荐)</div>
 
-    <div :style="{left: 70, width: 65, height: 65,
-                  color: state.foreColor,
-                  backgroundColor: state.backColor}">
-        子级元素CSS class中包含变量
-    </div>
+  <div
+    :style="{
+      left: 70,
+      width: 65,
+      height: 65,
+      color: state.foreColor,
+      backgroundColor: state.backColor,
+    }"
+  >
+    子级元素CSS class中包含变量
+  </div>
 </template>
 
-<script>
-import { reactive } from "vue";
-
-export default {
-    data() {
-        return {
-            timerId: -1,
-            state: reactive({
-                foreColor: '#FF0000',
-                backColor: '#00FF00',
-            }),
-        }
-    },
-    mounted() {
-        this.timerId = setInterval(() => {
-            if(this.state.foreColor == '#00FF00') {
-                this.state.foreColor = '#FF0000'
-                this.state.backColor = '#00FF00'
-            } else {
-                this.state.foreColor = '#00FF00'
-                this.state.backColor = '#FF0000'
-            }
-        }, 3000);
-    },
-    beforeUnmount() {
-        if (this.timerId >= 0) {
-            window.clearInterval(this.timerId);
-        }
-        this.timerId = -1;
-    }
-}
-
-</script>
-
 <style scoped>
 .block {
   width: 65;

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

@@ -1,41 +1,47 @@
-<template>
-    <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="Layout(布局定位)">
-             <DivLayout/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*1}" :=contentBlockProps :index=1 title="Background(加载图片)">
-            <DivBackground/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*2}" :="{...contentBlockProps, itemSides: {...itemSides, height:290}}" :index=2 title="Clip(裁剪)">
-            <DivClip/>
-        </ContentBlock>
-    </div>
-</template>
+<script setup>
+import ContentBlock from "../ContentBlock";
+import DivBackground from "./DivBackground";
+import DivClip from "./DivClip";
+import DivLayout from "./DivLayout";
 
-<script>
-import ContentBlock from '../ContentBlock';
-import DivBackground from './DivBackground';
-import DivClip from './DivClip';
-import DivLayout from './DivLayout';
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+</script>
 
-export default {
-    props: {
-        contentClass: String,
-        itemSides: Object 
-    },
-    components: {
-        ContentBlock,
-        DivBackground,
-        DivClip,
-        DivLayout,
-    },
-    computed: {
-        contentBlockProps() {
-            return {
-                colIndex: 0,
-                itemSides: this.itemSides
-            }
-        }
-    }
-}
-</script>
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="0"
+      title="Layout(布局定位)"
+    >
+      <DivLayout />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="contentBlockProps"
+      :index="1"
+      title="Background(加载图片)"
+    >
+      <DivBackground />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 2 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :index="2"
+      title="Clip(裁剪)"
+    >
+      <DivClip />
+    </ContentBlock>
+  </div>
+</template>

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

@@ -1,54 +1,65 @@
-<template>
-    <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=1 title="Radius(实现圆角)">
-            <DivRadius/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*1}" :=contentBlockProps :index=1 title="Transform">
-            <DivTransform/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :=contentBlockProps :index=2 title="CSS Var">
-            <DivCssVar/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*3}" :=contentBlockProps :index=3 title="CSS Scoped">
-            <DivCssScoped jsvclass="block"/>
-        </ContentBlock>
-    </div>
-</template>
+<script setup>
+import ContentBlock from "../ContentBlock";
+import DivCssScoped from "./DivCssScoped";
+import DivCssVar from "./DivCssVar";
+import DivRadius from "./DivRadius";
+import DivTransform from "./DivTransform";
 
-<script>
-import ContentBlock from '../ContentBlock';
-import DivCssScoped from './DivCssScoped';
-import DivCssVar from './DivCssVar';
-import DivRadius from './DivRadius';
-import DivTransform from './DivTransform';
-
-export default {
-    props: {
-        contentClass: String,
-        itemSides: Object 
-    },
-    components: {
-        ContentBlock,
-        DivCssScoped,
-        DivCssVar,
-        DivRadius,
-        DivTransform,
-    },
-    computed: {
-        contentBlockProps() {
-            return {
-                colIndex: 0,
-                itemSides: this.itemSides
-            }
-        }
-    }
-}
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
 </script>
 
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="1"
+      title="Radius(实现圆角)"
+    >
+      <DivRadius />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="contentBlockProps"
+      :index="1"
+      title="Transform"
+    >
+      <DivTransform />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 2 }"
+      :="contentBlockProps"
+      :index="2"
+      title="CSS Var"
+    >
+      <DivCssVar />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 3 }"
+      :="contentBlockProps"
+      :index="3"
+      title="CSS Scoped"
+    >
+      <DivCssScoped jsvclass="block" />
+    </ContentBlock>
+  </div>
+</template>
+
 <style scoped>
 .block {
   width: 80;
   height: 65;
-  color: #00FF00;
+  color: #00ff00;
 }
 </style>

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

@@ -1,10 +1,39 @@
 <template>
-<div id='layout-root'>
-    <div class="content-font" :style="{ width: 70, height: 50, backgroundColor: 'rgba(0, 255, 0, 1)' }">坐标未设</div>
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{ width: 70, height: 50, backgroundColor: 'rgba(0, 255, 0, 1)' }"
+    >
+      坐标未设
+    </div>
     <!-- <div class="content-font" :style="{ top: 0, left: 75, backgroundColor: 'rgba(0, 255, 0, 1)' }">宽高未设</div> -->
-    <div class="content-font" :style="{ top: 55, left: 0, width: 70, height: 50, backgroundColor: 'rgba(0, 200, 0, 1)', visibility: 'hidden' }">(X)不可视</div>
-    <div class="content-font" :style="{ top: 55, left: 75, width: 70, height: 50, backgroundColor: 'rgba(0, 200, 0, 1)', visibility: 'visible' }">可视属性</div>
-</div>
+    <div
+      class="content-font"
+      :style="{
+        top: 55,
+        left: 0,
+        width: 70,
+        height: 50,
+        backgroundColor: 'rgba(0, 200, 0, 1)',
+        visibility: 'hidden',
+      }"
+    >
+      (X)不可视
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 55,
+        left: 75,
+        width: 70,
+        height: 50,
+        backgroundColor: 'rgba(0, 200, 0, 1)',
+        visibility: 'visible',
+      }"
+    >
+      可视属性
+    </div>
+  </div>
 </template>
 
 <style>