@wfrog/vc/es/components/image/index.mjs

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

import './index.css'
// vue-script:D:\project\_my\vc\src\components\image\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { unref as _unref2, createCommentVNode as _createCommentVNode2, normalizeClass as _normalizeClass3, createVNode as _createVNode, withCtx as _withCtx3, openBlock as _openBlock3, createBlock as _createBlock3, renderSlot as _renderSlot2, toDisplayString as _toDisplayString2, createTextVNode as _createTextVNode2, createElementVNode as _createElementVNode2, createElementBlock as _createElementBlock2, normalizeStyle as _normalizeStyle2, Fragment as _Fragment } from "vue";
import { computed as computed2, ref as ref2, useSlots } from "vue";
import { ElImage, ElTooltip as ElTooltip2 } from "element-plus";
import { defaultWindow } from "@wfrog/utils";

// vue-script:D:\project\_my\vc\src\components\el-icon\index.vue?type=script
import { defineComponent } from "vue";
import { ElIcon } from "element-plus";
import * as Icons from "@element-plus/icons-vue";
var el_icon_default = defineComponent({
  components: { ...Icons, ElIcon },
  props: {
    name: { type: String, required: true },
    color: { type: String, default: "" },
    size: { type: [Number, String], default: "" }
  }
});

// vue-template:D:\project\_my\vc\src\components\el-icon\index.vue?type=template
import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx } from "vue";
function render(_ctx, _cache) {
  const _component_ElIcon = _resolveComponent("ElIcon");
  return _openBlock(), _createBlock(_component_ElIcon, {
    size: _ctx.size,
    color: _ctx.color,
    class: _normalizeClass(_ctx.$style.icon)
  }, {
    default: _withCtx(() => [
      (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.name)))
    ]),
    _: 1
  }, 8, ["size", "color", "class"]);
}

// vue-style:D:\project\_my\vc\src\components\el-icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var el_icon_default2 = { icon: "_icon_1iurh_1" };

// src/components/el-icon/index.vue
el_icon_default.render = render;
var cssModules = {};
el_icon_default.__cssModules = cssModules = {};
cssModules["$style"] = el_icon_default2;
var el_icon_default3 = el_icon_default;

// vue-script:D:\project\_my\vc\src\components\text-ellipsis\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { unref as _unref, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass2, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withCtx as _withCtx2, openBlock as _openBlock2, createBlock as _createBlock2, createElementBlock as _createElementBlock } from "vue";
import { ElTooltip } from "element-plus";
import { computed, nextTick, onMounted, ref, watch } from "vue";
var text_ellipsis_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    type: { type: String, default: "single" },
    effect: { type: String, default: "dark" },
    placement: { type: String, default: "top" },
    content: { type: String, default: "" },
    popperOptions: { type: Object, default: () => ({ boundariesElement: "body", gpuAcceleration: false }) },
    popperClass: { type: String, default: "" },
    enterable: { type: Boolean, default: true },
    maxWidth: { type: Number, default: 0 },
    showTooltip: { type: Boolean, default: true }
  },
  setup(__props, { expose }) {
    const props = __props;
    const tipsVisible = ref(false);
    const textVisible = ref(false);
    const realWidth = ref(0);
    const eleMain = ref();
    const eleText = ref();
    const eleEllipsis = ref();
    const mainStyle = computed(() => props.maxWidth ? { width: `${props.maxWidth}px` } : {});
    const fixStyle = computed(() => ({ width: `${realWidth.value}px` }));
    const isOverflow = () => new Promise((resolve) => {
      tipsVisible.value = true;
      textVisible.value = true;
      nextTick(() => {
        if (eleText.value && eleEllipsis.value) {
          const originWidth = eleText.value?.offsetWidth;
          const ellipsisWidth = props.maxWidth || eleEllipsis.value?.offsetWidth;
          resolve(originWidth > ellipsisWidth);
        } else {
          resolve(false);
        }
      });
    });
    const update = async () => {
      const isOverflowX = await isOverflow();
      tipsVisible.value = isOverflowX;
      textVisible.value = !isOverflowX;
      realWidth.value = eleMain.value?.clientWidth || 0;
    };
    const watchData = computed(() => `${props.content}${props.maxWidth}${props.popperClass}`);
    watch(watchData, () => update(), { immediate: true });
    watch(realWidth, () => update());
    onMounted(() => nextTick(() => update()));
    expose({ tipsVisible });
    return (_ctx, _cache) => {
      return _openBlock2(), _createElementBlock("div", {
        ref_key: "eleMain",
        ref: eleMain,
        class: _normalizeClass2(_ctx.$style.main),
        style: _normalizeStyle(_unref(mainStyle))
      }, [
        _createCommentVNode(" \u663E\u793Atooltip\u5E76\u4E14tips\u53EF\u89C1\uFF0C\u4E0D\u7528disable\u53EF\u4EE5\u907F\u514D\u6E32\u67D3tooltip "),
        tipsVisible.value && __props.showTooltip ? (_openBlock2(), _createBlock2(_unref(ElTooltip), {
          key: 0,
          effect: __props.effect,
          placement: __props.placement,
          "popper-class": __props.popperClass,
          "popper-options": __props.popperOptions,
          enterable: __props.enterable
        }, {
          content: _withCtx2(() => [
            _renderSlot(_ctx.$slots, "default", {}, () => [
              _createTextVNode(_toDisplayString(__props.content), 1)
            ])
          ]),
          default: _withCtx2(() => [
            _createElementVNode("div", {
              ref_key: "eleEllipsis",
              ref: eleEllipsis,
              class: _normalizeClass2(_ctx.$style.ellipsis),
              style: _normalizeStyle(_unref(fixStyle))
            }, [
              _renderSlot(_ctx.$slots, "default", {}, () => [
                _createTextVNode(_toDisplayString(__props.content), 1)
              ])
            ], 6)
          ]),
          _: 3
        }, 8, ["effect", "placement", "popper-class", "popper-options", "enterable"])) : _createCommentVNode("v-if", true),
        _createCommentVNode(" \u663E\u793Atooltip\u5E76\u4E14tips\u4E0D\u53EF\u89C1\uFF0C\u4EC5\u663E\u793A\u6587\u6848 "),
        tipsVisible.value && !__props.showTooltip ? (_openBlock2(), _createElementBlock("div", {
          key: 1,
          ref_key: "eleEllipsis",
          ref: eleEllipsis,
          class: _normalizeClass2(_ctx.$style.ellipsis),
          style: _normalizeStyle(_unref(fixStyle))
        }, [
          _renderSlot(_ctx.$slots, "default", {}, () => [
            _createTextVNode(_toDisplayString(__props.content), 1)
          ])
        ], 6)) : _createCommentVNode("v-if", true),
        textVisible.value ? (_openBlock2(), _createElementBlock("div", {
          key: 2,
          ref_key: "eleText",
          ref: eleText,
          class: _normalizeClass2(_ctx.$style.text)
        }, [
          _renderSlot(_ctx.$slots, "default", {}, () => [
            _createTextVNode(_toDisplayString(__props.content), 1)
          ])
        ], 2)) : _createCommentVNode("v-if", true)
      ], 6);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\text-ellipsis\index.vue?type=style&index=0&isModule=true&isNameImport=true
var text_ellipsis_default2 = { main: "_main_eqh40_1", ellipsis: "_ellipsis_eqh40_7", text: "_text_eqh40_13" };

// src/components/text-ellipsis/index.vue
var cssModules2 = {};
text_ellipsis_default.__cssModules = cssModules2 = {};
cssModules2["$style"] = text_ellipsis_default2;
var text_ellipsis_default3 = text_ellipsis_default;

// vue-script:D:\project\_my\vc\src\components\image\index.vue?type=script
var image_default = /* @__PURE__ */ _defineComponent2({
  __name: "index",
  props: {
    type: { type: String, default: "image" },
    text: { type: String, default: "" },
    src: { type: String, default: "" },
    previewSrcList: { type: Array, default: () => [] },
    width: { type: String, default: "160px" },
    height: { type: String, default: "90px" },
    fit: { type: String, default: "cover" },
    textMaxWidth: { type: Number, default: 0 },
    showTooltip: { type: Boolean, default: true },
    effect: { type: String, default: "dark" },
    placement: { type: String, default: "top" },
    popperClass: { type: String, default: "" },
    enterable: { type: Boolean, default: true }
  },
  setup(__props) {
    const props = __props;
    const slots = useSlots();
    const fixWidth = 5;
    const eleText = ref2();
    const eleTextWrapper = ref2();
    const eleEllipsis = ref2();
    const isImageType = computed2(() => props.type === "image");
    const isTextType = computed2(() => props.type === "text");
    const mySrc = computed2(() => {
      if (!defaultWindow) {
        return "";
      }
      if (props.type === "text" && eleText.value) {
        const canvas = document.createElement("canvas");
        canvas.width = eleText.value.offsetWidth + fixWidth;
        canvas.height = parseInt(defaultWindow.getComputedStyle(eleText.value).lineHeight, 10);
        return canvas.toDataURL("image/png");
      }
      return props.src || props.previewSrcList[0];
    });
    const myMaxWidth = computed2(() => props.textMaxWidth || eleTextWrapper.value?.offsetWidth || 0);
    const imageStyle = computed2(() => {
      if (isImageType.value) {
        return {
          width: props.width,
          height: props.height
        };
      }
      return {};
    });
    const combineText = computed2(() => {
      if (!isTextType.value) {
        return "";
      }
      let slotText = "";
      if (slots.default) {
        const [slot] = slots.default();
        slotText = slot.children?.toString() || "";
      }
      return props.text || slotText;
    });
    const mySrcList = computed2(() => props.previewSrcList.length === 0 ? [props.src] : props.previewSrcList);
    const tipsVisible = computed2(() => eleEllipsis.value?.tipsVisible ?? false);
    return (_ctx, _cache) => {
      return _openBlock3(), _createElementBlock2(_Fragment, null, [
        _unref2(isTextType) ? (_openBlock3(), _createElementBlock2("div", {
          key: 0,
          ref_key: "eleTextWrapper",
          ref: eleTextWrapper,
          class: _normalizeClass3(_ctx.$style["text-wrapper"])
        }, [
          _createCommentVNode2(" \u6709tooltip\u4E14\u5F00\u542Ftooltip\u5219\u6E32\u67D3\uFF0C\u4E0D\u7528disable\u53EF\u4EE5\u907F\u514D\u6E32\u67D3tooltip "),
          _createCommentVNode2(" \u8FD9\u91CC\u4F3C\u4E4E\u6709bug\uFF0C\u5728table\u4E0B\u4F1A\u88AB\u6E32\u67D3\u4E24\u6B21tooltip "),
          _unref2(tipsVisible) && __props.showTooltip ? (_openBlock3(), _createBlock3(_unref2(ElTooltip2), {
            key: 0,
            effect: __props.effect,
            placement: __props.placement,
            "popper-class": __props.popperClass,
            enterable: __props.enterable,
            content: _unref2(combineText)
          }, {
            default: _withCtx3(() => [
              _createVNode(_unref2(ElImage), {
                src: _unref2(mySrc),
                "preview-src-list": _unref2(mySrcList),
                class: _normalizeClass3(_ctx.$style.image),
                lazy: "",
                "preview-teleported": ""
              }, null, 8, ["src", "preview-src-list", "class"])
            ]),
            _: 1
          }, 8, ["effect", "placement", "popper-class", "enterable", "content"])) : _createCommentVNode2("v-if", true),
          _createCommentVNode2(" \u65E0tooltip\u6216\u8005\u5173\u95EDtooltip\u5219\u76F4\u63A5\u6E32\u67D3 "),
          !_unref2(tipsVisible) || !__props.showTooltip ? (_openBlock3(), _createBlock3(_unref2(ElImage), {
            key: 1,
            src: _unref2(mySrc),
            "preview-src-list": _unref2(mySrcList),
            class: _normalizeClass3(_ctx.$style.image),
            lazy: "",
            "preview-teleported": ""
          }, null, 8, ["src", "preview-src-list", "class"])) : _createCommentVNode2("v-if", true),
          _createCommentVNode2(" \u8FD9\u91CC\u6E32\u67D3\u6587\u5B57 "),
          _createElementVNode2("span", {
            ref_key: "eleText",
            ref: eleText,
            class: _normalizeClass3(_ctx.$style.text)
          }, [
            _createVNode(el_icon_default3, {
              name: "Picture",
              class: _normalizeClass3(_ctx.$style.icon)
            }, null, 8, ["class"]),
            _createVNode(text_ellipsis_default3, {
              ref_key: "eleEllipsis",
              ref: eleEllipsis,
              placement: "top-start",
              "max-width": _unref2(myMaxWidth),
              "show-tooltip": false
            }, {
              default: _withCtx3(() => [
                _renderSlot2(_ctx.$slots, "default", {}, () => [
                  _createTextVNode2(_toDisplayString2(__props.text), 1)
                ])
              ]),
              _: 3
            }, 8, ["max-width"])
          ], 2)
        ], 2)) : _createCommentVNode2("v-if", true),
        _unref2(isImageType) ? (_openBlock3(), _createBlock3(_unref2(ElImage), {
          key: 1,
          src: _unref2(mySrc),
          "preview-src-list": _unref2(mySrcList),
          style: _normalizeStyle2(_unref2(imageStyle)),
          fit: __props.fit,
          class: _normalizeClass3(_ctx.$style["image-wrapper"]),
          lazy: "",
          "preview-teleported": ""
        }, null, 8, ["src", "preview-src-list", "style", "fit", "class"])) : _createCommentVNode2("v-if", true)
      ], 64);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\image\index.vue?type=style&index=0&isModule=true&isNameImport=true
var image_default2 = { "text-wrapper": "_text-wrapper_1toev_1", image: "_image_1toev_4", text: "_text_1toev_1", icon: "_icon_1toev_12", "image-wrapper": "_image-wrapper_1toev_18" };

// src/components/image/index.vue
var cssModules3 = {};
image_default.__cssModules = cssModules3 = {};
cssModules3["$style"] = image_default2;
var image_default3 = image_default;
export {
  image_default3 as default
};