lc-vue-text-tip/dist/index.js

文字自动tooltip

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".tip-box[data-v-307e8d94]{text-overflow:ellipsis;overflow:hidden;width:100%;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-all}.test-span[data-v-307e8d94]{display:inline-block;white-space:nowrap;position:fixed;top:-9999px;left:-9999px}.text-span[data-v-307e8d94]{display:inline-block;word-break:break-all}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as x, ref as s, computed as g, watch as m, resolveComponent as h, openBlock as c, createElementBlock as f, createElementVNode as a, toDisplayString as p, createBlock as k, withCtx as _, normalizeStyle as S, unref as b, nextTick as B } from "vue";
import { useElementSize as w } from "@vueuse/core";
import { get as C } from "lodash";
const T = { class: "text-span" }, W = { style: { "max-width": "200px" } }, E = /* @__PURE__ */ x({
  __name: "text-tip",
  props: {
    msg: {
      type: String,
      default: ""
    },
    popperClass: {
      type: String,
      default: void 0
    },
    placement: {
      type: String,
      default: "right"
    },
    lineClamp: {
      type: Number,
      default: 1
    },
    enterable: {
      type: Boolean,
      default: !0
    }
  },
  setup(l) {
    const e = l, n = s(), o = s(), t = s(!1), r = s(), { width: u } = w(r), y = g(() => ({ "-webkit-line-clamp": e.lineClamp }));
    async function d() {
      t.value = !1, await B();
      let i = C(n.value, "offsetWidth", 0);
      if (i > o.value.clientWidth && i / o.value.clientWidth > e.lineClamp) {
        t.value = !0;
        return;
      }
      t.value = !1;
    }
    return m(u, () => {
      d();
    }), m(() => e.msg, () => {
      d();
    }), (i, N) => {
      const v = h("el-tooltip");
      return c(), f("div", {
        ref_key: "fBody",
        ref: r,
        style: { width: "100%" }
      }, [
        t.value ? (c(), k(v, {
          key: 1,
          class: "box-item",
          effect: "light",
          placement: l.placement,
          enterable: e.enterable,
          "popper-class": e.popperClass
        }, {
          content: _(() => [
            a("div", W, p(e.msg), 1)
          ]),
          default: _(() => [
            a("div", {
              class: "tip-box",
              style: S(b(y))
            }, p(e.msg), 5)
          ]),
          _: 1
        }, 8, ["placement", "enterable", "popper-class"])) : (c(), f("div", {
          key: 0,
          ref_key: "tipBody",
          ref: o,
          style: { width: "100%", display: "inline-block" }
        }, [
          a("div", {
            ref_key: "testSpan",
            ref: n,
            class: "test-span"
          }, p(e.msg), 513),
          a("div", T, p(e.msg), 1)
        ], 512))
      ], 512);
    };
  }
});
const z = (l, e) => {
  const n = l.__vccOpts || l;
  for (const [o, t] of e)
    n[o] = t;
  return n;
}, V = /* @__PURE__ */ z(E, [["__scopeId", "data-v-307e8d94"]]);
export {
  V as TextTip
};