v-tooltip 自定义指令

在当前项目中，tooltip提示框的功能用的比较多，每次都得重写，这次直接做成指令，下次拿来即用~

效果图：

right top bottom left

使用方法：

content： 提示内容
color：文字颜色
bgColor：背景颜色
pos：提示位置，默认top

<div class="box" v-tooltip="{content: 'top提示', color:'#fff', bgColor: '#ffba00', pos: 'top'}">top提示</div>
<div class="box" v-tooltip="{content: 'right提示', color:'white', bgColor: 'black', pos: 'right'}">right提示</div>
<div class="box" v-tooltip="{content: 'bottom提示', color:'white', bgColor: 'black', pos: 'bottom'}">bottom提示</div>
<div class="box" v-tooltip="{content: 'left提示', color:'white', bgColor: 'black', pos: 'left'}">left提示</div>

使用时，需要注意 box 元素样式不能是 overflow: hidden;，否则不显示

源码：

/**
 * content: '回到顶部',  提示文字
 * color:'white',       字体颜色
 * bgColor: 'black',    背景颜色
 * pos: 'left'          位置，默认top
 */
import Vue from "vue";
Vue.directive("tooltip", {
  bind(el, binding) {
    el.style.position = "relative";
    let tip = document.createElement("span");
    el.addEventListener("mouseover", function() {
      tip.style.display = "block";
    });
    el.addEventListener("mouseout", function() {
      tip.style.display = "none";
    });
    tip.className = "tooltip";
    // 提示框样式
    let css = {
      display: "none",
      position: "absolute",
    //   width: "100%",
      padding: "5px 10px",
      borderRadius: "4px",
      color: binding.value.color || "white",
      backgroundColor: binding.value.bgColor || "black",
      lineHeight: 1,
      textAlign: 'center',
      zIndex: 9999
    };
    let pos = setPosition(tip, binding.value.pos, binding.value.bgColor);
    for (const item in pos) {
      css[item] = pos[item];
    }
    tip.textContent = binding.value.content;
    setCss(tip, css);
    el.appendChild(tip);
  }
});
// 给元素赋值样式
function setCss(obj, css) {
  for (const attr in css) {
    obj.style[attr] = css[attr];
  }
}
// 设置提示框位置样式
function setPosition(tip, pos, color) {
  switch (pos) {
    case "left":
      tip.className += " left";
      document.styleSheets[0].insertRule(
        `.tooltip.left:before{
            content: '';
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            border-left: 5px solid ${color};
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }`,
        0
      );
      return { left: "0", top: "50%", transform: "translateX(-110%) translateY(-50%)" };
      break;
    case "right":
      tip.className += " right";
      document.styleSheets[0].insertRule(
        `.tooltip.right:before{
          content: '';
          position: absolute;
          left: -5px;
          top: 50%;
          transform: translateY(-50%);
          border-right: 5px solid ${color};
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
      }`,
        0
      );
      return { right: "0", top: "50%", transform: "translateX(110%) translateY(-50%)" };
      break;
    case "bottom":
      tip.className += " bottom";
      document.styleSheets[0].insertRule(
        `.tooltip.bottom:before{
          content: '';
          position: absolute;
          top: -5px;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 5px solid ${color};
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
      }`,
        0
      );
      return {
        bottom: "-5%",
        left: "50%",
        transform: "translateX(-50%) translateY(130%)"
      };
      break;
    case "top":
      tip.className += " top";
      document.styleSheets[0].insertRule(
        `.tooltip.top:before{
          content: '';
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          border-top: 5px solid ${color};
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
      }`,
        0
      );
      return {
        top: "-5%",
        left: "50%",
        transform: "translateX(-50%) translateY(-130%)"
      };
      break;
    //top
    default:
      tip.className += " top";
      document.styleSheets[0].insertRule(
        `.tooltip.top:before{
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 5px solid ${color};
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }`,
        0
      );
      return {
        top: "-5%",
        left: "50%",
        transform: "translateX(-50%) translateY(-130%)"
      };
      break;
  }
}

还可以做进一步优化：
1、提示文字双向绑定
2、空三角样式

参考链接