@shijiu/jsview-vue 1.9.731 → 1.9.759

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

@@ -1,65 +0,0 @@
-<script setup>
-import iconImgPath from "../../assets/icon.png";
-const blockSize = {
-  width: 65,
-  height: 65,
-};
-const gap = 5;
-</script>
-
-<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>
-
-<style>
-@import "../FontStyle.css";
-</style>

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

@@ -1,32 +0,0 @@
-<script setup>
-import iconImgPath from "../../assets/icon.png";
-
-const blockSize = {
-  width: 65,
-  height: 65,
-};
-
-const gap = 5;
-</script>
-
-<template>
-  <div id="layout-root">
-    <div
-      class="content-font"
-      :style="{
-        left: 10,
-        top: 10,
-        width: blockSize.width,
-        height: blockSize.height,
-        backgroundColor: 'rgba(255, 255, 0, 1)',
-        transform: 'rotate3d(0, 0, 1, 30deg)',
-      }"
-    >
-      rotate3d
-    </div>
-  </div>
-</template>
-
-<style>
-@import "../FontStyle.css";
-</style>

package/samples/Basic/components/img/ImageGroup.vue

@@ -1,31 +0,0 @@
-<template>
-    <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="图片显示">
-             <ImgLayout/>
-        </ContentBlock>
-    </div>
-</template>
-
-<script>
-import ContentBlock from '../ContentBlock.vue';
-import ImgLayout from './ImgLayout.vue';
-
-export default {
-    props: {
-        contentClass: String,
-        itemSides: Object 
-    },
-    components: {
-        ContentBlock,
-        ImgLayout,
-    },
-    computed: {
-        contentBlockProps() {
-            return {
-                colIndex: 0,
-                itemSides: this.itemSides
-            }
-        }
-    }
-}
-</script>

package/samples/Basic/components/img/ImgLayout.vue

@@ -1,41 +0,0 @@
-<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>
-    </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,
-            }
-        },
-    }
-}
-
-</script>
-
-
-<style>
-@import "../FontStyle.css";
-</style>

package/samples/Basic/components/panel/Panel1.vue

@@ -1,55 +0,0 @@
-<script setup>
-import TitleBar from "./TitleBar.vue";
-import DivGroup1 from "../div/DivGroup1.vue";
-import DivGroup2 from "../div/DivGroup2.vue";
-import TextGroup1 from "../text/TextGroup1.vue";
-import TextGroup2 from "../text/TextGroup2.vue";
-import AnimGroup from "../anim/AnimGroup.vue";
-
-const props = defineProps({
-  panelClass: String,
-  itemSides: Object,
-});
-
-const titleData = ["div标签1", "div标签2", "div文本1", "div文本2", "div动画"];
-</script>
-
-<template>
-  <div :class="panelClass">
-    <TitleBar
-      :class="panelClass"
-      :itemSides="itemSides"
-      :titleData="titleData"
-    />
-    <div :class="panelClass" :style="{ top: 20 }">
-      <DivGroup1
-        :style="{ left: itemSides.width * 0 }"
-        :contentClass="panelClass"
-        :itemSides="itemSides"
-      />
-      <DivGroup2
-        :style="{ left: itemSides.width * 1 }"
-        :contentClass="panelClass"
-        :itemSides="itemSides"
-      />
-      <TextGroup1
-        :style="{ left: itemSides.width * 2 }"
-        :contentClass="panelClass"
-        :itemSides="itemSides"
-      />
-      <TextGroup2
-        :style="{ left: itemSides.width * 3 }"
-        :contentClass="panelClass"
-        :itemSides="itemSides"
-      />
-      <AnimGroup
-        :style="{ left: itemSides.width * 4 }"
-        :contentClass="panelClass"
-        :itemSides="itemSides"
-      />
-    </div>
-  </div>
-</template>
-
-<style>
-</style>

package/samples/Basic/components/panel/Panel2.vue

@@ -1,31 +0,0 @@
-<script setup>
-import TitleBar from "./TitleBar.vue";
-import ImageGroup from "../img/ImageGroup.vue";
-
-const props = defineProps({
-  panelClass: String,
-  itemSides: Object,
-});
-
-const titleData = ["img标签"];
-</script>
-
-<template>
-  <div :class="panelClass">
-    <TitleBar
-      :class="panelClass"
-      :itemSides="itemSides"
-      :titleData="titleData"
-    />
-    <div :class="panelClass" :style="{ top: 20 }">
-      <ImageGroup
-        :style="{ left: itemSides.width * 0 }"
-        :contentClass="panelClass"
-        :itemSides="itemSides"
-      />
-    </div>
-  </div>
-</template>
-
-<style>
-</style>

package/samples/Basic/components/panel/TitleBar.vue

@@ -1,29 +0,0 @@
-<script setup>
-const props = defineProps({
-  itemSides: Object,
-  titleData: Array,
-});
-</script>
-
-<template>
-  <div>
-    <template v-for="(title, index) in titleData" :key="index">
-      <div
-        class="title-font item-style"
-        :style="{ ...itemSides, left: itemSides.width * index }"
-      >
-        {{ title }}
-      </div>
-    </template>
-  </div>
-</template>
-
-<style>
-@import "../FontStyle.css";
-</style>
-
-<style scoped>
-.item-style {
-  text-align: center;
-}
-</style>

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

@@ -1,66 +0,0 @@
-<script setup>
-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>
-
-<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>
-
-<style>
-@import "../FontStyle.css";
-</style>

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

@@ -1,26 +0,0 @@
-<template>
-  <div id="layout-root">
-    <div
-      :style="{
-        width: 300,
-        height: 100,
-        fontSize: 20,
-      }"
-      jsv_text_emoji="true"
-    >
-      {{ `style: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭` }}
-    </div>
-    <div class="emoji" jsv_text_emoji="true">
-      {{ `class: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭` }}
-    </div>
-  </div>
-</template>
-
-<style>
-.emoji {
-  top: 100;
-  width: 300;
-  height: 100;
-  font-size: 20;
-}
-</style>

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

@@ -1,89 +0,0 @@
-<script setup>
-const gap = 5;
-const blockStyle = {
-  width: 70,
-  height: 20,
-};
-</script>
-
-<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>
-
-<style>
-@import "../FontStyle.css";
-</style>

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

@@ -1,49 +0,0 @@
-<script setup>
-import ContentBlock from "../ContentBlock.vue";
-import TextAlign from "./TextAlign.vue";
-import TextFontStyle from "./TextFontStyle.vue";
-import TextOverflow from "./TextOverflow.vue";
-
-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="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>
-

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

@@ -1,28 +0,0 @@
-<script setup>
-import ContentBlock from "../ContentBlock.vue";
-import TextEmoji from "./TextEmoji.vue";
-
-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="0"
-      title="文字对齐"
-    >
-      <TextEmoji />
-    </ContentBlock>
-  </div>
-</template>
-

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

@@ -1,110 +0,0 @@
-<script setup>
-const gap = 5;
-const blockSize = {
-  width: 180,
-  height: 35,
-};
-const baseStyle = {
-  width: blockSize.width,
-  height: blockSize.height,
-  backgroundColor: "rgba(255, 255, 0, 0.5)",
-  color: "rgba(255, 0, 0, 1)",
-};
-const multiLineCut =
-  "多行文字（末尾截断)：" +
-  '\n第一行：我末尾有个"\\n"' +
-  "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
-  "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
-const multiLineEllipsis =
-  "多行文字（末尾省略)：" +
-  '\n第一行：我末尾有个"\\n"' +
-  "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
-  "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
-</script>
-
-<template>
-  <div id="layout-root">
-    <div
-      class="content-font"
-      :style="{
-        ...baseStyle,
-        whiteSpace: 'nowrap',
-        textOverflow: 'clip',
-        overflow: 'hidden',
-      }"
-    >
-      1.长文字截断，后面的文字你可能看不到
-    </div>
-
-    <div
-      class="content-font"
-      :style="{
-        ...baseStyle,
-        top: blockSize.height + gap,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-      }"
-    >
-      2.长文字省略，后面的文字你可能看不到
-    </div>
-
-    <div
-      class="content-font"
-      :style="{
-        ...baseStyle,
-        top: (blockSize.height + gap) * 2,
-        whiteSpace: 'pre-wrap',
-        textOverflow: 'clip',
-        overflow: 'hidden',
-      }"
-    >
-      3.长文字折行+截断，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十
-    </div>
-
-    <div
-      class="content-font"
-      :style="{
-        ...baseStyle,
-        top: (blockSize.height + gap) * 3,
-        whiteSpace: 'pre-wrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-      }"
-    >
-      4.长文字折行+省略，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十
-    </div>
-
-    <div
-      class="content-font"
-      :style="{
-        ...baseStyle,
-        top: (blockSize.height + gap) * 4,
-        height: 65,
-        whiteSpace: 'pre-wrap',
-        textOverflow: 'clip',
-        overflow: 'hidden',
-      }"
-    >
-      5.{{ multiLineCut }}
-    </div>
-
-    <div
-      class="content-font"
-      :style="{
-        ...baseStyle,
-        top: (blockSize.height + gap) * 4 + 67,
-        height: 65,
-        whiteSpace: 'pre-wrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-      }"
-    >
-      6.{{ multiLineEllipsis }}
-    </div>
-  </div>
-</template>
-
-<style>
-@import "../FontStyle.css";
-</style>