@wfrog/vc/dist/es/components/text-ellipsis/text-ellipsis.mjs

vue3 组件库 vc

import './index.css'
import '../../chunk/E_WRn0OP.mjs';
/* empty css                    */
import { a as ElTooltip } from '../../chunk/DUd8IaU9.mjs';
import { defineComponent, ref, useTemplateRef, computed, watch, onMounted, nextTick, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createBlock, createCommentVNode, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "text-ellipsis",
  props: {
    type: { default: "single" },
    effect: { default: "light" },
    placement: { default: "top" },
    content: { default: "" },
    popperOptions: { default: () => ({ boundariesElement: "body", gpuAcceleration: false }) },
    popperClass: { default: "" },
    enterable: { type: Boolean, default: false },
    maxWidth: { default: 0 },
    showTooltip: { type: Boolean, default: true }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const tipsVisible = ref(false);
    const textVisible = ref(false);
    const realWidth = ref(0);
    const mainRef = useTemplateRef("mainRef");
    const textRef = useTemplateRef("textRef");
    const ellipsisRef = useTemplateRef("ellipsisRef");
    const mainStyle = computed(() => props.maxWidth ? { width: `${props.maxWidth}px` } : {});
    const fixStyle = computed(() => ({ width: `${realWidth.value}px` }));
    function isOverflow() {
      return new Promise((resolve) => {
        tipsVisible.value = true;
        textVisible.value = true;
        nextTick(() => {
          if (textRef.value && ellipsisRef.value) {
            const originWidth = textRef.value?.offsetWidth;
            const ellipsisWidth = props.maxWidth || ellipsisRef.value?.offsetWidth;
            resolve(originWidth > ellipsisWidth);
          } else {
            resolve(false);
          }
        });
      });
    }
    async function update() {
      const isOverflowX = await isOverflow();
      tipsVisible.value = isOverflowX;
      textVisible.value = !isOverflowX;
      realWidth.value = mainRef.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) => {
      const _component_ElTooltip = ElTooltip;
      return openBlock(), createElementBlock("div", {
        ref_key: "mainRef",
        ref: mainRef,
        class: normalizeClass(_ctx.$style.main),
        style: normalizeStyle(unref(mainStyle))
      }, [
        unref(tipsVisible) && __props.showTooltip ? (openBlock(), createBlock(_component_ElTooltip, {
          key: 0,
          effect: __props.effect,
          placement: __props.placement,
          "popper-class": __props.popperClass,
          "popper-options": __props.popperOptions,
          enterable: __props.enterable
        }, {
          content: withCtx(() => [
            renderSlot(_ctx.$slots, "default", {}, () => [
              createTextVNode(toDisplayString(__props.content), 1)
            ])
          ]),
          default: withCtx(() => [
            createElementVNode("div", {
              ref_key: "ellipsisRef",
              ref: ellipsisRef,
              class: normalizeClass(_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("", true),
        unref(tipsVisible) && !__props.showTooltip ? (openBlock(), createElementBlock("div", {
          key: 1,
          ref_key: "ellipsisRef",
          ref: ellipsisRef,
          class: normalizeClass(_ctx.$style.ellipsis),
          style: normalizeStyle(unref(fixStyle))
        }, [
          renderSlot(_ctx.$slots, "default", {}, () => [
            createTextVNode(toDisplayString(__props.content), 1)
          ])
        ], 6)) : createCommentVNode("", true),
        unref(textVisible) ? (openBlock(), createElementBlock("div", {
          key: 2,
          ref_key: "textRef",
          ref: textRef,
          class: normalizeClass(_ctx.$style.text)
        }, [
          renderSlot(_ctx.$slots, "default", {}, () => [
            createTextVNode(toDisplayString(__props.content), 1)
          ])
        ], 2)) : createCommentVNode("", true)
      ], 6);
    };
  }
});

/* unplugin-vue-components disabled */const main = "_main_eqh40_1";
const ellipsis = "_ellipsis_eqh40_7";
const text = "_text_eqh40_13";
const style0 = {
	main: main,
	ellipsis: ellipsis,
	text: text
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_31 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_31 as _ };