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

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index = require('../../../hook/use-namespace/index.cjs');
var index$1 = require('../../../hook/use-style/index.cjs');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index$2 = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');
var icons = require('song-ui-pro-icon');
var preview = require('./preview.vue.cjs');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');

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 = index.useNamespace("image");



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

const visible = vue.ref(false);

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

// 是否加载失败
const isError = vue.ref(false);
const handleError = () => {
  if (props.fallbackSrc) {
    srcUrl.value = props.fallbackSrc;
  } else {
    isError.value = true;
  }
  emit("error");
};
const handleLoad = () => {
  emit("load");
};
const styleSize = vue.computed(() => {
  return { width: `${props.width}px`, height: `${props.height}px` };
});
const styleRadius = vue.computed(() => {
  if (typeof props.radius === "number") {
    return { "border-radius": `${props.radius}px` };
  } else {
    return { "border-radius": props.radius };
  }
});
const styleFit = vue.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: vue.computed, ref: vue.ref, get useNamespace() { return index.useNamespace }, get useStyle() { return index$1.useStyle }, get XIcon() { return index$2.XIcon }, get Eye() { return icons.Eye }, xPreview: preview };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

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

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass([$setup.ns.b(), $setup.ns.is('preview', $props.preview)]),
    style: vue.normalizeStyle([$setup.styleSize, $setup.styleRadius])
  }, [
    ($props.preview)
      ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: vue.normalizeClass([$setup.ns.e('preview')])
        }, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass([$setup.ns.e('handel')]),
            style: vue.normalizeStyle({ color: $props.previewTextColor }),
            onClick: vue.withModifiers($setup.handlePreview, ["stop"])
          }, [
            (_ctx.$slots.error)
              ? vue.renderSlot(_ctx.$slots, "error", { key: 0 })
              : (vue.openBlock(), vue.createElementBlock("div", {
                  key: 1,
                  class: vue.normalizeClass($setup.ns.e('preview-text'))
                }, [
                  vue.createVNode($setup["XIcon"], { size: "20" }, {
                    default: vue.withCtx(() => [
                      vue.createVNode($setup["Eye"])
                    ]),
                    _: 1 /* STABLE */
                  }),
                  _hoisted_1
                ], 2 /* CLASS */))
          ], 6 /* CLASS, STYLE */)
        ], 2 /* CLASS */))
      : vue.createCommentVNode("v-if", true),
    ($setup.isError)
      ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 1,
          class: vue.normalizeClass([$setup.ns.e('error')])
        }, [
          (_ctx.$slots.error)
            ? vue.renderSlot(_ctx.$slots, "error", { key: 0 })
            : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                vue.createTextVNode(vue.toDisplayString($props.errorText), 1 /* TEXT */)
              ], 64 /* STABLE_FRAGMENT */))
        ], 2 /* CLASS */))
      : vue.createCommentVNode("v-if", true),
    vue.createElementVNode("img", {
      src: $setup.srcUrl,
      class: vue.normalizeClass([$setup.ns.e('image'), $setup.ns.is('zoomed', $props.isZoomed)]),
      alt: $props.alt,
      style: vue.normalizeStyle([$setup.styleRadius, $setup.styleFit]),
      onError: $setup.handleError,
      onLoad: $setup.handleLoad
    }, null, 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_2),
    (_ctx.$slots.content)
      ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 2,
          class: vue.normalizeClass([$setup.ns.e('content')])
        }, [
          vue.renderSlot(_ctx.$slots, "content")
        ], 2 /* CLASS */))
      : vue.createCommentVNode("v-if", true),
    vue.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__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\image\\src\\index.vue"]]);

module.exports = Image;
//# sourceMappingURL=index.vue.cjs.map