You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n <slot v-if=\"hasLoadError\" name=\"error\">\n <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n </slot>\n <template v-else>\n <img\n v-if=\"imageSrc !== undefined\"\n v-bind=\"attrs\"\n :src=\"imageSrc\"\n :loading=\"loading\"\n :style=\"imageStyle\"\n :class=\"imageKls\"\n @click=\"clickHandler\"\n @load=\"handleLoad\"\n @error=\"handleError\"\n />\n <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n <slot name=\"placeholder\">\n <div :class=\"ns.e('placeholder')\" />\n </slot>\n </div>\n </template>\n <template v-if=\"preview\">\n <image-viewer\n v-if=\"showViewer\"\n :z-index=\"zIndex\"\n :initial-index=\"imageIndex\"\n :infinite=\"infinite\"\n :zoom-rate=\"zoomRate\"\n :min-scale=\"minScale\"\n :max-scale=\"maxScale\"\n :url-list=\"previewSrcList\"\n :hide-on-click-modal=\"hideOnClickModal\"\n :teleported=\"previewTeleported\"\n :close-on-press-escape=\"closeOnPressEscape\"\n @close=\"closeViewer\"\n @switch=\"switchViewer\"\n >\n <div v-if=\"$slots.viewer\">\n <slot name=\"viewer\" />\n </div>\n </image-viewer>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n ref,\n useAttrs as useRawAttrs,\n watch,\n} from 'vue'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n getScrollContainer,\n isClient,\n isElement,\n isInContainer,\n isString,\n} from '@element-plus/utils'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\ndefineOptions({\n name: 'ElImage',\n inheritAttrs: false,\n})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nlet prevOverflow = ''\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\nconst attrs = useAttrs()\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | Window>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\nlet stopWheelListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n ns.e('inner'),\n preview.value && ns.e('preview'),\n isLoading.value && ns.is('loading'),\n])\n\nconst containerStyle = computed(() => rawAttrs.style as StyleValue)\n\nconst imageStyle = computed<CSSProperties>(() => {\n const { fit } = props\n if (isClient && fit) {\n return { objectFit: fit }\n }\n return {}\n})\n\nconst preview = computed(() => {\n const { previewSrcList } = props\n return Array.isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n const { previewSrcList, initialIndex } = props\n let previewIndex = initialIndex\n if (initialIndex > previewSrcList.length - 1) {\n previewIndex = 0\n }\n return previewIndex\n})\n\nconst isManual = computed(() => {\n if (props.loading === 'eager') return false\n return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n if (!isClient) return\n\n // reset status\n isLoading.value = true\n hasLoadError.value = false\n imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n isLoading.value = false\n hasLoadError.value = false\n emit('load', event)\n}\n\nfunction handleError(event: Event) {\n isLoading.value = false\n hasLo
|
