@shijiu/jsview-vue 2.1.200 → 2.1.339-test.0

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -1,449 +1,452 @@
 <!--
  * 【模块 export 内容】
- * JsvSwiper：Vue高阶组件，图片轮播组件
+ * JsvSwiper3D：Vue高阶组件，图片轮播3D组件
  *      props说明:
- *          showIndicator          {boolean}   是否显示指示点，默认显示
- *          dotSize          {int}   指示点大小，默认为10px
- *          dotGap          {int}   指示点之间间隔，默认为10px
- *          indicatorPos          {int}   指示点位置, 横向时为距顶端的位置，默认为高的80%；纵向时为距左端的位置，默认为宽的80%
- *          indicatorAlign          {String}   指示面板的 align, 值为 start / middle / end，默认为middle
- *          totalFrame          {int}   (必需)item 的个数
- *          firstFrame          {int}   初始 item 的 index，默认为0
- *          layoutInfo          {Object}   (必需)组件的大小 {width: 0, height: 0}
+ *          dispNumber          {int}   (必需) 需要展示的item 的个数
+ *          initIndex          {int}   初始 item 的 index，默认为展示个数的中间项
+ *          layoutInfo          {Object}   (必需)组件的大小 {width: 0, height: 0,left:0,top:0}
  *          onClick          {Function}   点击事件 function () {}
  *          onChange          {Function}   滚动事件 function (index) {}
- *          autoplayInterval          {int}   自动滚动的时间（毫秒），等于0时不自动滚动， 默认为5000
- *          animation          {Object}   滚动动画设置 {duration: 0, easing: "linear"}
- *          vertical          {boolean}   组件是否为纵向的，默认为 false
+ *          duration          {number}   动画时长 单位：秒
  *          name          {String}   组件获得焦点的 name
  *          onFocus          {Function}   获得焦点的回调 
  *          onBlur          {Function}   失去焦点的回调
- *          swipeType          {String}   切换方式，目前只支持 translate，之后可能会添加 opacity 等方式
- *          smoothTranslate          {boolean}   平滑模式动画开关
- *          backgroundImage          {String}   组件背景图
- *          backgroundColor          {String}   组件背景颜色
- *          scale          {float}   当前 item 的放大倍数, 默认为1
- *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
+ *          ItemArray       {Array}     (必需) 总数组{要有image属性}
+ *          sideScale         {float}   边缘缩小倍数
+ *          initItemStyle    {Object}   (必需)中间最大项的style{width,height}
 -->
 
-<script>
-import Indicator from "./Indicator.vue";
-import { ref } from "vue";
-import JsvVisibleSensor from "jsview/utils/JsViewVueWidget/JsvVisibleSensor";
-
-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, JsvVisibleSensor },
-  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,
-    },
-    reverseSwipe: {
-      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.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 + this.reverseSwipe ? -1 : 1;
-        }, this.autoplayInterval);
-      }
-    },
-    _stopAutoPlay() {
-      clearInterval(this.intervalHandler);
-      this.intervalHandler = -1;
-    },
-    _onFocus() {
-      this.focused = true;
-      clearInterval(this.intervalHandler);
-      this.onFocus?.();
-    },
-    _onBlur() {
-      this.focused = false;
-      this._enableAutoplay();
-      this.onBlur?.();
-    },
-    onBeVisible(old_h, new_h, old_v, new_v) {
-      if ((old_h && !new_h) || (old_v && !new_h)) {
-        this._stopAutoPlay();
-      } else if ((!old_h && new_h) || (!old_v && new_h)) {
-        this._enableAutoplay();
-      }
-    },
-  },
-  created() {
-    this._enableAutoplay();
-  },
-};
-</script>
-
 <template>
-  <jsv-visible-sensor
-    :horizonShown="0.2"
-    :verticalShown="0.2"
-    :width="layoutInfo.widgetWidth"
-    :height="layoutInfo.widgetHeight"
-    :enable="true"
-    :callback="onBeVisible"
-  ></jsv-visible-sensor>
-  <jsv-focus-block
-    :name="name"
-    :onAction="{
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-      onKeyDown: _onKeyDown,
-    }"
-  >
+  <jsv-focus-block :onAction="onActionObj" :name="props.name">
+    <!-- 可视区域 -->
     <div
       :style="{
-        width: layoutInfo.widgetWidth,
-        height: layoutInfo.widgetHeight,
         overflow: 'hidden',
+        width: props.layoutInfo.width,
+        height: props.layoutInfo.height,
+        left: props.layoutInfo.left,
+        top: props.layoutInfo.top,
       }"
     >
-      <div :style="{ zIndex: 0 }">
-        <div
-          v-if="backgroundImage || backgroundColor"
-          :style="{
-            width: layoutInfo.widgetWidth,
-            height: layoutInfo.widgetHeight,
-            zIndex: 2,
-            backgroundImage,
-            backgroundColor,
-          }"
-        />
+      <div
+        :style="{
+          width: items.length * space,
+          height: props.layoutInfo.height,
+          left: 0,
+        }"
+      >
+        <!-- 平移 -->
         <div
-          v-for="(item, index) in viewInfoList"
-          :key="index"
-          :style="item.style.layout"
+          v-for="(item, index) in items"
+          :key="item.image + `${index}`"
+          :style="getItemStyle(index)"
         >
-          <div :style="item.style.transform">
+          <!-- 缩放 -->
+          <div :style="scaleItemStyle(index)">
             <slot
               name="itemView"
-              :currentIndex="currentDataIndex"
               :dataIndex="item.dataIndex"
-              :focused="focused"
+              :item="item"
             ></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>
+</template>
+
+<script setup>
+import { reactive, shallowRef } from "vue";
+import { getKeyFramesGroup } from '../../JsViewVueTools/JsvDynamicKeyFrames.js'
+
+const props = defineProps({
+  dispNumber: { type: Number, require: true },
+  initIndex: { type: Number },
+  layoutInfo: { type: Object, require: true },
+  duration: { type: Number, require: true },
+  sideScale: { type: Number, require: true },
+  name: { type: String, require: true },
+  ItemArray: { type: Array, require: true },
+  initItemStyle: { type: Object, require: true },
+  onFocus: { type: Function },
+  onBlur: { type: Function },
+  onClick: { type: Function },
+  onChange: { type: Function },
+});
+let currentId;
+let preFocusedIdx;
+if (props.initIndex == undefined) {
+  currentId = Math.floor(props.dispNumber / 2);
+} else {
+  currentId = props.initIndex;
+}
+
+//处理原数组
+let items = reactive(new Array(props.dispNumber + 2));
+let allItems = [];
+
+let length = props.ItemArray.length;
+
+if (length < props.dispNumber) {
+  throw new Error("数量不足");
+} else {
+  for (let i = 0; i < props.ItemArray.length; i++) {
+    allItems.push({
+      ...props.ItemArray[i],
+      dataIndex: i,
+    });
+  }
+}
+
+//计算间距
+let space = shallowRef(0);
+
+//处理原数组
+//如果item数量等于总数量
+let direction = "left";
+let focusedIdx = currentId;
+let prevNumber = Math.floor(props.dispNumber / 2) + 1;
+const move1 = () => {
+  for (let i = 0; i < props.dispNumber + 2; i++) {
+    let itemIdx = focusedIdx - prevNumber + i;
+    if (itemIdx < 0) {
+      itemIdx += props.ItemArray.length;
+    } else if (itemIdx >= props.ItemArray.length) {
+      itemIdx -= props.ItemArray.length;
+    }
+    items[i] = allItems[itemIdx];
+  }
+};
+
+move1();
+
+let posAni = shallowRef("");
+let scaleAni = shallowRef("");
+let currentAni = shallowRef("");
+let pos0Ani = shallowRef("");
+let leftArray = reactive([]);
+
+let midIndex = Math.floor(items.length / 2);
+for (let i = 0; i < items.length; i++) {
+  leftArray.push({
+    index: null,
+    width: null,
+    left: null,
+  });
+}
+//计算每个样式
+for (let index = 0; index < items.length; index++) {
+  let currentIndex = Math.abs(index - Math.floor(items.length / 2));
+  let scale = 1 - currentIndex * props.sideScale;
+  const width = props.initItemStyle.width * scale;
+  if (index == items.length - 2) {
+    let startPosX = props.layoutInfo.width / 2;
+    let endPosX = props.layoutInfo.width - width / 2;
+    space.value = (endPosX - startPosX) / ((props.dispNumber - 1) / 2);
+  }
+  leftArray[index] = { index, width };
+}
+
+//中间 left
+for (let index = 0; index < items.length; index++) {
+  let startPosX = props.layoutInfo.width / 2;
+  if (index == Math.floor(items.length / 2)) {
+    leftArray[index].left = startPosX - leftArray[index].width / 2;
+  }
+}
+//左边 left
+for (let i = midIndex - 1; i >= 0; i--) {
+  let startPosX = leftArray[i + 1].left + leftArray[i + 1].width / 2;
+  leftArray[i].left = startPosX - space.value - leftArray[i].width / 2;
+}
+//右边 left
+for (let i = midIndex + 1; i < items.length; i++) {
+  let startPosX = leftArray[i - 1].left + leftArray[i - 1].width / 2;
+  leftArray[i].left = startPosX + space.value - leftArray[i].width / 2;
+}
+
+const getItemStyle = (index) => {
+  let currentIndex;
+  let scale;
+  let zIndex;
+  let top;
+  let width;
+  let height;
+  let left;
+  currentIndex = Math.abs(index - Math.floor(items.length / 2));
+  scale = 1 - currentIndex * props.sideScale;
+  zIndex = items.length - currentIndex;
+  top = (props.initItemStyle.height - props.initItemStyle.height * scale) / 2;
+  width = leftArray[index].width;
+  height = props.initItemStyle.height * scale;
+  if (index == items.length - 2) {
+    let startPosX = props.layoutInfo.width / 2;
+    let endPosX = props.layoutInfo.width - width / 2;
+    space.value = (endPosX - startPosX) / ((props.dispNumber - 1) / 2);
+  }
+  left = leftArray[index].left;
+  items[index].top = top;
+  items[index].width = width;
+  items[index].height = height;
+  return {
+    zIndex,
+    left,
+    top,
+    width,
+    height,
+    animation: posAni.value,
+  };
+};
+
+const scaleItemStyle = (index) => {
+  const currentIndex = Math.abs(index - Math.floor(items.length / 2));
+  const scale = 1 - currentIndex * props.sideScale; // 根据需要调整缩放比例
+  const backgroundImage = items[index].image;
+  const width = props.initItemStyle.width * scale;
+  const height = props.initItemStyle.height * scale;
+
+  items[index].backgroundImage = backgroundImage;
+  if (direction == "left") {
+    return {
+      width,
+      height,
+      animation:
+        index > (items.length - 1) / 2 ? scaleAni.value : currentAni.value,
+    };
+  } else {
+    return {
+      width,
+      height,
+      animation:
+        index < (items.length - 1) / 2 ? scaleAni.value : currentAni.value,
+    };
+  }
+};
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      direction = "left";
+      if (posAni.value == "") {
+        posAni.value = `slideToLeftA ${props.duration}s`;
+      } else if (posAni.value == `slideToLeftA ${props.duration}s`) {
+        posAni.value = `slideToLeftB ${props.duration}s`;
+      } else {
+        posAni.value = `slideToLeftA ${props.duration}s`;
+      }
+
+      if (pos0Ani.value == "") {
+        pos0Ani.value = `slideToLeft0A ${props.duration}s`;
+      } else if (pos0Ani.value == `slideToLeft0A ${props.duration}s`) {
+        pos0Ani.value = `slideToLeft0B ${props.duration}s`;
+      } else {
+        pos0Ani.value = `slideToLeft0A ${props.duration}s`;
+      }
+      preFocusedIdx = focusedIdx;
+      focusedIdx--;
+      if (focusedIdx < 0) {
+        focusedIdx = props.ItemArray.length - 1;
+      } else if (focusedIdx >= props.ItemArray.length) {
+        focusedIdx = 0;
+      }
+
+      move1();
+      scaleAniManager();
+      props.onChange?.(preFocusedIdx, focusedIdx);
+      break;
+    case 39:
+      direction = "right";
+      if (posAni.value == "") {
+        posAni.value = `slideToRightA ${props.duration}s`;
+      } else if (posAni.value == `slideToRightA ${props.duration}s`) {
+        posAni.value = `slideToRightB ${props.duration}s`;
+      } else {
+        posAni.value = `slideToRightA ${props.duration}s`;
+      }
+
+      if (pos0Ani.value == "") {
+        pos0Ani.value = `slideToRight0A ${props.duration}s`;
+      } else if (pos0Ani.value == `slideToRight0A ${props.duration}s`) {
+        pos0Ani.value = `slideToRight0B ${props.duration}s`;
+      } else {
+        pos0Ani.value = `slideToRight0A ${props.duration}s`;
+      }
+      preFocusedIdx = focusedIdx;
+      focusedIdx++;
+      if (focusedIdx < 0) {
+        focusedIdx = props.ItemArray.length - 1;
+      } else if (focusedIdx >= props.ItemArray.length) {
+        focusedIdx = 0;
+      }
+      move1();
+      scaleAniManager();
+      props.onChange?.(preFocusedIdx, focusedIdx);
+      break;
+    case 13:
+      props.onClick?.(focusedIdx);
+    default:
+      break;
+  }
+};
+
+//左边动画
+let styleShell = getKeyFramesGroup();
+let slideToLeftA = `@keyframes slideToLeftA {
+            from {
+              transform: translate3d(${-150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+          }`;
+
+styleShell.insertRule(slideToLeftA);
+//左边动画B
+let slideToLeftB = `@keyframes slideToLeftB {
+            from {
+              transform: translate3d(${-150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+          }`;
+
+styleShell.insertRule(slideToLeftB);
+
+//右边动画A
+let slideToRightA = `@keyframes slideToRightA {
+            from {
+              transform: translate3d(${150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+          }`;
+
+styleShell.insertRule(slideToRightA);
+//右边动画B
+let slideToRightB = `@keyframes slideToRightB {
+            from {
+              transform: translate3d(${150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+          }`;
+
+styleShell.insertRule(slideToRightB);
+//缩小动画A
+let lowerA = `@keyframes lowerA {
+            from {
+              transform: scale3d(1.1, 1.1, 1);
+            }
+            to {
+              transform: scale3d(1, 1, 1);
+            }
+          }`;
+styleShell.insertRule(lowerA);
+//缩小动画B
+let lowerB = `@keyframes lowerB {
+            from {
+              transform: scale3d(1.1, 1.1, 1);
+            }
+            to {
+              transform: scale3d(1, 1, 1);
+            }
+          }`;
+styleShell.insertRule(lowerB);
+//放大动画A
+let biggerA = `@keyframes biggerA {
+            from {
+              transform: scale3d(${1 / 1.1},${1 / 1.1} , 1);
+            }
+            to {
+              transform: scale3d(1, 1, 1);
+            }
+          }`;
+styleShell.insertRule(biggerA);
+//放大动画B
+let biggerB = `@keyframes biggerB {
+            from {
+              transform: scale3d(${1 / 1.1},${1 / 1.1} , 1);
+            }
+            to {
+              transform: scale3d(1, 1, 1);
+            }
+          }`;
+styleShell.insertRule(biggerB);
+
+//第0项左移动画A
+let slideToLeft0A = `@keyframes slideToLeft0A {
+      from {
+              transform: translate3d(${150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+    }`;
+styleShell.insertRule(slideToLeft0A);
+//第0项左移动画B
+let slideToLeft0B = `@keyframes slideToLeft0B {
+      from {
+              transform: translate3d(${150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+    }`;
+styleShell.insertRule(slideToLeft0B);
+
+//页面最后一项右移动画A
+let slideToRight0A = `@keyframes slideToRight0A {
+      from {
+              transform: translate3d(${-150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+    }`;
+styleShell.insertRule(slideToRight0A);
+
+//页面最后一项右移动画B
+let slideToRight0B = `@keyframes slideToRight0B {
+      from {
+              transform: translate3d(${-150}, 0, 0);
+            }
+            to {
+              transform: translate3d(0, 0, 0);
+            }
+    }`;
+styleShell.insertRule(slideToRight0B);
+
+//缩放动画管理
+const scaleAniManager = () => {
+  if (currentAni.value == "") {
+    currentAni.value = `biggerA ${props.duration}s`;
+  } else if (currentAni.value == `biggerA ${props.duration}s`) {
+    currentAni.value = `biggerB ${props.duration}s`;
+  } else if (currentAni.value == `biggerB ${props.duration}s`) {
+    currentAni.value = `biggerA ${props.duration}s`;
+  } else {
+    currentAni.value == `biggerA ${props.duration}s`;
+  }
+
+  if (scaleAni.value == "") {
+    scaleAni.value = `lowerA ${props.duration}s`;
+  } else if (scaleAni.value == `lowerA ${props.duration}s`) {
+    scaleAni.value = `lowerB ${props.duration}s`;
+  } else if (scaleAni.value == `lowerB ${props.duration}s`) {
+    scaleAni.value = `lowerA ${props.duration}s`;
+  } else {
+    scaleAni.value == `lowerA ${props.duration}s`;
+  }
+};
+
+const onActionObj = {
+  onKeyDown,
+  onFocus: props.onFocus,
+  onBlur: props.onBlur,
+};
+</script>
+
+<style scoped></style>