摘要：前言本文主要組件的大致框架，提供少量可配置選項(xiàng)。旨在大致提供思路常用于展示鼠標(biāo)時(shí)的提示信息。由屬性決定展示效果屬性值為方向?qū)R位置四個(gè)方向。屬性用于設(shè)置觸發(fā)的方式，默認(rèn)為。

本文主要Alert 組件的大致框架， 提供少量可配置選項(xiàng)。 旨在大致提供思路

常用于展示鼠標(biāo) hover 時(shí)的提示信息。

大致結(jié)構(gòu)DOM結(jié)構(gòu) 一個(gè)div 包含 箭頭 及 氣泡內(nèi)容。

v-bind中可選tooltip位置，是否禁用，及顯示隱藏

slot 差值供自定義 默認(rèn)接收content內(nèi)容

import EventListener from "../utils/EventListener.js";

export default {
  props: {
    // 需要監(jiān)聽的事件
    trigger: {
      type: String,
      default: "click"
    },
    effect: {
      type: String,
      default: "fadein"
    },
    title: {
      type: String
    },
    // toolTip消息提示
    content: {
      type: String
    },
    header: {
      type: Boolean,
      default: true
    },
    placement: {
      type: String
    }
  },
  data() {
    return {
      // 通過計(jì)算所得 氣泡位置  
      position: {
        top: 0,
        left: 0
      },
      show: true
    };
  },
  watch: {
    show: function(val) {
      if (val) {
        const popover = this.$refs.popover;
        const triger = this.$refs.trigger.children[0];
        // 通過placement計(jì)算出位子
        switch (this.placement) {
          case "top" :
            this.position.left = triger.offsetLeft - popover.offsetWidth / 2 + triger.offsetWidth / 2;
            this.position.top = triger.offsetTop - popover.offsetHeight;
            break;
          case "left":
            this.position.left = triger.offsetLeft - popover.offsetWidth;
            this.position.top = triger.offsetTop + triger.offsetHeight / 2 - popover.offsetHeight / 2;
            break;
          case "right":
            this.position.left = triger.offsetLeft + triger.offsetWidth;
            this.position.top = triger.offsetTop + triger.offsetHeight / 2 - popover.offsetHeight / 2;
            break;
          case "bottom":
            this.position.left = triger.offsetLeft - popover.offsetWidth / 2 + triger.offsetWidth / 2;
            this.position.top = triger.offsetTop + triger.offsetHeight;
            break;
          default:
            console.log("Wrong placement prop");
        }
        popover.style.top = this.position.top + "px";
        popover.style.left = this.position.left + "px";
      }
    }
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  },
  mounted() {
    if (!this.$refs.popover) return console.error("Couldn"t find popover ref in your component that uses popoverMixin.");
    // 獲取監(jiān)聽對(duì)象
    const triger = this.$refs.trigger.children[0];
    // 根據(jù)trigger監(jiān)聽特定事件
    if (this.trigger === "hover") {
      this._mouseenterEvent = EventListener.listen(triger, "mouseenter", () => {
        this.show = true;
      });
      this._mouseleaveEvent = EventListener.listen(triger, "mouseleave", () => {
        this.show = false;
      });
    } else if (this.trigger === "focus") {
      this._focusEvent = EventListener.listen(triger, "focus", () => {
        this.show = true;
      });
      this._blurEvent = EventListener.listen(triger, "blur", () => {
        this.show = false;
      });
    } else {
      this._clickEvent = EventListener.listen(triger, "click", this.toggle);
    }
    this.show = !this.show;
  },
  // 在組件銷毀前移除監(jiān)聽，釋放內(nèi)存
  beforeDestroy() {
    if (this._blurEvent) {
      this._blurEvent.remove();
      this._focusEvent.remove();
    }
    if (this._mouseenterEvent) {
      this._mouseenterEvent.remove();
      this._mouseleaveEvent.remove();
    }
    if (this._clickEvent) this._clickEvent.remove();
  }
};

// EventListener.js
const EventListener = {
  /**
   * Listen to DOM events during the bubble phase.
   *
   * @param {DOMEventTarget} target DOM element to register listener on.
   * @param {string} eventType Event type, e.g. "click" or "mouseover".
   * @param {function} callback Callback function.
   * @return {object} Object with a `remove` method.
   */
  listen(target, eventType, callback) {
    if (target.addEventListener) {
      target.addEventListener(eventType, callback, false);
      return {
        remove() {
          target.removeEventListener(eventType, callback, false);
        }
      };
    } else if (target.attachEvent) {
      target.attachEvent("on" + eventType, callback);
      return {
        remove() {
          target.detachEvent("on" + eventType, callback);
        }
      };
    }
  }
};

export default EventListener;

封裝的事件監(jiān)聽

使用content屬性來決定hover時(shí)的提示信息。由placement屬性決定展示效果：placement屬性值為：方向-對(duì)齊位置；四個(gè)方向：top、left、right、bottom。trigger屬性用于設(shè)置觸發(fā)tooltip的方式，默認(rèn)為hover。

  鼠標(biāo)移動(dòng)到我上面試試


  點(diǎn)我試試

設(shè)置一個(gè)名為content的slot。

  鼠標(biāo)移動(dòng)到我上面試試
  
我是內(nèi)容分發(fā)的conent。