@shijiu/jsview-vue-samples 1.9.747

package/Basic/components/anim/AnimTransition.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  timeCount: Number,
+});
+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)",
+};
+let timerId = -1;
+const state = reactive({
+  transform: null,
+  transformOrigin: null,
+  transformTranslate: null,
+  transformRotate: null,
+  transformScale: null,
+});
+const 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);
+};
+
+onMounted(() => {
+  changeState();
+  timerId = setInterval(() => {
+    changeState();
+  }, 6000);
+});
+
+onBeforeUnmount(() => {
+  if (timerId >= 0) {
+    clearInterval(timerId);
+  }
+  timerId = -1;
+});
+</script>
+
+<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>
+
+<style>
+@import "../FontStyle.css";
+</style>
+
+<style>
+</style>

package/Basic/components/div/DivBackground.vue

@@ -0,0 +1,44 @@
+<script setup>
+import iconImgPath from "../../assets/icon.png";
+</script>
+
+<template>
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{
+        width: 180,
+        height: 40,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+      }"
+    >
+      style.backgroundColor
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 50,
+        width: 180,
+        height: 40,
+        backgroundImage: `url(${iconImgPath})`,
+      }"
+    >
+      style.backgroundImage(url)
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 100,
+        width: 180,
+        height: 40,
+        backgroundImage: 'linear-gradient(#FF0000, #00FF00)',
+      }"
+    >
+      style.backgroundImage(gradient)
+    </div>
+  </div>
+</template>
+
+<style>
+@import "../FontStyle.css";
+</style>

package/Basic/components/div/DivClip.vue

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

package/Basic/components/div/DivCssScoped.vue

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

package/Basic/components/div/DivCssVar.vue

@@ -0,0 +1,53 @@
+<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
+    :style="{
+      left: 70,
+      width: 65,
+      height: 65,
+      color: state.foreColor,
+      backgroundColor: state.backColor,
+    }"
+  >
+    子级元素CSS class中包含变量
+  </div>
+</template>
+
+<style scoped>
+.block {
+  width: 65;
+  height: 65;
+  /* word-wrap: break-word; */
+  color: v-bind(state.foreColor);
+  background-color: v-bind(state.backColor);
+}
+</style>

package/Basic/components/div/DivGroup1.vue

@@ -0,0 +1,47 @@
+<script setup>
+import ContentBlock from "../ContentBlock.vue";
+import DivBackground from "./DivBackground.vue";
+import DivClip from "./DivClip.vue";
+import DivLayout from "./DivLayout.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="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/Basic/components/div/DivGroup2.vue

@@ -0,0 +1,65 @@
+<script setup>
+import ContentBlock from "../ContentBlock.vue";
+import DivCssScoped from "./DivCssScoped.vue";
+import DivCssVar from "./DivCssVar.vue";
+import DivRadius from "./DivRadius.vue";
+import DivTransform from "./DivTransform.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="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;
+}
+</style>

package/Basic/components/div/DivLayout.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{ width: 70, height: 25, 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: 30 * 1,
+        left: 0,
+        width: 70,
+        height: 25,
+        backgroundColor: 'rgba(0, 200, 0, 1)',
+        visibility: 'hidden',
+      }"
+    >
+      (X)不可视
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 30 * 1,
+        left: 75,
+        width: 70,
+        height: 25,
+        backgroundColor: 'rgba(0, 200, 0, 1)',
+        visibility: 'visible',
+      }"
+    >
+      可视属性
+    </div>
+    <div
+      v-show="vShow"
+      class="content-font"
+      :style="{
+        top: 30 * 2,
+        left: 75,
+        width: 70,
+        height: 25,
+        backgroundColor: 'rgba(0, 200, 0, 1)',
+        visibility: 'visible',
+      }"
+    >
+      v-show
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef, onUnmounted } from 'vue'
+
+// v-show 控制
+let vShow = ref(false);
+let loopVShow = setInterval(() => {
+  vShow.value = !vShow.value;
+}, 1000);
+
+onUnmounted(() => {
+  clearInterval(loopVShow);
+});
+
+</script>
+
+<style>
+@import "../FontStyle.css";
+</style>

package/Basic/components/div/DivRadius.vue

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