@shijiu/jsview-vue 1.9.731 → 1.9.759

package/samples/Basic/components/anim/AnimKeyframeComposite.vue

@@ -1,52 +0,0 @@
-<script setup>
-const titleStyle = {
-  width: 100,
-  height: 20,
-  textAlign: "center",
-  lineHeight: 20,
-};
-const itemStyle = {
-  top: 20,
-  width: 50,
-  height: 50,
-  backgroundColor: "rgba(255, 0, 0, 1)",
-};
-</script>
-
-<template>
-  <div id="layout-root">
-    <div>
-      <div class="content-font" :style="{ ...titleStyle }">四种变形动画</div>
-      <div :style="{ ...itemStyle, animation: 'AnimComposite1 3s infinite' }" />
-    </div>
-    <div :style="{ left: 100 }">
-      <div class="content-font" :style="{ ...titleStyle }">变形+透明动画</div>
-      <div :style="{ ...itemStyle, animation: 'AnimComposite2 3s infinite' }" />
-    </div>
-  </div>
-</template>
-
-<style>
-@import "../FontStyle.css";
-</style>
-
-<style>
-@keyframes AnimComposite1 {
-  from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
-      rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);
-  }
-  to {
-  }
-}
-
-@keyframes AnimComposite2 {
-  from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
-      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
-    opacity: 0.1;
-  }
-  to {
-  }
-}
-</style>

package/samples/Basic/components/anim/AnimTransition.vue

@@ -1,157 +0,0 @@
-<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/samples/Basic/components/div/DivBackground.vue

@@ -1,44 +0,0 @@
-<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/samples/Basic/components/div/DivClip.vue

@@ -1,159 +0,0 @@
-<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/samples/Basic/components/div/DivCssScoped.vue

@@ -1,20 +0,0 @@
-<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/samples/Basic/components/div/DivCssVar.vue

@@ -1,53 +0,0 @@
-<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/samples/Basic/components/div/DivGroup1.vue

@@ -1,47 +0,0 @@
-<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/samples/Basic/components/div/DivGroup2.vue

@@ -1,65 +0,0 @@
-<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/samples/Basic/components/div/DivLayout.vue

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