iov-design 2.15.60 → 2.15.62

package/packages/image/src/main.vue

@@ -1,249 +1,249 @@
-<template>
-  <div class="el-image">
-    <slot v-if="loading" name="placeholder">
-      <div class="el-image__placeholder"></div>
-    </slot>
-    <slot v-else-if="error" name="error">
-      <div class="el-image__error">{{ t('el.image.error') }}</div>
-    </slot>
-    <img
-      v-else
-      class="el-image__inner"
-      v-bind="$attrs"
-      v-on="$listeners"
-      @click="clickHandler"
-      :src="src"
-      :style="imageStyle"
-      :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
-    <template v-if="preview">
-      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
-    </template>
-  </div>
-</template>
-
-<script>
-  import ImageViewer from './image-viewer';
-  import Locale from 'iov-design/src/mixins/locale';
-  import { on, off, getScrollContainer, isInContainer } from 'iov-design/src/utils/dom';
-  import { isString, isHtmlElement } from 'iov-design/src/utils/types';
-  import throttle from 'throttle-debounce/throttle';
-
-  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
-
-  const ObjectFit = {
-    NONE: 'none',
-    CONTAIN: 'contain',
-    COVER: 'cover',
-    FILL: 'fill',
-    SCALE_DOWN: 'scale-down'
-  };
-
-  let prevOverflow = '';
-
-  export default {
-    name: 'ElImage',
-
-    mixins: [Locale],
-    inheritAttrs: false,
-
-    components: {
-      ImageViewer
-    },
-
-    props: {
-      src: String,
-      fit: String,
-      lazy: Boolean,
-      scrollContainer: {},
-      previewSrcList: {
-        type: Array,
-        default: () => []
-      },
-      zIndex: {
-        type: Number,
-        default: 2000
-      },
-      initialIndex: Number
-    },
-
-    data() {
-      return {
-        loading: true,
-        error: false,
-        show: !this.lazy,
-        imageWidth: 0,
-        imageHeight: 0,
-        showViewer: false
-      };
-    },
-
-    computed: {
-      imageStyle() {
-        const { fit } = this;
-        if (!this.$isServer && fit) {
-          return isSupportObjectFit()
-            ? { 'object-fit': fit }
-            : this.getImageStyle(fit);
-        }
-        return {};
-      },
-      alignCenter() {
-        return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
-      },
-      preview() {
-        const { previewSrcList } = this;
-        return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-      },
-      imageIndex() {
-        let previewIndex = 0;
-        const initialIndex = this.initialIndex;
-        if (initialIndex >= 0) {
-          previewIndex = initialIndex;
-          return previewIndex;
-        }
-        const srcIndex = this.previewSrcList.indexOf(this.src);
-        if (srcIndex >= 0) {
-          previewIndex = srcIndex;
-          return previewIndex;
-        }
-        return previewIndex;
-      }
-    },
-
-    watch: {
-      src(val) {
-        this.show && this.loadImage();
-      },
-      show(val) {
-        val && this.loadImage();
-      }
-    },
-
-    mounted() {
-      if (this.lazy) {
-        this.addLazyLoadListener();
-      } else {
-        this.loadImage();
-      }
-    },
-
-    beforeDestroy() {
-      this.lazy && this.removeLazyLoadListener();
-    },
-
-    methods: {
-      loadImage() {
-        if (this.$isServer) return;
-
-        // reset status
-        this.loading = true;
-        this.error = false;
-
-        const img = new Image();
-        img.onload = e => this.handleLoad(e, img);
-        img.onerror = this.handleError.bind(this);
-
-        // bind html attrs
-        // so it can behave consistently
-        Object.keys(this.$attrs)
-          .forEach((key) => {
-            const value = this.$attrs[key];
-            img.setAttribute(key, value);
-          });
-        img.src = this.src;
-      },
-      handleLoad(e, img) {
-        this.imageWidth = img.width;
-        this.imageHeight = img.height;
-        this.loading = false;
-        this.error = false;
-      },
-      handleError(e) {
-        this.loading = false;
-        this.error = true;
-        this.$emit('error', e);
-      },
-      handleLazyLoad() {
-        if (isInContainer(this.$el, this._scrollContainer)) {
-          this.show = true;
-          this.removeLazyLoadListener();
-        }
-      },
-      addLazyLoadListener() {
-        if (this.$isServer) return;
-
-        const { scrollContainer } = this;
-        let _scrollContainer = null;
-
-        if (isHtmlElement(scrollContainer)) {
-          _scrollContainer = scrollContainer;
-        } else if (isString(scrollContainer)) {
-          _scrollContainer = document.querySelector(scrollContainer);
-        } else {
-          _scrollContainer = getScrollContainer(this.$el);
-        }
-
-        if (_scrollContainer) {
-          this._scrollContainer = _scrollContainer;
-          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
-          on(_scrollContainer, 'scroll', this._lazyLoadHandler);
-          this.handleLazyLoad();
-        }
-      },
-      removeLazyLoadListener() {
-        const { _scrollContainer, _lazyLoadHandler } = this;
-
-        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
-
-        off(_scrollContainer, 'scroll', _lazyLoadHandler);
-        this._scrollContainer = null;
-        this._lazyLoadHandler = null;
-      },
-      /**
-       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
-       */
-      getImageStyle(fit) {
-        const { imageWidth, imageHeight } = this;
-        const {
-          clientWidth: containerWidth,
-          clientHeight: containerHeight
-        } = this.$el;
-
-        if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
-
-        const imageAspectRatio = imageWidth / imageHeight;
-        const containerAspectRatio = containerWidth / containerHeight;
-
-        if (fit === ObjectFit.SCALE_DOWN) {
-          const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
-          fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
-        }
-
-        switch (fit) {
-          case ObjectFit.NONE:
-            return { width: 'auto', height: 'auto' };
-          case ObjectFit.CONTAIN:
-            return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
-          case ObjectFit.COVER:
-            return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };
-          default:
-            return {};
-        }
-      },
-      clickHandler() {
-        // don't show viewer when preview is false
-        if (!this.preview) {
-          return;
-        }
-        // prevent body scroll
-        prevOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        this.showViewer = true;
-      },
-      closeViewer() {
-        document.body.style.overflow = prevOverflow;
-        this.showViewer = false;
-      }
-    }
-  };
-</script>
+<template>
+  <div class="el-image">
+    <slot v-if="loading" name="placeholder">
+      <div class="el-image__placeholder"></div>
+    </slot>
+    <slot v-else-if="error" name="error">
+      <div class="el-image__error">{{ t('el.image.error') }}</div>
+    </slot>
+    <img
+      v-else
+      class="el-image__inner"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @click="clickHandler"
+      :src="src"
+      :style="imageStyle"
+      :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
+    <template v-if="preview">
+      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+    </template>
+  </div>
+</template>
+
+<script>
+  import ImageViewer from './image-viewer';
+  import Locale from 'iov-design/src/mixins/locale';
+  import { on, off, getScrollContainer, isInContainer } from 'iov-design/src/utils/dom';
+  import { isString, isHtmlElement } from 'iov-design/src/utils/types';
+  import throttle from 'throttle-debounce/throttle';
+
+  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
+
+  const ObjectFit = {
+    NONE: 'none',
+    CONTAIN: 'contain',
+    COVER: 'cover',
+    FILL: 'fill',
+    SCALE_DOWN: 'scale-down'
+  };
+
+  let prevOverflow = '';
+
+  export default {
+    name: 'ElImage',
+
+    mixins: [Locale],
+    inheritAttrs: false,
+
+    components: {
+      ImageViewer
+    },
+
+    props: {
+      src: String,
+      fit: String,
+      lazy: Boolean,
+      scrollContainer: {},
+      previewSrcList: {
+        type: Array,
+        default: () => []
+      },
+      zIndex: {
+        type: Number,
+        default: 2000
+      },
+      initialIndex: Number
+    },
+
+    data() {
+      return {
+        loading: true,
+        error: false,
+        show: !this.lazy,
+        imageWidth: 0,
+        imageHeight: 0,
+        showViewer: false
+      };
+    },
+
+    computed: {
+      imageStyle() {
+        const { fit } = this;
+        if (!this.$isServer && fit) {
+          return isSupportObjectFit()
+            ? { 'object-fit': fit }
+            : this.getImageStyle(fit);
+        }
+        return {};
+      },
+      alignCenter() {
+        return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
+      },
+      preview() {
+        const { previewSrcList } = this;
+        return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+      },
+      imageIndex() {
+        let previewIndex = 0;
+        const initialIndex = this.initialIndex;
+        if (initialIndex >= 0) {
+          previewIndex = initialIndex;
+          return previewIndex;
+        }
+        const srcIndex = this.previewSrcList.indexOf(this.src);
+        if (srcIndex >= 0) {
+          previewIndex = srcIndex;
+          return previewIndex;
+        }
+        return previewIndex;
+      }
+    },
+
+    watch: {
+      src(val) {
+        this.show && this.loadImage();
+      },
+      show(val) {
+        val && this.loadImage();
+      }
+    },
+
+    mounted() {
+      if (this.lazy) {
+        this.addLazyLoadListener();
+      } else {
+        this.loadImage();
+      }
+    },
+
+    beforeDestroy() {
+      this.lazy && this.removeLazyLoadListener();
+    },
+
+    methods: {
+      loadImage() {
+        if (this.$isServer) return;
+
+        // reset status
+        this.loading = true;
+        this.error = false;
+
+        const img = new Image();
+        img.onload = e => this.handleLoad(e, img);
+        img.onerror = this.handleError.bind(this);
+
+        // bind html attrs
+        // so it can behave consistently
+        Object.keys(this.$attrs)
+          .forEach((key) => {
+            const value = this.$attrs[key];
+            img.setAttribute(key, value);
+          });
+        img.src = this.src;
+      },
+      handleLoad(e, img) {
+        this.imageWidth = img.width;
+        this.imageHeight = img.height;
+        this.loading = false;
+        this.error = false;
+      },
+      handleError(e) {
+        this.loading = false;
+        this.error = true;
+        this.$emit('error', e);
+      },
+      handleLazyLoad() {
+        if (isInContainer(this.$el, this._scrollContainer)) {
+          this.show = true;
+          this.removeLazyLoadListener();
+        }
+      },
+      addLazyLoadListener() {
+        if (this.$isServer) return;
+
+        const { scrollContainer } = this;
+        let _scrollContainer = null;
+
+        if (isHtmlElement(scrollContainer)) {
+          _scrollContainer = scrollContainer;
+        } else if (isString(scrollContainer)) {
+          _scrollContainer = document.querySelector(scrollContainer);
+        } else {
+          _scrollContainer = getScrollContainer(this.$el);
+        }
+
+        if (_scrollContainer) {
+          this._scrollContainer = _scrollContainer;
+          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
+          on(_scrollContainer, 'scroll', this._lazyLoadHandler);
+          this.handleLazyLoad();
+        }
+      },
+      removeLazyLoadListener() {
+        const { _scrollContainer, _lazyLoadHandler } = this;
+
+        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
+
+        off(_scrollContainer, 'scroll', _lazyLoadHandler);
+        this._scrollContainer = null;
+        this._lazyLoadHandler = null;
+      },
+      /**
+       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
+       */
+      getImageStyle(fit) {
+        const { imageWidth, imageHeight } = this;
+        const {
+          clientWidth: containerWidth,
+          clientHeight: containerHeight
+        } = this.$el;
+
+        if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+
+        const imageAspectRatio = imageWidth / imageHeight;
+        const containerAspectRatio = containerWidth / containerHeight;
+
+        if (fit === ObjectFit.SCALE_DOWN) {
+          const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+          fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+        }
+
+        switch (fit) {
+          case ObjectFit.NONE:
+            return { width: 'auto', height: 'auto' };
+          case ObjectFit.CONTAIN:
+            return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
+          case ObjectFit.COVER:
+            return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };
+          default:
+            return {};
+        }
+      },
+      clickHandler() {
+        // don't show viewer when preview is false
+        if (!this.preview) {
+          return;
+        }
+        // prevent body scroll
+        prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        this.showViewer = true;
+      },
+      closeViewer() {
+        document.body.style.overflow = prevOverflow;
+        this.showViewer = false;
+      }
+    }
+  };
+</script>