Detailed explanation of Tooltip instance of Vue component

This article mainly introduces the sample code of Tooltip of Vue component. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Preface

This article mainly provides the general framework of the Alert component and provides a small number of configurable options. Aimed at providing a rough idea

tooltip

is often used to display prompt information when the mouse hovers.

Template structure

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

Rough structure DOM structure A p contains arrows and bubble content.

Optional tooltip position in v-bind, whether to disable, and show and hide

slot difference for customization to receive content by default

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;

Encapsulated event listening

Use

Use the content attribute to determine the prompt information when hovering. The display effect is determined by the placement attribute: the placement attribute value is: direction - alignment position; four directions: top, left, right, bottom. The trigger attribute is used to set the way to trigger the tooltip. The default is 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 distribution

Set a slot named content.

<d-tooltip>
 <d-button type="text">鼠标移动到我上面试试</d-button>
 <p slot="content" class="tooltip-content">我是内容分发的conent。</p>
</d-tooltip>

Attributes

##ParametersDescriptionTypeOptional valueDefault value##contentplacement## through slot#content Where #Tooltip appearsStringtop/right/bottom/lefttoptriggertooltip trigger methodString—hover##Related recommendations:

Displayed Content can also be passed into DOM	String	—	—

Detailed explanation of the graphic code for implementing the Tooltip floating prompt box special effect using native JavaScript

##jquery+CSS to create a custom a tag title prompt tooltip example

jQuery EasyUI Tutorial-Tooltip (prompt box)

The above is the detailed content of Detailed explanation of Tooltip instance of Vue component. For more information, please follow other related articles on the PHP Chinese website!