Vue組件之Tooltip

前言

本文主要Alert 組件的大體框架， 提供少許可配置選項。 旨在大體提供思路

tooltip

經常使用於展現鼠標 hover 時的提示信息。

模板結構

<template>
  <div style="position:relative;">
    <span ref="trigger">
      <slot>
      </slot>
    </span>
    <div class="tooltip"
      v-bind:class="{
        'top':     placement === 'top',
        'left':    placement === 'left',
        'right':   placement === 'right',
        'bottom':  placement === 'bottom',
        'disable': type === 'disable',
        'delete':  type === 'delete',
        'visible': show === true  
      }"
      ref="popover"
      role="tooltip">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-inner">
        <slot name="content" v-html="content"></slot>
      </div>
    </div>
  </div>
</template>

大體結構DOM結構 一個div 包含 箭頭 及 氣泡內容。

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

slot 差值供自定義 默認接收content內容

script

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

export default {
  props: {
    // 須要監聽的事件
    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 {
      // 經過計算所得 氣泡位置  
      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計算出位子
        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.");
    // 獲取監聽對象
    const triger = this.$refs.trigger.children[0];
    // 根據trigger監聽特定事件
    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;
  },
  // 在組件銷燬前移除監聽，釋放內存
  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;

封裝的事件監聽

使用

使用content屬性來決定hover時的提示信息。由placement屬性決定展現效果：placement屬性值爲：方向-對齊位置；四個方向：top、left、right、bottom。trigger屬性用於設置觸發tooltip的方式，默認爲hover。

<d-tooltip content="我是tooltip">
  <d-button type="text">鼠標移動到我上面試試</d-button>
</d-tooltip>
<d-tooltip content="我是tooltip" trigger="click">
  <d-button type="text">點我試試</d-button>
</d-tooltip>

content內容分發

設置一個名爲content的slot。

<d-tooltip>
  <d-button type="text">鼠標移動到我上面試試</d-button>
  <p slot="content" class="tooltip-content">我是內容分發的conent。</p>
</d-tooltip>

Attributes

參數	說明	類型	可選值	默認值
content	顯示的內容，也能夠經過 slot#content 傳入 DOM	String	—	—
placement	Tooltip 的出現位置	String	top/right/bottom/left	top
trigger	tooltip觸發方式	String	—	hover