song-ui-u/lib/components/image/src/preview.vue.cjs.map

vue3 + js的PC前端组件库

{"version":3,"file":"preview.vue.cjs","sources":["../../../../../packages/components/image/src/preview.vue"],"sourcesContent":["<script setup>\r\nimport { useNamespace } from \"@ui-library/hook\";\r\nimport { XMask, XIcon } from \"@ui-library/components\";\r\nimport { ref, computed } from \"vue\";\r\nimport {\r\n  ZoomIn,\r\n  ZoomOut,\r\n  RotateCw,\r\n  ChevronLeft,\r\n  ChevronRight,\r\n  X,\r\n} from \"song-ui-pro-icon\";\r\n\r\nconst ns = useNamespace(\"image-preview\");\r\nconst visible = defineModel();\r\n\r\ndefineOptions({\r\n  name: \"x-image-preview\",\r\n});\r\n\r\nconst props = defineProps({\r\n  previewSrcList: {\r\n    type: Array,\r\n    default: () => [],\r\n  },\r\n  src: {\r\n    type: String,\r\n    default: \"\",\r\n  },\r\n});\r\n\r\nconst emits = defineEmits([\r\n  \"error\",\r\n  \"load\",\r\n  \"close\",\r\n  \"prev\",\r\n  \"next\",\r\n  \"rotate\",\r\n  \"zoomIn\",\r\n  \"zoomOut\",\r\n]);\r\n\r\nconst scale = ref(1);\r\nconst rotate = ref(0);\r\n\r\nconst handleZoomIn = () => {\r\n  scale.value += 0.2;\r\n  emits(\"zoomIn\", scale.value);\r\n};\r\n\r\nconst handleZoomOut = () => {\r\n  if (scale.value > 0.2) {\r\n    scale.value -= 0.2;\r\n  }\r\n\r\n  emits(\"zoomOut\", scale.value);\r\n};\r\n\r\nconst handleRotate = () => {\r\n  rotate.value += 90;\r\n  emits(\"rotate\", rotate.value);\r\n};\r\n\r\nconst close = () => {\r\n  visible.value = false;\r\n};\r\n\r\nconst previewSrcList = computed(() => {\r\n  return props.previewSrcList;\r\n});\r\n\r\nconst isArr = computed(() => {\r\n  return previewSrcList.value.length > 0;\r\n});\r\n\r\nconst currentIndex = ref(0);\r\n\r\nconst handlePrev = (e) => {\r\n  e.stopPropagation();\r\n\r\n  if (currentIndex.value > 0) {\r\n    currentIndex.value--;\r\n  }\r\n\r\n  emits(\"prev\", currentIndex.value);\r\n};\r\n\r\nconst handleNext = (e) => {\r\n  e.stopPropagation();\r\n\r\n  if (currentIndex.value < previewSrcList.value.length - 1) {\r\n    currentIndex.value++;\r\n  }\r\n\r\n  emits(\"next\", currentIndex.value);\r\n};\r\n\r\nconst srcUrl = computed(() => {\r\n  return isArr.value ? previewSrcList.value[currentIndex.value] : props.src;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <Transition :name=\"ns.b()\">\r\n    <x-mask v-if=\"visible\">\r\n      <div :class=\"ns.b()\">\r\n        <div :class=\"ns.e('close')\" @click=\"close\">\r\n          <XIcon>\r\n            <X />\r\n          </XIcon>\r\n        </div>\r\n\r\n        <div :class=\"ns.e('img')\">\r\n          <div :class=\"ns.e('left')\" @click=\"handlePrev\">\r\n            <XIcon>\r\n              <ChevronLeft />\r\n            </XIcon>\r\n          </div>\r\n\r\n          <img\r\n            :style=\"{\r\n              transform: `scale(${scale}) rotate(${rotate}deg)`,\r\n            }\"\r\n            :src=\"srcUrl\"\r\n            alt=\"\"\r\n            @error=\"(e) => emits('error', e)\"\r\n            @load=\"(e) => emits('load', e)\"\r\n          />\r\n\r\n          <div :class=\"ns.e('right')\" @click=\"handleNext\">\r\n            <XIcon>\r\n              <ChevronRight />\r\n            </XIcon>\r\n          </div>\r\n        </div>\r\n\r\n        <div v-if=\"isArr\" :class=\"ns.e('counter')\">\r\n          {{ currentIndex + 1 }} / {{ previewSrcList.length }}\r\n        </div>\r\n\r\n        <div :class=\"ns.e('menu')\">\r\n          <div :class=\"ns.e('menu-item')\" @click=\"handleZoomIn\">\r\n            <XIcon>\r\n              <ZoomIn />\r\n            </XIcon>\r\n          </div>\r\n          <div :class=\"ns.e('menu-item')\" @click=\"handleZoomOut\">\r\n            <XIcon>\r\n              <ZoomOut />\r\n            </XIcon>\r\n          </div>\r\n          <div :class=\"ns.e('menu-item')\" @click=\"handleRotate\">\r\n            <XIcon>\r\n              <RotateCw />\r\n            </XIcon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </x-mask>\r\n  </Transition>\r\n</template>\r\n"],"names":["useNamespace","_useModel","ref","computed"],"mappings":"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"}