@shijiu/jsview-vue 0.9.246 → 0.9.254

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -1,495 +1,495 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-11-23 09:42:26
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-12-02 15:47:26
- * @Description: file content
--->
-<script>
-import { Forge } from "../../../dom/jsv-forge-define";
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
-import Indicator from "./Indicator.vue";
-import { ref } from "vue";
-
-const VIEW_NUM = 3;
-
-function modToRange(value, mod, start = 0) {
-  let m = value % mod;
-  if (m < start) {
-    m += mod;
-  } else if (m >= start + mod) {
-    m -= mod;
-  }
-  return m;
-}
-
-export default {
-  components: { Indicator, JsvActorMove },
-  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,
-    },
-    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,
-    },
-    swipeType: {
-      type: String,
-      default: "translate",
-    },
-    smoothTranslate: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  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.height - indicatorSize - this.dotGap;
-        } else {
-          top = (this.layoutInfo.height - indicatorSize) / 2;
-        }
-        return {
-          left:
-            this.indicatorPos < 0
-              ? this.layoutInfo.width * 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.width - indicatorSize - this.dotGap;
-        } else {
-          left = (this.layoutInfo.width - indicatorSize) / 2;
-        }
-        return {
-          left,
-          top:
-            this.indicatorPos < 0
-              ? this.layoutInfo.height * 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 + 1, VIEW_NUM);
-    },
-    viewInfoList() {
-      let styleList = [
-        {
-          top: 0,
-          left: 0,
-          width: this.layoutInfo.width,
-          height: this.layoutInfo.height,
-        },
-        {
-          top: 0,
-          left: 0,
-          width: this.layoutInfo.width,
-          height: this.layoutInfo.height,
-        },
-        {
-          top: 0,
-          left: 0,
-          width: this.layoutInfo.width,
-          height: this.layoutInfo.height,
-        },
-      ];
-      switch (this.swipeType) {
-        case "translate":
-          styleList[0].top = this.vertical ? -this.layoutInfo.height : 0;
-          styleList[0].left = this.vertical ? 0 : -this.layoutInfo.width;
-
-          styleList[2].top = this.vertical ? this.layoutInfo.height : 0;
-          styleList[2].left = this.vertical ? 0 : this.layoutInfo.width;
-          break;
-        case "opacity":
-          styleList[0].opaticy = 0;
-          styleList[1].opaticy = 1;
-          styleList[2].opaticy = 0;
-          break;
-        default:
-          break;
-      }
-
-      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(props) {
-    console.log("setup");
-    let controllerList = new Array(VIEW_NUM);
-    if (props.smoothTranslate) {
-      for (let i = 0; i < controllerList.length; i++) {
-        controllerList[i] = new JsvActorMoveControl();
-      }
-    }
-    let preOffset = -1;
-    let offset = ref(0);
-    let focused = ref(false);
-    let timeoutHandler = -1;
-    return {
-      preOffset,
-      offset,
-      focused,
-      timeoutHandler,
-      controllerList,
-    };
-  },
-  watch: {
-    offset(newValue) {
-      this.onChange?.(modToRange(this.firstFrame + newValue, this.totalFrame));
-    },
-  },
-  methods: {
-    stopAutoplay() {
-      clearTimeout(this.timeoutHandler);
-      this.timeoutHandler = -1;
-    },
-    startAutoplay() {
-      if (this.autoplayInterval > 0) {
-        if (this.timeoutHandler > 0) {
-          clearTimeout(this.timeoutHandler);
-        }
-        this.timeoutHandler = setTimeout(() => {
-          this._trigger(1);
-        }, this.autoplayInterval);
-      }
-    },
-    _onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          if (!this.vertical) {
-            this._trigger(-1);
-            return true;
-          }
-          break;
-        case 38:
-          if (this.vertical) {
-            this._trigger(-1);
-            return true;
-          }
-          break;
-        case 39:
-          if (!this.vertical) {
-            this._trigger(1);
-            return true;
-          }
-          break;
-        case 40:
-          if (this.vertical) {
-            this._trigger(1);
-            return true;
-          }
-          break;
-        case 13:
-          this.onClick?.();
-          return true;
-        default:
-          break;
-      }
-
-      return false;
-    },
-    _onAnimationEnd() {
-      if (this.autoplayInterval > 0 && !this.focused) {
-        this.timeoutHandler = setTimeout(() => {
-          this._trigger(1);
-        }, this.autoplayInterval);
-      }
-    },
-    _onFocus() {
-      this.focused = true;
-      this.stopAutoplay();
-      this.onFocus?.();
-    },
-    _onBlur() {
-      this.focused = false;
-      this.startAutoplay();
-      this.onBlur?.();
-    },
-    _startNormalAnimation() {
-      let duration = this.animation.duration;
-      // let easing = this.animation.easing ? this.animation.easing : "linear";
-
-      let curViewAnimation;
-      let preViewAnimation;
-      switch (this.swipeType) {
-        case "translate":
-          curViewAnimation = new Forge.TranslateAnimation(
-            this.vertical ? 0 : this.layoutInfo.width,
-            0,
-            this.vertical ? this.layoutInfo.height : 0,
-            0,
-            duration,
-            null
-          );
-          preViewAnimation = new Forge.TranslateAnimation(
-            this.vertical ? 0 : this.layoutInfo.width,
-            0,
-            this.vertical ? this.layoutInfo.height : 0,
-            0,
-            duration,
-            null
-          );
-          break;
-        case "opacity":
-          break;
-        default:
-          break;
-      }
-      curViewAnimation.SetAnimationListener(
-        new Forge.AnimationListener(null, this._onAnimationEnd, null)
-      );
-      this.$refs["element" + this.currentViewIndex]?.jsvMaskView.StartAnimation(
-        curViewAnimation
-      );
-      this.$refs[
-        "element" + modToRange(this.currentViewIndex - 1, VIEW_NUM)
-      ]?.jsvMaskView.StartAnimation(preViewAnimation);
-    },
-    _startSmoothTranslateAnimation() {
-      let curController = this.controllerList[this.currentViewIndex];
-      let preController =
-        this.controllerList[modToRange(this.currentViewIndex - 1, VIEW_NUM)];
-      if (this.vertical) {
-        let speed = (this.layoutInfo.height / this.animation.duration) * 1000;
-        curController.jumpTo(0, this.layoutInfo.height);
-        curController.moveToY(0, speed, this._onAnimationEnd);
-        preController.jumpTo(0, this.layoutInfo.height);
-        preController.moveToY(0, speed);
-      } else {
-        let speed = (this.layoutInfo.width / this.animation.duration) * 1000;
-        curController.jumpTo(this.layoutInfo.width, 0);
-        curController.moveToX(0, speed, this._onAnimationEnd);
-        preController.jumpTo(this.layoutInfo.width, 0);
-        preController.moveToX(0, speed);
-      }
-    },
-    _startAnimation() {
-      if (this.smoothTranslate) {
-        this._startSmoothTranslateAnimation();
-      } else {
-        this._startNormalAnimation();
-      }
-    },
-    _trigger(direction) {
-      this.preOffset = this.offset;
-      this.offset += direction;
-      this._startAnimation();
-    },
-  },
-  mounted() {
-    if (!this.focused) {
-      this.startAutoplay();
-    }
-  },
-  beforeUnmount() {
-    this.stopAutoplay();
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    :name="name"
-    :onAction="{
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-      onKeyDown: _onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        width: layoutInfo.width,
-        height: layoutInfo.height,
-        overflow: 'hidden',
-      }"
-    >
-      <div
-        :style="{
-          zIndex: 0,
-        }"
-      >
-        <div v-if="smoothTranslate">
-          <jsv-actor-move
-            v-for="(item, index) in viewInfoList"
-            :key="index"
-            :style="item.style"
-            :control="controllerList[index]"
-          >
-            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
-            <div :key="item.dataIndex">
-              <slot
-                name="itemView"
-                :currentIndex="currentDataIndex"
-                :dataIndex="item.dataIndex"
-                :focused="focused"
-              ></slot>
-            </div>
-
-            <!-- <div
-              :style="{
-                width: 50,
-                height: 50,
-                top: 200,
-                fontSize: '30px',
-              }"
-            >
-              {{ index }}
-            </div> -->
-          </jsv-actor-move>
-        </div>
-        <div v-else>
-          <div
-            v-for="(item, index) in viewInfoList"
-            :key="index"
-            :style="item.style"
-            :ref="'element' + index"
-          >
-            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
-            <div :key="item.dataIndex">
-              <slot
-                name="itemView"
-                :currentIndex="currentDataIndex"
-                :dataIndex="item.dataIndex"
-                :focused="focused"
-              ></slot>
-            </div>
-
-            <!-- <div
-            :style="{
-              width: 50,
-              height: 50,
-              top: 200,
-              fontSize: '30px',
-            }"
-          >
-            {{ index + " " + item.dataIndex }}
-          </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-12-02 15:47:26
+ * @Description: file content
+-->
+<script>
+import { Forge } from "../../../dom/jsv-forge-define";
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import Indicator from "./Indicator.vue";
+import { ref } from "vue";
+
+const VIEW_NUM = 3;
+
+function modToRange(value, mod, start = 0) {
+  let m = value % mod;
+  if (m < start) {
+    m += mod;
+  } else if (m >= start + mod) {
+    m -= mod;
+  }
+  return m;
+}
+
+export default {
+  components: { Indicator, JsvActorMove },
+  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,
+    },
+    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,
+    },
+    swipeType: {
+      type: String,
+      default: "translate",
+    },
+    smoothTranslate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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.height - indicatorSize - this.dotGap;
+        } else {
+          top = (this.layoutInfo.height - indicatorSize) / 2;
+        }
+        return {
+          left:
+            this.indicatorPos < 0
+              ? this.layoutInfo.width * 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.width - indicatorSize - this.dotGap;
+        } else {
+          left = (this.layoutInfo.width - indicatorSize) / 2;
+        }
+        return {
+          left,
+          top:
+            this.indicatorPos < 0
+              ? this.layoutInfo.height * 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 + 1, VIEW_NUM);
+    },
+    viewInfoList() {
+      let styleList = [
+        {
+          top: 0,
+          left: 0,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+        {
+          top: 0,
+          left: 0,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+        {
+          top: 0,
+          left: 0,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+      ];
+      switch (this.swipeType) {
+        case "translate":
+          styleList[0].top = this.vertical ? -this.layoutInfo.height : 0;
+          styleList[0].left = this.vertical ? 0 : -this.layoutInfo.width;
+
+          styleList[2].top = this.vertical ? this.layoutInfo.height : 0;
+          styleList[2].left = this.vertical ? 0 : this.layoutInfo.width;
+          break;
+        case "opacity":
+          styleList[0].opaticy = 0;
+          styleList[1].opaticy = 1;
+          styleList[2].opaticy = 0;
+          break;
+        default:
+          break;
+      }
+
+      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(props) {
+    console.log("setup");
+    let controllerList = new Array(VIEW_NUM);
+    if (props.smoothTranslate) {
+      for (let i = 0; i < controllerList.length; i++) {
+        controllerList[i] = new JsvActorMoveControl();
+      }
+    }
+    let preOffset = -1;
+    let offset = ref(0);
+    let focused = ref(false);
+    let timeoutHandler = -1;
+    return {
+      preOffset,
+      offset,
+      focused,
+      timeoutHandler,
+      controllerList,
+    };
+  },
+  watch: {
+    offset(newValue) {
+      this.onChange?.(modToRange(this.firstFrame + newValue, this.totalFrame));
+    },
+  },
+  methods: {
+    stopAutoplay() {
+      clearTimeout(this.timeoutHandler);
+      this.timeoutHandler = -1;
+    },
+    startAutoplay() {
+      if (this.autoplayInterval > 0) {
+        if (this.timeoutHandler > 0) {
+          clearTimeout(this.timeoutHandler);
+        }
+        this.timeoutHandler = setTimeout(() => {
+          this._trigger(1);
+        }, this.autoplayInterval);
+      }
+    },
+    _onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (!this.vertical) {
+            this._trigger(-1);
+            return true;
+          }
+          break;
+        case 38:
+          if (this.vertical) {
+            this._trigger(-1);
+            return true;
+          }
+          break;
+        case 39:
+          if (!this.vertical) {
+            this._trigger(1);
+            return true;
+          }
+          break;
+        case 40:
+          if (this.vertical) {
+            this._trigger(1);
+            return true;
+          }
+          break;
+        case 13:
+          this.onClick?.();
+          return true;
+        default:
+          break;
+      }
+
+      return false;
+    },
+    _onAnimationEnd() {
+      if (this.autoplayInterval > 0 && !this.focused) {
+        this.timeoutHandler = setTimeout(() => {
+          this._trigger(1);
+        }, this.autoplayInterval);
+      }
+    },
+    _onFocus() {
+      this.focused = true;
+      this.stopAutoplay();
+      this.onFocus?.();
+    },
+    _onBlur() {
+      this.focused = false;
+      this.startAutoplay();
+      this.onBlur?.();
+    },
+    _startNormalAnimation() {
+      let duration = this.animation.duration;
+      // let easing = this.animation.easing ? this.animation.easing : "linear";
+
+      let curViewAnimation;
+      let preViewAnimation;
+      switch (this.swipeType) {
+        case "translate":
+          curViewAnimation = new Forge.TranslateAnimation(
+            this.vertical ? 0 : this.layoutInfo.width,
+            0,
+            this.vertical ? this.layoutInfo.height : 0,
+            0,
+            duration,
+            null
+          );
+          preViewAnimation = new Forge.TranslateAnimation(
+            this.vertical ? 0 : this.layoutInfo.width,
+            0,
+            this.vertical ? this.layoutInfo.height : 0,
+            0,
+            duration,
+            null
+          );
+          break;
+        case "opacity":
+          break;
+        default:
+          break;
+      }
+      curViewAnimation.SetAnimationListener(
+        new Forge.AnimationListener(null, this._onAnimationEnd, null)
+      );
+      this.$refs["element" + this.currentViewIndex]?.jsvMaskView.StartAnimation(
+        curViewAnimation
+      );
+      this.$refs[
+        "element" + modToRange(this.currentViewIndex - 1, VIEW_NUM)
+      ]?.jsvMaskView.StartAnimation(preViewAnimation);
+    },
+    _startSmoothTranslateAnimation() {
+      let curController = this.controllerList[this.currentViewIndex];
+      let preController =
+        this.controllerList[modToRange(this.currentViewIndex - 1, VIEW_NUM)];
+      if (this.vertical) {
+        let speed = (this.layoutInfo.height / this.animation.duration) * 1000;
+        curController.jumpTo(0, this.layoutInfo.height);
+        curController.moveToY(0, speed, this._onAnimationEnd);
+        preController.jumpTo(0, this.layoutInfo.height);
+        preController.moveToY(0, speed);
+      } else {
+        let speed = (this.layoutInfo.width / this.animation.duration) * 1000;
+        curController.jumpTo(this.layoutInfo.width, 0);
+        curController.moveToX(0, speed, this._onAnimationEnd);
+        preController.jumpTo(this.layoutInfo.width, 0);
+        preController.moveToX(0, speed);
+      }
+    },
+    _startAnimation() {
+      if (this.smoothTranslate) {
+        this._startSmoothTranslateAnimation();
+      } else {
+        this._startNormalAnimation();
+      }
+    },
+    _trigger(direction) {
+      this.preOffset = this.offset;
+      this.offset += direction;
+      this._startAnimation();
+    },
+  },
+  mounted() {
+    if (!this.focused) {
+      this.startAutoplay();
+    }
+  },
+  beforeUnmount() {
+    this.stopAutoplay();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: layoutInfo.width,
+        height: layoutInfo.height,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          zIndex: 0,
+        }"
+      >
+        <div v-if="smoothTranslate">
+          <jsv-actor-move
+            v-for="(item, index) in viewInfoList"
+            :key="index"
+            :style="item.style"
+            :control="controllerList[index]"
+          >
+            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
+            <div :key="item.dataIndex">
+              <slot
+                name="itemView"
+                :currentIndex="currentDataIndex"
+                :dataIndex="item.dataIndex"
+                :focused="focused"
+              ></slot>
+            </div>
+
+            <!-- <div
+              :style="{
+                width: 50,
+                height: 50,
+                top: 200,
+                fontSize: '30px',
+              }"
+            >
+              {{ index }}
+            </div> -->
+          </jsv-actor-move>
+        </div>
+        <div v-else>
+          <div
+            v-for="(item, index) in viewInfoList"
+            :key="index"
+            :style="item.style"
+            :ref="'element' + index"
+          >
+            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
+            <div :key="item.dataIndex">
+              <slot
+                name="itemView"
+                :currentIndex="currentDataIndex"
+                :dataIndex="item.dataIndex"
+                :focused="focused"
+              ></slot>
+            </div>
+
+            <!-- <div
+            :style="{
+              width: 50,
+              height: 50,
+              top: 200,
+              fontSize: '30px',
+            }"
+          >
+            {{ index + " " + item.dataIndex }}
+          </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>