@shijiu/jsview-vue-samples 1.9.747

package/Basic/components/div/DivTransform.vue

@@ -0,0 +1,32 @@
+<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/Basic/components/img/ImageGroup.vue

@@ -0,0 +1,31 @@
+<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/Basic/components/img/ImgLayout.vue

@@ -0,0 +1,41 @@
+<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/Basic/components/panel/Panel1.vue

@@ -0,0 +1,55 @@
+<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/Basic/components/panel/Panel2.vue

@@ -0,0 +1,31 @@
+<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/Basic/components/panel/TitleBar.vue

@@ -0,0 +1,29 @@
+<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/Basic/components/text/TextAlign.vue

@@ -0,0 +1,66 @@
+<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/Basic/components/text/TextEmoji.vue

@@ -0,0 +1,26 @@
+<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/Basic/components/text/TextFontStyle.vue

@@ -0,0 +1,89 @@
+<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/Basic/components/text/TextGroup1.vue

@@ -0,0 +1,49 @@
+<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/Basic/components/text/TextGroup2.vue

@@ -0,0 +1,28 @@
+<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/Basic/components/text/TextOverflow.vue

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