@penggy/element-ui 2.4.11 → 2.4.12

package/packages/carousel/src/item.vue

@@ -1,114 +1,114 @@
-<template>
-  <div
-    v-show="ready"
-    class="el-carousel__item"
-    :class="{
-      'is-active': active,
-      'el-carousel__item--card': $parent.type === 'card',
-      'is-in-stage': inStage,
-      'is-hover': hover,
-      'is-animating': animating
-    }"
-    @click="handleItemClick"
-    :style="{
-      msTransform: `translateX(${ translate }px) scale(${ scale })`,
-      webkitTransform: `translateX(${ translate }px) scale(${ scale })`,
-      transform: `translateX(${ translate }px) scale(${ scale })`
-    }">
-    <div
-      v-if="$parent.type === 'card'"
-      v-show="!active"
-      class="el-carousel__mask">
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  const CARD_SCALE = 0.83;
-  export default {
-    name: 'ElCarouselItem',
-
-    props: {
-      name: String,
-      label: {
-        type: [String, Number],
-        default: ''
-      }
-    },
-
-    data() {
-      return {
-        hover: false,
-        translate: 0,
-        scale: 1,
-        active: false,
-        ready: false,
-        inStage: false,
-        animating: false
-      };
-    },
-
-    methods: {
-      processIndex(index, activeIndex, length) {
-        if (activeIndex === 0 && index === length - 1) {
-          return -1;
-        } else if (activeIndex === length - 1 && index === 0) {
-          return length;
-        } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
-          return length + 1;
-        } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
-          return -2;
-        }
-        return index;
-      },
-
-      calculateTranslate(index, activeIndex, parentWidth) {
-        if (this.inStage) {
-          return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
-        } else if (index < activeIndex) {
-          return -(1 + CARD_SCALE) * parentWidth / 4;
-        } else {
-          return (3 + CARD_SCALE) * parentWidth / 4;
-        }
-      },
-
-      translateItem(index, activeIndex, oldIndex) {
-        const parentWidth = this.$parent.$el.offsetWidth;
-        const length = this.$parent.items.length;
-        if (this.$parent.type !== 'card' && oldIndex !== undefined) {
-          this.animating = index === activeIndex || index === oldIndex;
-        }
-        if (index !== activeIndex && length > 2 && this.$parent.loop) {
-          index = this.processIndex(index, activeIndex, length);
-        }
-        if (this.$parent.type === 'card') {
-          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
-          this.active = index === activeIndex;
-          this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
-          this.scale = this.active ? 1 : CARD_SCALE;
-        } else {
-          this.active = index === activeIndex;
-          this.translate = parentWidth * (index - activeIndex);
-        }
-        this.ready = true;
-      },
-
-      handleItemClick() {
-        const parent = this.$parent;
-        if (parent && parent.type === 'card') {
-          const index = parent.items.indexOf(this);
-          parent.setActiveItem(index);
-        }
-      }
-    },
-
-    created() {
-      this.$parent && this.$parent.updateItems();
-    },
-
-    destroyed() {
-      this.$parent && this.$parent.updateItems();
-    }
-  };
-</script>
+<template>
+  <div
+    v-show="ready"
+    class="el-carousel__item"
+    :class="{
+      'is-active': active,
+      'el-carousel__item--card': $parent.type === 'card',
+      'is-in-stage': inStage,
+      'is-hover': hover,
+      'is-animating': animating
+    }"
+    @click="handleItemClick"
+    :style="{
+      msTransform: `translateX(${ translate }px) scale(${ scale })`,
+      webkitTransform: `translateX(${ translate }px) scale(${ scale })`,
+      transform: `translateX(${ translate }px) scale(${ scale })`
+    }">
+    <div
+      v-if="$parent.type === 'card'"
+      v-show="!active"
+      class="el-carousel__mask">
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  const CARD_SCALE = 0.83;
+  export default {
+    name: 'ElCarouselItem',
+
+    props: {
+      name: String,
+      label: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+
+    data() {
+      return {
+        hover: false,
+        translate: 0,
+        scale: 1,
+        active: false,
+        ready: false,
+        inStage: false,
+        animating: false
+      };
+    },
+
+    methods: {
+      processIndex(index, activeIndex, length) {
+        if (activeIndex === 0 && index === length - 1) {
+          return -1;
+        } else if (activeIndex === length - 1 && index === 0) {
+          return length;
+        } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
+          return length + 1;
+        } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
+          return -2;
+        }
+        return index;
+      },
+
+      calculateTranslate(index, activeIndex, parentWidth) {
+        if (this.inStage) {
+          return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+        } else if (index < activeIndex) {
+          return -(1 + CARD_SCALE) * parentWidth / 4;
+        } else {
+          return (3 + CARD_SCALE) * parentWidth / 4;
+        }
+      },
+
+      translateItem(index, activeIndex, oldIndex) {
+        const parentWidth = this.$parent.$el.offsetWidth;
+        const length = this.$parent.items.length;
+        if (this.$parent.type !== 'card' && oldIndex !== undefined) {
+          this.animating = index === activeIndex || index === oldIndex;
+        }
+        if (index !== activeIndex && length > 2 && this.$parent.loop) {
+          index = this.processIndex(index, activeIndex, length);
+        }
+        if (this.$parent.type === 'card') {
+          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
+          this.active = index === activeIndex;
+          this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
+          this.scale = this.active ? 1 : CARD_SCALE;
+        } else {
+          this.active = index === activeIndex;
+          this.translate = parentWidth * (index - activeIndex);
+        }
+        this.ready = true;
+      },
+
+      handleItemClick() {
+        const parent = this.$parent;
+        if (parent && parent.type === 'card') {
+          const index = parent.items.indexOf(this);
+          parent.setActiveItem(index);
+        }
+      }
+    },
+
+    created() {
+      this.$parent && this.$parent.updateItems();
+    },
+
+    destroyed() {
+      this.$parent && this.$parent.updateItems();
+    }
+  };
+</script>