double-ui-vue/es/title-tip/index.js

基于vue框架的ui库

var style = "";
const createDom = (theme, title) => {
  const div = document.createElement("div");
  div.style.setProperty("opacity", "0");
  div.className = `d-title-tip d-title-tip-${theme}`;
  div.innerText = title;
  document.body.appendChild(div);
  const setDomStyle = (options) => {
    Object.keys(options).forEach((key) => {
      div.style.setProperty(key, options[key]);
    });
  };
  const removeDomStyle = (key) => {
    div.style.removeProperty(key);
  };
  return { div, setDomStyle, removeDomStyle };
};
const TitleTip = (el, binding) => {
  let dom;
  let timer = null;
  el.onmouseenter = (e) => {
    timer = window.setTimeout(() => {
      var _a, _b;
      const reg = /<\/?.+?\/?>/g;
      const winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const target = e.target;
      const { clientWidth, scrollWidth } = target;
      const { modifiers, value } = binding;
      if (!value && clientWidth === scrollWidth)
        return;
      const params = {};
      Object.keys(modifiers).forEach((d) => {
        const [key, value2] = d.split("@");
        params[key] = value2;
      });
      const maxWidth = (_a = params.width) != null ? _a : "420", theme = (_b = params.theme) != null ? _b : "light", title = value != null ? value : target.innerHTML.replace(reg, "");
      const { div, setDomStyle, removeDomStyle } = createDom(theme, title);
      dom = div;
      const { top, bottom, width, height } = target.getBoundingClientRect();
      const { clientWidth: tipW, clientHeight: tipH } = dom;
      const disX = e.x;
      const disY = e.y;
      const checkTop = top > tipH - 4;
      const checkBottom = winHeight - bottom > tipH - 4;
      let tipTop = 0;
      let tipLeft = disX;
      if (disX < width / 2 && disY < height / 2) {
        tipTop = checkTop ? top - (tipH - 4) : top + height - 4;
      } else if (disX > width / 2 && disY < height / 2) {
        tipTop = checkTop ? top - (tipH - 4) : top + height - 4;
      } else if (disX < width / 2 && disY > height / 2) {
        tipTop = checkBottom ? top + height - 4 : top - (tipH - 4);
      } else if (disX > width / 2 && disY > height / 2) {
        tipTop = checkBottom ? top + height - 4 : top - (tipH - 4);
      }
      const rw = winWidth - disX;
      const w = tipW > Number(maxWidth) ? Number(maxWidth) : tipW;
      if (rw < w)
        tipLeft -= w - rw;
      const { pageYOffset, pageXOffset } = window;
      removeDomStyle("opacity");
      setDomStyle({
        left: `${tipLeft + pageXOffset}px`,
        top: `${tipTop + pageYOffset}px`,
        "max-width": `${maxWidth}px`
      });
    }, 300);
  };
  const remove = () => {
    var _a, _b;
    (_b = (_a = dom.parentNode).removeChild) == null ? void 0 : _b.call(_a, dom);
    dom = null;
  };
  const clearVm = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    dom && remove();
  };
  el.addEventListener("DOMNodeRemoved", clearVm);
  el.addEventListener("mouseout", clearVm);
  el.addEventListener("mousedown", clearVm);
  return remove;
};
export { TitleTip as default };