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.
1 line
18 KiB
1 line
18 KiB
2 years ago
|
{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n <teleport to=\"body\" :disabled=\"!teleported\">\n <transition name=\"viewer-fade\" appear>\n <div\n ref=\"wrapper\"\n :tabindex=\"-1\"\n :class=\"ns.e('wrapper')\"\n :style=\"{ zIndex: computedZIndex }\"\n >\n <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n <!-- CLOSE -->\n <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n <el-icon><Close /></el-icon>\n </span>\n\n <!-- ARROW -->\n <template v-if=\"!isSingle\">\n <span\n :class=\"[\n ns.e('btn'),\n ns.e('prev'),\n ns.is('disabled', !infinite && isFirst),\n ]\"\n @click=\"prev\"\n >\n <el-icon><ArrowLeft /></el-icon>\n </span>\n <span\n :class=\"[\n ns.e('btn'),\n ns.e('next'),\n ns.is('disabled', !infinite && isLast),\n ]\"\n @click=\"next\"\n >\n <el-icon><ArrowRight /></el-icon>\n </span>\n </template>\n <!-- ACTIONS -->\n <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n <div :class=\"ns.e('actions__inner')\">\n <el-icon @click=\"handleActions('zoomOut')\">\n <ZoomOut />\n </el-icon>\n <el-icon @click=\"handleActions('zoomIn')\">\n <ZoomIn />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"toggleMode\">\n <component :is=\"mode.icon\" />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"handleActions('anticlockwise')\">\n <RefreshLeft />\n </el-icon>\n <el-icon @click=\"handleActions('clockwise')\">\n <RefreshRight />\n </el-icon>\n </div>\n </div>\n <!-- CANVAS -->\n <div :class=\"ns.e('canvas')\">\n <img\n v-for=\"(url, i) in urlList\"\n v-show=\"i === activeIndex\"\n :ref=\"(el) => (imgRefs[i] = el as HTMLImageElement)\"\n :key=\"url\"\n :src=\"url\"\n :style=\"imgStyle\"\n :class=\"ns.e('img')\"\n @load=\"handleImgLoad\"\n @error=\"handleImgError\"\n @mousedown=\"handleMouseDown\"\n />\n </div>\n <slot />\n </div>\n </transition>\n </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n effectScope,\n markRaw,\n nextTick,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { isNumber, keysOf } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n ArrowLeft,\n ArrowRight,\n Close,\n FullScreen,\n RefreshLeft,\n RefreshRight,\n ScaleToOriginal,\n ZoomIn,\n ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n CONTAIN: {\n name: 'contain',\n icon: markRaw(FullScreen),\n },\n ORIGINAL: {\n name: 'original',\n icon: markRaw(ScaleToOriginal),\n },\n}\n\ndefineOptions({\n name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs =
|