song-ui-u/es/components/image/src/index.vue.mjs

vue3 + js的PC前端组件库

import { ref, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, withModifiers, renderSlot, createVNode, withCtx, createCommentVNode, Fragment, createTextVNode, toDisplayString } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { useStyle } from '../../../hook/use-style/index.mjs';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import { Eye } from 'song-ui-pro-icon';
import imagePreview from './preview.vue.mjs';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';

const _sfc_main = /*#__PURE__*/Object.assign({
  name: "x-image",
}, {
  __name: 'index',
  props: {
  size: {
    type: String,
    default: "",
  },
  src: {
    type: String,
    default: "",
  },
  fit: {
    type: String,
    default: "",
  },
  fallbackSrc: {
    type: String,
    default: "",
  },
  alt: {
    type: String,
    default: "",
  },
  width: {
    type: [Number, String],
    default: 100,
  },
  height: {
    type: [Number, String],
    default: 100,
  },
  radius: {
    type: [Number, String],
    default: 0,
  },
  errorText: {
    type: String,
    default: "加载失败",
  },
  isZoomed: Boolean,
  preview: Boolean,
  previewSrcList: {
    type: Array,
    default: () => [],
  },
  previewTextColor: {
    type: String,
    default: "#fff",
  },
},
  emits: [
  "error",
  "load",
  "close",
  "prev",
  "next",
  "rotate",
  "zoomIn",
  "zoomOut",
],
  setup(__props, { expose: __expose, emit: __emit }) {
  __expose();

const ns = useNamespace("image");



/** props */
const props = __props;
const emit = __emit;

const visible = ref(false);

const srcUrl = computed({
  get() {
    return props.src || props.previewSrcList[0] || "";
  },
  set(value) {
    srcUrl.value = value;
  },
});

// 是否加载失败
const isError = ref(false);
const handleError = () => {
  if (props.fallbackSrc) {
    srcUrl.value = props.fallbackSrc;
  } else {
    isError.value = true;
  }
  emit("error");
};
const handleLoad = () => {
  emit("load");
};
const styleSize = computed(() => {
  return { width: `${props.width}px`, height: `${props.height}px` };
});
const styleRadius = computed(() => {
  if (typeof props.radius === "number") {
    return { "border-radius": `${props.radius}px` };
  } else {
    return { "border-radius": props.radius };
  }
});
const styleFit = computed(() => {
  return props.fit ? { "object-fit": props.fit } : {};
});

const handlePreview = () => {
  visible.value = true;
};

const __returned__ = { ns, props, emit, visible, srcUrl, isError, handleError, handleLoad, styleSize, styleRadius, styleFit, handlePreview, computed, ref, get useNamespace() { return useNamespace }, get useStyle() { return useStyle }, get XIcon() { return XIcon }, get Eye() { return Eye }, xPreview: imagePreview };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

const _hoisted_1 = /*#__PURE__*/createElementVNode("span", null, "预览", -1 /* HOISTED */);
const _hoisted_2 = ["src", "alt"];

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    class: normalizeClass([$setup.ns.b(), $setup.ns.is('preview', $props.preview)]),
    style: normalizeStyle([$setup.styleSize, $setup.styleRadius])
  }, [
    ($props.preview)
      ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass([$setup.ns.e('preview')])
        }, [
          createElementVNode("div", {
            class: normalizeClass([$setup.ns.e('handel')]),
            style: normalizeStyle({ color: $props.previewTextColor }),
            onClick: withModifiers($setup.handlePreview, ["stop"])
          }, [
            (_ctx.$slots.error)
              ? renderSlot(_ctx.$slots, "error", { key: 0 })
              : (openBlock(), createElementBlock("div", {
                  key: 1,
                  class: normalizeClass($setup.ns.e('preview-text'))
                }, [
                  createVNode($setup["XIcon"], { size: "20" }, {
                    default: withCtx(() => [
                      createVNode($setup["Eye"])
                    ]),
                    _: 1 /* STABLE */
                  }),
                  _hoisted_1
                ], 2 /* CLASS */))
          ], 6 /* CLASS, STYLE */)
        ], 2 /* CLASS */))
      : createCommentVNode("v-if", true),
    ($setup.isError)
      ? (openBlock(), createElementBlock("div", {
          key: 1,
          class: normalizeClass([$setup.ns.e('error')])
        }, [
          (_ctx.$slots.error)
            ? renderSlot(_ctx.$slots, "error", { key: 0 })
            : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                createTextVNode(toDisplayString($props.errorText), 1 /* TEXT */)
              ], 64 /* STABLE_FRAGMENT */))
        ], 2 /* CLASS */))
      : createCommentVNode("v-if", true),
    createElementVNode("img", {
      src: $setup.srcUrl,
      class: normalizeClass([$setup.ns.e('image'), $setup.ns.is('zoomed', $props.isZoomed)]),
      alt: $props.alt,
      style: normalizeStyle([$setup.styleRadius, $setup.styleFit]),
      onError: $setup.handleError,
      onLoad: $setup.handleLoad
    }, null, 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_2),
    (_ctx.$slots.content)
      ? (openBlock(), createElementBlock("div", {
          key: 2,
          class: normalizeClass([$setup.ns.e('content')])
        }, [
          renderSlot(_ctx.$slots, "content")
        ], 2 /* CLASS */))
      : createCommentVNode("v-if", true),
    createVNode($setup["xPreview"], {
      previewSrcList: $props.previewSrcList,
      src: $setup.srcUrl,
      modelValue: $setup.visible,
      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.visible) = $event)),
      onClose: _cache[1] || (_cache[1] = (scale) => $setup.emit('close', scale)),
      onPrev: _cache[2] || (_cache[2] = (index) => $setup.emit('prev', index)),
      onNext: _cache[3] || (_cache[3] = (index) => $setup.emit('next', index)),
      onRotate: _cache[4] || (_cache[4] = (rotate) => $setup.emit('rotate', rotate)),
      onZoomIn: _cache[5] || (_cache[5] = (e) => $setup.emit('zoomIn', e)),
      onZoomOut: _cache[6] || (_cache[6] = (scale) => $setup.emit('zoomOut', scale))
    }, null, 8 /* PROPS */, ["previewSrcList", "src", "modelValue"])
  ], 6 /* CLASS, STYLE */))
}
var Image = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\image\\src\\index.vue"]]);

export { Image as default };
//# sourceMappingURL=index.vue.mjs.map