@shijiu/jsview-vue 0.9.246 → 0.9.254

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

@@ -1,50 +1,50 @@
-<template>
-    <div class="block">
-        CSS class中的变量
-    </div>
-
-    <div :style="{left: 70, width: 65, height: 65,
-                  color: state.foreColor,
-                  backgroundColor: state.backColor}">
-        CSS style中的变量
-    </div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import { reactive, onMounted, onBeforeUnmount } from "vue";
-
-const state = reactive({
-    foreColor: '#FF0000',
-    backColor: '#00FF00',
-})
-
-var timerId = -1;
-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) {
-      window.clearInterval(timerId);
-    }
-    timerId = -1;
-});
-</script>
-
-<style scoped>
-.block {
-  width: 65;
-  height: 65;
-  color: v-bind(state.foreColor);
-  background-color: v-bind(state.backColor);
-}
+<template>
+    <div class="block">
+        CSS class中的变量
+    </div>
+
+    <div :style="{left: 70, width: 65, height: 65,
+                  color: state.foreColor,
+                  backgroundColor: state.backColor}">
+        CSS style中的变量
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+
+const state = reactive({
+    foreColor: '#FF0000',
+    backColor: '#00FF00',
+})
+
+var timerId = -1;
+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) {
+      window.clearInterval(timerId);
+    }
+    timerId = -1;
+});
+</script>
+
+<style scoped>
+.block {
+  width: 65;
+  height: 65;
+  color: v-bind(state.foreColor);
+  background-color: v-bind(state.backColor);
+}
 </style>

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

@@ -1,33 +1,33 @@
-<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>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
-import ContentBlock from '../ContentBlock';
-import DivBackground from './DivBackground';
-import DivClip from './DivClip';
-import DivLayout from './DivLayout';
-
-const name = 'DivGroup1';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
+<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>
+/* eslint-disable no-unused-vars */
+import { defineProps } from "vue";
+import ContentBlock from '../ContentBlock';
+import DivBackground from './DivBackground';
+import DivClip from './DivClip';
+import DivLayout from './DivLayout';
+
+const name = 'DivGroup1';
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object 
+})
+
+const contentBlockProps = {
+    colIndex: 0,
+    itemSides: props.itemSides
+};
 </script>

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

@@ -1,41 +1,41 @@
-<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=2 title="CSS Var">
-            <DivCssVar/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :=contentBlockProps :index=3 title="CSS Scoped">
-            <DivCssScoped jsvclass="block"/>
-        </ContentBlock>
-    </div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
-import ContentBlock from '../ContentBlock';
-import DivCssScoped from './DivCssScoped';
-import DivCssVar from './DivCssVar';
-import DivRadius from './DivRadius';
-
-const name = 'DivGroup2';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
-</script>
-
-<style scoped>
-.block {
-  width: 80;
-  height: 65;
-  color: #00FF00;
-}
+<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=2 title="CSS Var">
+            <DivCssVar/>
+        </ContentBlock>
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :=contentBlockProps :index=3 title="CSS Scoped">
+            <DivCssScoped jsvclass="block"/>
+        </ContentBlock>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { defineProps } from "vue";
+import ContentBlock from '../ContentBlock';
+import DivCssScoped from './DivCssScoped';
+import DivCssVar from './DivCssVar';
+import DivRadius from './DivRadius';
+
+const name = 'DivGroup2';
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object 
+})
+
+const contentBlockProps = {
+    colIndex: 0,
+    itemSides: props.itemSides
+};
+</script>
+
+<style scoped>
+.block {
+  width: 80;
+  height: 65;
+  color: #00FF00;
+}
 </style>

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

@@ -1,12 +1,12 @@
-<template>
-<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' }">不可视</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>
-@import "../FontStyle.css";
+<template>
+<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' }">不可视</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>
+@import "../FontStyle.css";
 </style>

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

@@ -1,47 +1,47 @@
-<template>
-<div id='layout-root'>
-    <div class="content-font" :style="{
-        width: blockSize.width, height: blockSize.height,
-        backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '10px' }">
-        各角相同
-    </div>
-    <div class="content-font" :style="{
-        left: blockSize.width+gap,
-        width: blockSize.width, height: blockSize.height,
-        backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '0 10px 20px 30px'}">
-        各角不同
-    </div>
-    <div class="content-font" :style="{
-        top: blockSize.height+gap,
-        width: blockSize.width, height: blockSize.height,
-        backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '10px'}">
-        各角相同
-    </div>
-    <div class="content-font" :style="{ 
-        left: blockSize.width+gap, top: blockSize.height+gap,
-        width: blockSize.width, height: blockSize.height,
-        backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '0 10px 20px 30px'}">
-        各角不同
-    </div>
-</div>;
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import iconImgPath from '../../assets/icon.png';
-
-const blockSize = {
-    width: 65,
-    height: 65,
-};
-
-const gap = 5;
-</script>
-
-<style>
-@import "../FontStyle.css";
+<template>
+<div id='layout-root'>
+    <div class="content-font" :style="{
+        width: blockSize.width, height: blockSize.height,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+        borderRadius: '10px' }">
+        各角相同
+    </div>
+    <div class="content-font" :style="{
+        left: blockSize.width+gap,
+        width: blockSize.width, height: blockSize.height,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+        borderRadius: '0 10px 20px 30px'}">
+        各角不同
+    </div>
+    <div class="content-font" :style="{
+        top: blockSize.height+gap,
+        width: blockSize.width, height: blockSize.height,
+        backgroundImage: `url(${iconImgPath})`,
+        borderRadius: '10px'}">
+        各角相同
+    </div>
+    <div class="content-font" :style="{ 
+        left: blockSize.width+gap, top: blockSize.height+gap,
+        width: blockSize.width, height: blockSize.height,
+        backgroundImage: `url(${iconImgPath})`,
+        borderRadius: '0 10px 20px 30px'}">
+        各角不同
+    </div>
+</div>;
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import iconImgPath from '../../assets/icon.png';
+
+const blockSize = {
+    width: 65,
+    height: 65,
+};
+
+const gap = 5;
+</script>
+
+<style>
+@import "../FontStyle.css";
 </style>

package/samples/Basic/components/text/TextAlign.vue

@@ -1,48 +1,48 @@
-<template>
-<div id='layout-root'>
-    <div class="content-font" :style="{ ...blockStyle,
-        width: blockSize.width*1.5}">
-        左上(默认)
-    </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        top: blockSize.height+5,
-        textAlign: 'center' }">
-        中上
-    </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        left: blockSize.width+5, top: blockSize.height+5,
-        textAlign: 'right' }">
-        右上
-    </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        top: (blockSize.height+5)*2,
-        lineHeight: blockSize.height}">
-        垂直中
-    </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        left: blockSize.width+5, top: (blockSize.height+5)*2,
-        lineHeight: blockSize.height,
-        textAlign: 'center' }">
-        正中
-    </div>
-</div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-const blockSize = {
-    width: 90,
-    height: 40,
-};
-
-const blockStyle = {
-    width: blockSize.width,
-    height: blockSize.height,
-    backgroundColor: 'rgba(255, 255, 0, 0.5)',
-    color: 'rgba(255, 0, 0, 1)',
-};
-</script>
-
-<style>
-@import "../FontStyle.css";
+<template>
+<div id='layout-root'>
+    <div class="content-font" :style="{ ...blockStyle,
+        width: blockSize.width*1.5}">
+        左上(默认)
+    </div>
+    <div class="content-font" :style="{ ...blockStyle,
+        top: blockSize.height+5,
+        textAlign: 'center' }">
+        中上
+    </div>
+    <div class="content-font" :style="{ ...blockStyle,
+        left: blockSize.width+5, top: blockSize.height+5,
+        textAlign: 'right' }">
+        右上
+    </div>
+    <div class="content-font" :style="{ ...blockStyle,
+        top: (blockSize.height+5)*2,
+        lineHeight: blockSize.height}">
+        垂直中
+    </div>
+    <div class="content-font" :style="{ ...blockStyle,
+        left: blockSize.width+5, top: (blockSize.height+5)*2,
+        lineHeight: blockSize.height,
+        textAlign: 'center' }">
+        正中
+    </div>
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+const blockSize = {
+    width: 90,
+    height: 40,
+};
+
+const blockStyle = {
+    width: blockSize.width,
+    height: blockSize.height,
+    backgroundColor: 'rgba(255, 255, 0, 0.5)',
+    color: 'rgba(255, 0, 0, 1)',
+};
+</script>
+
+<style>
+@import "../FontStyle.css";
 </style>

package/samples/Basic/components/text/TextFontStyle.vue

@@ -1,58 +1,58 @@
-<template>
-<div id='layout-root'>
-    <div>
-        <div class="content-font" :style="{ ...blockStyle }">[字体]</div>
-        <div class="content-font" :style="{ ...blockStyle, top: 25,
-            fontFamily: '宋体' }">
-            abc宋体
-        </div>
-        <div class="content-font" :style="{ ...blockStyle, top: 25, left: blockStyle.width+gap,
-            fontFamily: '黑体' }">
-            abc黑体
-        </div>
-        <div :style="{ top: 25, left: (blockStyle.width+gap)*2-10,
-            width: blockStyle.width+30, height: 28,
-            fontFamily: '黑体', fontSize: '24px',
-            WebkitTextStroke: '1px rgba(255,255,0,1.0)'}">
-            abc描边
-        </div>
-
-        <div class="content-font" :style="{ ...blockStyle, top: 50,
-            fontWeight: 'bold' }">
-            abc粗体
-        </div>
-        <div class="content-font" :style="{ ...blockStyle, top: 50, left: blockStyle.width+gap,
-            fontStyle: 'italic' }">
-            abc斜体
-        </div>
-    </div>
-
-    <div :style="{ top: 75 }">
-        <div class="content-font" :style="{ ...blockStyle }">[其他]</div>
-        <div :style="{ top: 25, width: 130, height: 35,
-            fontSize: '30px' }">
-            abc字号
-        </div>
-        <div :style="{ top: 25, left: 110,
-            width: 130, height: 35,
-            color: 'rgba(255, 0, 0, 1)', fontFamily: 'sans-serif',
-            fontSize: '30px', fontStyle: 'italic', fontWeight: 'bold' }">
-            abc综合
-        </div>
-    </div>
-</div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-const gap = 5;
-
-const blockStyle = {
-    width: 70,
-    height: 20
-};
-</script>
-
-<style>
-@import "../FontStyle.css";
+<template>
+<div id='layout-root'>
+    <div>
+        <div class="content-font" :style="{ ...blockStyle }">[字体]</div>
+        <div class="content-font" :style="{ ...blockStyle, top: 25,
+            fontFamily: '宋体' }">
+            abc宋体
+        </div>
+        <div class="content-font" :style="{ ...blockStyle, top: 25, left: blockStyle.width+gap,
+            fontFamily: '黑体' }">
+            abc黑体
+        </div>
+        <div :style="{ top: 25, left: (blockStyle.width+gap)*2-10,
+            width: blockStyle.width+30, height: 28,
+            fontFamily: '黑体', fontSize: '24px',
+            WebkitTextStroke: '1px rgba(255,255,0,1.0)'}">
+            abc描边
+        </div>
+
+        <div class="content-font" :style="{ ...blockStyle, top: 50,
+            fontWeight: 'bold' }">
+            abc粗体
+        </div>
+        <div class="content-font" :style="{ ...blockStyle, top: 50, left: blockStyle.width+gap,
+            fontStyle: 'italic' }">
+            abc斜体
+        </div>
+    </div>
+
+    <div :style="{ top: 75 }">
+        <div class="content-font" :style="{ ...blockStyle }">[其他]</div>
+        <div :style="{ top: 25, width: 130, height: 35,
+            fontSize: '30px' }">
+            abc字号
+        </div>
+        <div :style="{ top: 25, left: 110,
+            width: 130, height: 35,
+            color: 'rgba(255, 0, 0, 1)', fontFamily: 'sans-serif',
+            fontSize: '30px', fontStyle: 'italic', fontWeight: 'bold' }">
+            abc综合
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+const gap = 5;
+
+const blockStyle = {
+    width: 70,
+    height: 20
+};
+</script>
+
+<style>
+@import "../FontStyle.css";
 </style>

package/samples/Basic/components/text/TextGroup.vue

@@ -1,32 +1,32 @@
-<template>
-    <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=0 title="文字对齐">
-             <TextAlign/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*1}" :=contentBlockProps :index=1 title="字体和字号">
-            <TextFontStyle/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :="{...contentBlockProps, itemSides: {...itemSides, height:290}}" :index=2 title="文字折行">
-            <TextOverflow/>
-        </ContentBlock>
-    </div>
-</template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
-import ContentBlock from '../ContentBlock';
-import TextAlign from './TextAlign';
-import TextFontStyle from './TextFontStyle';
-import TextOverflow from './TextOverflow';
-
-const name = 'DivGroup2';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
+<template>
+    <div id='item-root'>
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=0 title="文字对齐">
+             <TextAlign/>
+        </ContentBlock>
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*1}" :=contentBlockProps :index=1 title="字体和字号">
+            <TextFontStyle/>
+        </ContentBlock>
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :="{...contentBlockProps, itemSides: {...itemSides, height:290}}" :index=2 title="文字折行">
+            <TextOverflow/>
+        </ContentBlock>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable no-unused-vars */
+import { defineProps } from "vue";
+import ContentBlock from '../ContentBlock';
+import TextAlign from './TextAlign';
+import TextFontStyle from './TextFontStyle';
+import TextOverflow from './TextOverflow';
+
+const name = 'DivGroup2';
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object 
+})
+const contentBlockProps = {
+    colIndex: 0,
+    itemSides: props.itemSides
+};
 </script>