@shijiu/jsview-vue 0.9.254 → 0.9.267

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -1,404 +1,404 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-11-23 09:42:26
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-29 11:04:37
- * @Description: file content
--->
-<script>
-import Indicator from "./Indicator.vue";
-import { ref } from "vue";
-
-const VIEW_NUM = 4;
-
-function modToRange(value, mod, start = 0) {
-  let m = value % mod;
-  if (m < start) {
-    m += mod;
-  } else if (m >= start + mod) {
-    m -= mod;
-  }
-  return m;
-}
-
-window.modToRange = modToRange;
-
-export default {
-  components: { Indicator },
-  props: {
-    showIndicator: {
-      type: Boolean,
-      default: true,
-    },
-    dotSize: {
-      type: Number,
-      default: 10,
-    },
-    dotGap: {
-      type: Number,
-      default: 10,
-    },
-    indicatorPos: {
-      type: Number,
-      default: -1,
-    },
-    indicatorAlign: {
-      type: String,
-      default: "middle",
-    },
-    totalFrame: {
-      type: Number,
-      require: true,
-    },
-    firstFrame: {
-      type: Number,
-      default: 0,
-    },
-    layoutInfo: {
-      type: Object,
-      require: true,
-    },
-    onClick: {
-      type: Function,
-    },
-    onChange: {
-      type: Function,
-    },
-    scale: {
-      type: Number,
-      default: 1.0,
-    },
-    autoplayInterval: {
-      type: Number,
-      default: 5000,
-    },
-    animation: {
-      type: Object,
-      default() {
-        return {
-          duration: 200,
-          easing: "linear",
-        };
-      },
-    },
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-    name: {
-      type: String,
-    },
-    onFocus: {
-      type: Function,
-    },
-    onBlur: {
-      type: Function,
-    },
-    backgroundImage: {
-      type: String,
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-  computed: {
-    indicatorLayout() {
-      let indicatorSize =
-        this.totalFrame * (this.dotSize + this.dotGap) - this.dotGap;
-      if (this.vertical) {
-        let top;
-        if (this.indicatorAlign === "start") {
-          top = this.dotGap;
-        } else if (this.indicatorAlign === "end") {
-          top = this.layoutInfo.widgetHeight - indicatorSize - this.dotGap;
-        } else {
-          top = (this.layoutInfo.widgetHeight - indicatorSize) / 2;
-        }
-        return {
-          left:
-            this.indicatorPos < 0
-              ? this.layoutInfo.widgetWidth * 0.8
-              : this.indicatorPos,
-          top,
-          zIndex: 1,
-        };
-      } else {
-        let left;
-        if (this.indicatorAlign === "start") {
-          left = this.dotGap;
-        } else if (this.indicatorAlign === "end") {
-          left = this.layoutInfo.widgetWidth - indicatorSize - this.dotGap;
-        } else {
-          left = (this.layoutInfo.widgetWidth - indicatorSize) / 2;
-        }
-        return {
-          left,
-          top:
-            this.indicatorPos < 0
-              ? this.layoutInfo.widgetHeight * 0.8
-              : this.indicatorPos,
-          zIndex: 1,
-        };
-      }
-    },
-    indicatorDotSize() {
-      return this.dotSize + this.dotGap;
-    },
-    currentDataIndex() {
-      return modToRange(this.firstFrame + this.offset, this.totalFrame);
-    },
-    currentViewIndex() {
-      return modToRange(this.offset + (VIEW_NUM / 2 - 1), VIEW_NUM);
-    },
-    viewInfoList() {
-      let layoutInfo = this.layoutInfo;
-      let currentLeft =
-        (this.layoutInfo.widgetWidth - this.layoutInfo.frameWidth) / 2;
-      let currentTop =
-        (this.layoutInfo.widgetHeight - this.layoutInfo.frameHeight) / 2;
-      let duration = this.animation.duration / 1000;
-      let easing = this.animation.easing ? this.animation.easing : "linear";
-      let styleList = [
-        {
-          layout: {
-            top: currentTop + (this.vertical ? -layoutInfo.deltaPos : 0),
-            left: currentLeft + (this.vertical ? 0 : -layoutInfo.deltaPos),
-            zIndex: this.offset - this.preOffset > 0 ? 3 : 1,
-            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
-          },
-          transform: {
-            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
-            width: this.layoutInfo.frameWidth,
-            height: this.layoutInfo.frameHeight,
-            transition: `transform ${duration}s ${easing}`,
-          },
-        } /*左副位*/,
-        {
-          layout: {
-            top: currentTop,
-            left: currentLeft,
-            zIndex: 4,
-            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
-          },
-          transform: {
-            transform: "scale3d(1.0, 1.0, 1.0)",
-            width: this.layoutInfo.frameWidth,
-            height: this.layoutInfo.frameHeight,
-            transition: `transform ${duration}s ${easing}`,
-          },
-        } /*主位*/,
-        {
-          layout: {
-            top: currentTop + (this.vertical ? layoutInfo.deltaPos : 0),
-            left: currentLeft + (this.vertical ? 0 : layoutInfo.deltaPos),
-            zIndex: this.offset - this.preOffset > 0 ? 1 : 3,
-            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
-          },
-          transform: {
-            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
-            width: this.layoutInfo.frameWidth,
-            height: this.layoutInfo.frameHeight,
-            transition: `transform ${duration}s ${easing}`,
-          },
-        } /*右副位*/,
-        {
-          layout: {
-            top: currentTop,
-            left: currentLeft,
-            zIndex: 0,
-            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
-          },
-          transform: {
-            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
-            width: this.layoutInfo.frameWidth,
-            height: this.layoutInfo.frameHeight,
-            transition: `transform ${duration}s ${easing}`,
-          },
-        } /*隐藏位*/,
-      ];
-      let viewList = [];
-      for (let i = 0; i < VIEW_NUM; i++) {
-        viewList.push({
-          dataIndex: modToRange(
-            this.currentDataIndex +
-              modToRange(i - this.currentViewIndex, VIEW_NUM, -1),
-            this.totalFrame
-          ),
-          style: styleList[modToRange(i - this.offset, VIEW_NUM)],
-        });
-      }
-      return viewList;
-    },
-  },
-  setup() {
-    let preOffset = -1;
-    let offset = ref(0);
-    let focused = ref(false);
-    let intervalHandler = -1;
-    return {
-      preOffset,
-      offset,
-      focused,
-      intervalHandler,
-    };
-  },
-  watch: {
-    offset(newValue) {
-      this.onChange?.(modToRange(this.firstFrame + newValue, this.totalFrame));
-    },
-  },
-  methods: {
-    _onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          if (!this.vertical) {
-            this.preOffset = this.offset;
-            this.offset = this.offset - 1;
-            return true;
-          }
-          break;
-        case 38:
-          if (this.vertical) {
-            this.preOffset = this.offset;
-            this.offset = this.offset - 1;
-            return true;
-          }
-          break;
-        case 39:
-          if (!this.vertical) {
-            this.preOffset = this.offset;
-            this.offset = this.offset + 1;
-            return true;
-          }
-          break;
-        case 40:
-          if (this.vertical) {
-            this.preOffset = this.offset;
-            this.offset = this.offset + 1;
-            return true;
-          }
-          break;
-        case 13:
-          this.onClick?.();
-          return true;
-        default:
-          break;
-      }
-
-      return false;
-    },
-    _enableAutoplay() {
-      if (this.autoplayInterval > 0) {
-        this.intervalHandler = setInterval(() => {
-          this.preOffset = this.offset;
-          this.offset = this.offset + 1;
-        }, this.autoplayInterval);
-      }
-    },
-    _onFocus() {
-      this.focused = true;
-      clearInterval(this.intervalHandler);
-      this.onFocus?.();
-    },
-    _onBlur() {
-      this.focused = false;
-      this._enableAutoplay();
-      this.onBlur?.();
-    },
-  },
-  created() {
-    this._enableAutoplay();
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    :name="name"
-    :onAction="{
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-      onKeyDown: _onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        width: layoutInfo.widgetWidth,
-        height: layoutInfo.widgetHeight,
-        overflow: 'hidden',
-      }"
-    >
-      <div :style="{ zIndex: 0 }">
-        <div
-          v-if="backgroundImage || backgroundColor"
-          :style="{
-            width: layoutInfo.widgetWidth,
-            height: layoutInfo.widgetHeight,
-            zIndex: 2,
-            backgroundImage,
-            backgroundColor,
-          }"
-        />
-        <div
-          v-for="(item, index) in viewInfoList"
-          :key="index"
-          :style="item.style.layout"
-        >
-          <div :style="item.style.transform">
-            <slot
-              name="itemView"
-              :currentIndex="currentDataIndex"
-              :dataIndex="item.dataIndex"
-              :focused="focused"
-            ></slot>
-            <!-- <div
-                :style="{
-                  width: 50,
-                  height: 50,
-                  top: 50,
-                  fontSize: '30px',
-                  color: '#FF0000'
-                }"
-              >
-                {{ index }}
-              </div> -->
-          </div>
-        </div>
-      </div>
-
-      <div v-if="showIndicator" :style="indicatorLayout">
-        <indicator
-          :number="totalFrame"
-          :current="currentDataIndex"
-          :itemSize="indicatorDotSize"
-          :vertical="vertical"
-        >
-          <template #current>
-            <slot name="indicatorCur">
-              <div
-                :style="{
-                  width: 10,
-                  height: 10,
-                  backgroundColor: 'rgba(50, 50, 50, 1.0)',
-                  borderRadius: '5px',
-                }"
-              ></div>
-            </slot>
-          </template>
-          <template #normal>
-            <slot name="indicatorNor">
-              <div
-                :style="{
-                  width: 10,
-                  height: 10,
-                  backgroundColor: 'rgba(100, 100, 100, 0.7)',
-                  borderRadius: '5px',
-                }"
-              ></div>
-            </slot>
-          </template>
-        </indicator>
-      </div>
-    </div>
-  </jsv-focus-block>
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-11-23 09:42:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-29 11:04:37
+ * @Description: file content
+-->
+<script>
+import Indicator from "./Indicator.vue";
+import { ref } from "vue";
+
+const VIEW_NUM = 4;
+
+function modToRange(value, mod, start = 0) {
+  let m = value % mod;
+  if (m < start) {
+    m += mod;
+  } else if (m >= start + mod) {
+    m -= mod;
+  }
+  return m;
+}
+
+window.modToRange = modToRange;
+
+export default {
+  components: { Indicator },
+  props: {
+    showIndicator: {
+      type: Boolean,
+      default: true,
+    },
+    dotSize: {
+      type: Number,
+      default: 10,
+    },
+    dotGap: {
+      type: Number,
+      default: 10,
+    },
+    indicatorPos: {
+      type: Number,
+      default: -1,
+    },
+    indicatorAlign: {
+      type: String,
+      default: "middle",
+    },
+    totalFrame: {
+      type: Number,
+      require: true,
+    },
+    firstFrame: {
+      type: Number,
+      default: 0,
+    },
+    layoutInfo: {
+      type: Object,
+      require: true,
+    },
+    onClick: {
+      type: Function,
+    },
+    onChange: {
+      type: Function,
+    },
+    scale: {
+      type: Number,
+      default: 1.0,
+    },
+    autoplayInterval: {
+      type: Number,
+      default: 5000,
+    },
+    animation: {
+      type: Object,
+      default() {
+        return {
+          duration: 200,
+          easing: "linear",
+        };
+      },
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+    },
+    onFocus: {
+      type: Function,
+    },
+    onBlur: {
+      type: Function,
+    },
+    backgroundImage: {
+      type: String,
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+  computed: {
+    indicatorLayout() {
+      let indicatorSize =
+        this.totalFrame * (this.dotSize + this.dotGap) - this.dotGap;
+      if (this.vertical) {
+        let top;
+        if (this.indicatorAlign === "start") {
+          top = this.dotGap;
+        } else if (this.indicatorAlign === "end") {
+          top = this.layoutInfo.widgetHeight - indicatorSize - this.dotGap;
+        } else {
+          top = (this.layoutInfo.widgetHeight - indicatorSize) / 2;
+        }
+        return {
+          left:
+            this.indicatorPos < 0
+              ? this.layoutInfo.widgetWidth * 0.8
+              : this.indicatorPos,
+          top,
+          zIndex: 1,
+        };
+      } else {
+        let left;
+        if (this.indicatorAlign === "start") {
+          left = this.dotGap;
+        } else if (this.indicatorAlign === "end") {
+          left = this.layoutInfo.widgetWidth - indicatorSize - this.dotGap;
+        } else {
+          left = (this.layoutInfo.widgetWidth - indicatorSize) / 2;
+        }
+        return {
+          left,
+          top:
+            this.indicatorPos < 0
+              ? this.layoutInfo.widgetHeight * 0.8
+              : this.indicatorPos,
+          zIndex: 1,
+        };
+      }
+    },
+    indicatorDotSize() {
+      return this.dotSize + this.dotGap;
+    },
+    currentDataIndex() {
+      return modToRange(this.firstFrame + this.offset, this.totalFrame);
+    },
+    currentViewIndex() {
+      return modToRange(this.offset + (VIEW_NUM / 2 - 1), VIEW_NUM);
+    },
+    viewInfoList() {
+      let layoutInfo = this.layoutInfo;
+      let currentLeft =
+        (this.layoutInfo.widgetWidth - this.layoutInfo.frameWidth) / 2;
+      let currentTop =
+        (this.layoutInfo.widgetHeight - this.layoutInfo.frameHeight) / 2;
+      let duration = this.animation.duration / 1000;
+      let easing = this.animation.easing ? this.animation.easing : "linear";
+      let styleList = [
+        {
+          layout: {
+            top: currentTop + (this.vertical ? -layoutInfo.deltaPos : 0),
+            left: currentLeft + (this.vertical ? 0 : -layoutInfo.deltaPos),
+            zIndex: this.offset - this.preOffset > 0 ? 3 : 1,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*左副位*/,
+        {
+          layout: {
+            top: currentTop,
+            left: currentLeft,
+            zIndex: 4,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: "scale3d(1.0, 1.0, 1.0)",
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*主位*/,
+        {
+          layout: {
+            top: currentTop + (this.vertical ? layoutInfo.deltaPos : 0),
+            left: currentLeft + (this.vertical ? 0 : layoutInfo.deltaPos),
+            zIndex: this.offset - this.preOffset > 0 ? 1 : 3,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*右副位*/,
+        {
+          layout: {
+            top: currentTop,
+            left: currentLeft,
+            zIndex: 0,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*隐藏位*/,
+      ];
+      let viewList = [];
+      for (let i = 0; i < VIEW_NUM; i++) {
+        viewList.push({
+          dataIndex: modToRange(
+            this.currentDataIndex +
+              modToRange(i - this.currentViewIndex, VIEW_NUM, -1),
+            this.totalFrame
+          ),
+          style: styleList[modToRange(i - this.offset, VIEW_NUM)],
+        });
+      }
+      return viewList;
+    },
+  },
+  setup() {
+    let preOffset = -1;
+    let offset = ref(0);
+    let focused = ref(false);
+    let intervalHandler = -1;
+    return {
+      preOffset,
+      offset,
+      focused,
+      intervalHandler,
+    };
+  },
+  watch: {
+    offset(newValue) {
+      this.onChange?.(modToRange(this.firstFrame + newValue, this.totalFrame));
+    },
+  },
+  methods: {
+    _onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (!this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset - 1;
+            return true;
+          }
+          break;
+        case 38:
+          if (this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset - 1;
+            return true;
+          }
+          break;
+        case 39:
+          if (!this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset + 1;
+            return true;
+          }
+          break;
+        case 40:
+          if (this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset + 1;
+            return true;
+          }
+          break;
+        case 13:
+          this.onClick?.();
+          return true;
+        default:
+          break;
+      }
+
+      return false;
+    },
+    _enableAutoplay() {
+      if (this.autoplayInterval > 0) {
+        this.intervalHandler = setInterval(() => {
+          this.preOffset = this.offset;
+          this.offset = this.offset + 1;
+        }, this.autoplayInterval);
+      }
+    },
+    _onFocus() {
+      this.focused = true;
+      clearInterval(this.intervalHandler);
+      this.onFocus?.();
+    },
+    _onBlur() {
+      this.focused = false;
+      this._enableAutoplay();
+      this.onBlur?.();
+    },
+  },
+  created() {
+    this._enableAutoplay();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: layoutInfo.widgetWidth,
+        height: layoutInfo.widgetHeight,
+        overflow: 'hidden',
+      }"
+    >
+      <div :style="{ zIndex: 0 }">
+        <div
+          v-if="backgroundImage || backgroundColor"
+          :style="{
+            width: layoutInfo.widgetWidth,
+            height: layoutInfo.widgetHeight,
+            zIndex: 2,
+            backgroundImage,
+            backgroundColor,
+          }"
+        />
+        <div
+          v-for="(item, index) in viewInfoList"
+          :key="index"
+          :style="item.style.layout"
+        >
+          <div :style="item.style.transform">
+            <slot
+              name="itemView"
+              :currentIndex="currentDataIndex"
+              :dataIndex="item.dataIndex"
+              :focused="focused"
+            ></slot>
+            <!-- <div
+                :style="{
+                  width: 50,
+                  height: 50,
+                  top: 50,
+                  fontSize: '30px',
+                  color: '#FF0000'
+                }"
+              >
+                {{ index }}
+              </div> -->
+          </div>
+        </div>
+      </div>
+
+      <div v-if="showIndicator" :style="indicatorLayout">
+        <indicator
+          :number="totalFrame"
+          :current="currentDataIndex"
+          :itemSize="indicatorDotSize"
+          :vertical="vertical"
+        >
+          <template #current>
+            <slot name="indicatorCur">
+              <div
+                :style="{
+                  width: 10,
+                  height: 10,
+                  backgroundColor: 'rgba(50, 50, 50, 1.0)',
+                  borderRadius: '5px',
+                }"
+              ></div>
+            </slot>
+          </template>
+          <template #normal>
+            <slot name="indicatorNor">
+              <div
+                :style="{
+                  width: 10,
+                  height: 10,
+                  backgroundColor: 'rgba(100, 100, 100, 0.7)',
+                  borderRadius: '5px',
+                }"
+              ></div>
+            </slot>
+          </template>
+        </indicator>
+      </div>
+    </div>
+  </jsv-focus-block>
 </template>