1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
|
{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n <div ref=\"container\" v-bind=\"containerAttrs\" :class=\"[ns.b(), $attrs.class]\">\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=\"imgAttrs\"\n :src=\"imageSrc\"\n :loading=\"loading\"\n :style=\"imageStyle\"\n :class=\"imageKls\"\n :crossorigin=\"crossorigin\"\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 :show-progress=\"showProgress\"\n :url-list=\"previewSrcList\"\n :scale=\"scale\"\n :crossorigin=\"crossorigin\"\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 <template v-if=\"$slots.progress\" #progress=\"progress\">\n <slot name=\"progress\" v-bind=\"progress\" />\n </template>\n <template #toolbar=\"toolbar\">\n <slot name=\"toolbar\" v-bind=\"toolbar\" />\n </template>\n <template v-if=\"$slots['viewer-error']\" #viewer-error=\"viewerError\">\n <slot name=\"viewer-error\" v-bind=\"viewerError\" />\n </template>\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 { useIntersectionObserver, useThrottleFn } from '@vueuse/core'\nimport { fromPairs } from 'lodash-unified'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n getScrollContainer,\n isArray,\n isClient,\n isElement,\n isString,\n isWindow,\n} from '@element-plus/utils'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElImage',\n inheritAttrs: false,\n})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\n\nconst containerAttrs = computed(() => {\n return fromPairs(\n Object.entries(rawAttrs).filter(\n ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)\n )\n )\n})\n\nconst imgAttrs = useAttrs({\n excludeListeners: true,\n excludeKeys: computed<string[]>(() => {\n return Object.keys(containerAttrs.value)\n }),\n})\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 | undefined>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => 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 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 retu
|