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

vue3 + js的PC前端组件库

{"version":3,"file":"index.vue.cjs","sources":["../../../../../packages/components/image/src/index.vue"],"sourcesContent":["<script setup>\nimport { computed, ref } from \"vue\";\nimport { useNamespace, useStyle } from \"@ui-library/hook\";\nimport { XIcon } from \"@ui-library/components\";\nimport { Eye } from \"song-ui-pro-icon\";\nimport xPreview from \"./preview.vue\";\n\nconst ns = useNamespace(\"image\");\n\ndefineOptions({\n  name: \"x-image\",\n});\n\n/** props */\nconst props = defineProps({\n  size: {\n    type: String,\n    default: \"\",\n  },\n  src: {\n    type: String,\n    default: \"\",\n  },\n  fit: {\n    type: String,\n    default: \"\",\n  },\n  fallbackSrc: {\n    type: String,\n    default: \"\",\n  },\n  alt: {\n    type: String,\n    default: \"\",\n  },\n  width: {\n    type: [Number, String],\n    default: 100,\n  },\n  height: {\n    type: [Number, String],\n    default: 100,\n  },\n  radius: {\n    type: [Number, String],\n    default: 0,\n  },\n  errorText: {\n    type: String,\n    default: \"加载失败\",\n  },\n  isZoomed: Boolean,\n  preview: Boolean,\n  previewSrcList: {\n    type: Array,\n    default: () => [],\n  },\n  previewTextColor: {\n    type: String,\n    default: \"#fff\",\n  },\n});\nconst emit = defineEmits([\n  \"error\",\n  \"load\",\n  \"close\",\n  \"prev\",\n  \"next\",\n  \"rotate\",\n  \"zoomIn\",\n  \"zoomOut\",\n]);\n\nconst visible = ref(false);\n\nconst srcUrl = computed({\n  get() {\n    return props.src || props.previewSrcList[0] || \"\";\n  },\n  set(value) {\n    srcUrl.value = value;\n  },\n});\n\n// 是否加载失败\nconst isError = ref(false);\nconst handleError = () => {\n  if (props.fallbackSrc) {\n    srcUrl.value = props.fallbackSrc;\n  } else {\n    isError.value = true;\n  }\n  emit(\"error\");\n};\nconst handleLoad = () => {\n  emit(\"load\");\n};\nconst styleSize = computed(() => {\n  return { width: `${props.width}px`, height: `${props.height}px` };\n});\nconst styleRadius = computed(() => {\n  if (typeof props.radius === \"number\") {\n    return { \"border-radius\": `${props.radius}px` };\n  } else {\n    return { \"border-radius\": props.radius };\n  }\n});\nconst styleFit = computed(() => {\n  return props.fit ? { \"object-fit\": props.fit } : {};\n});\n\nconst handlePreview = () => {\n  visible.value = true;\n};\n</script>\n\n<template>\n  <div\n    :class=\"[ns.b(), ns.is('preview', preview)]\"\n    :style=\"[styleSize, styleRadius]\"\n  >\n    <div v-if=\"preview\" :class=\"[ns.e('preview')]\">\n      <div\n        :class=\"[ns.e('handel')]\"\n        :style=\"{ color: previewTextColor }\"\n        @click.stop=\"handlePreview\"\n      >\n        <slot v-if=\"$slots.error\" name=\"error\" />\n        <template v-else>\n          <div :class=\"ns.e('preview-text')\">\n            <x-icon size=\"20\"><Eye /></x-icon><span>预览</span>\n          </div>\n        </template>\n      </div>\n    </div>\n    <div v-if=\"isError\" :class=\"[ns.e('error')]\">\n      <slot v-if=\"$slots.error\" name=\"error\" />\n      <template v-else>{{ errorText }}</template>\n    </div>\n    <img\n      :src=\"srcUrl\"\n      :class=\"[ns.e('image'), ns.is('zoomed', isZoomed)]\"\n      :alt=\"alt\"\n      :style=\"[styleRadius, styleFit]\"\n      @error=\"handleError\"\n      @load=\"handleLoad\"\n    />\n    <div :class=\"[ns.e('content')]\" v-if=\"$slots.content\">\n      <slot name=\"content\" />\n    </div>\n\n    <xPreview\n      :previewSrcList=\"previewSrcList\"\n      :src=\"srcUrl\"\n      v-model=\"visible\"\n      @close=\"(scale) => emit('close', scale)\"\n      @prev=\"(index) => emit('prev', index)\"\n      @next=\"(index) => emit('next', index)\"\n      @rotate=\"(rotate) => emit('rotate', rotate)\"\n      @zoomIn=\"(e) => emit('zoomIn', e)\"\n      @zoomOut=\"(scale) => emit('zoomOut', scale)\"\n    ></xPreview>\n  </div>\n</template>\n"],"names":["useNamespace","ref","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,EAAE,GAAGA,kBAAY,CAAC,OAAO,CAAC,CAAA;;;;AAMhC;AACA,MAAM,KAAK,GAAG,OA+CZ,CAAA;AACF,MAAM,IAAI,GAAG,MASX,CAAA;;AAEF,MAAM,OAAO,GAAGC,OAAG,CAAC,KAAK,CAAC,CAAA;;AAE1B,MAAM,MAAM,GAAGC,YAAQ,CAAC;AACxB,EAAE,GAAG,GAAG;AACR,IAAI,OAAO,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;AACrD,GAAG;AACH,EAAE,GAAG,CAAC,KAAK,EAAE;AACb,IAAI,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;AACxB,GAAG;AACH,CAAC,CAAC,CAAA;;AAEF;AACA,MAAM,OAAO,GAAGD,OAAG,CAAC,KAAK,CAAC,CAAA;AAC1B,MAAM,WAAW,GAAG,MAAM;AAC1B,EAAE,IAAI,KAAK,CAAC,WAAW,EAAE;AACzB,IAAI,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAA;AACpC,GAAG,MAAM;AACT,IAAI,OAAO,CAAC,KAAK,GAAG,IAAI,CAAA;AACxB,GAAE;AACF,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;AACf,CAAC,CAAA;AACD,MAAM,UAAU,GAAG,MAAM;AACzB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;AACd,CAAC,CAAA;AACD,MAAM,SAAS,GAAGC,YAAQ,CAAC,MAAM;AACjC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAA;AACnE,CAAC,CAAC,CAAA;AACF,MAAM,WAAW,GAAGA,YAAQ,CAAC,MAAM;AACnC,EAAE,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE;AACxC,IAAI,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAA;AACnD,GAAG,MAAM;AACT,IAAI,OAAO,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,EAAE,CAAA;AAC5C,GAAE;AACF,CAAC,CAAC,CAAA;AACF,MAAM,QAAQ,GAAGA,YAAQ,CAAC,MAAM;AAChC,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG,EAAE,YAAY,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAA;AACrD,CAAC,CAAC,CAAA;;AAEF,MAAM,aAAa,GAAG,MAAM;AAC5B,EAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAA;AACtB,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}