Vue組件之Tooltip的示例代碼

<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>

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;

<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>

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