Explication détaillée de l'instance Tooltip du composant Vue

Cet article présente principalement l'exemple de code du composant Tooltip du composant Vue. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Avant-propos

Cet article fournit principalement le cadre général du composant Alert et propose un petit nombre d'options configurables. Destiné à fournir grossièrement des idées, l'

info-bulle

est souvent utilisée pour afficher des informations d'invite lorsque la souris survole.

Structure du modèle

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

Structure brute Structure DOM Un p contient des flèches et du contenu de bulles.

Position facultative de l'info-bulle dans v-bind, s'il faut désactiver, afficher et masquer

différence d'emplacement pour la personnalisation afin de recevoir le contenu par défaut

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;

Écouteur d'événements encapsulé

Utiliser

Utilisez l'attribut content pour déterminer les informations d'invite lors du survol. L'effet d'affichage est déterminé par l'attribut de placement : la valeur de l'attribut de placement est : direction - position d'alignement ; quatre directions : haut, gauche, droite, bas. L'attribut trigger est utilisé pour définir la méthode de déclenchement de l'info-bulle. La valeur par défaut est le survol.

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

distribution de contenu

Définissez un emplacement nommé contenu.

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

Attributs

参数	说明	类型	可选值	默认值
content	显示的内容，也可以通过 slot#content 传入 DOM	String	—	—
placement	Tooltip 的出现位置	String	top/right/bottom/left	top
trigger	tooltip触发方式	String	—	hover

Recommandations associées :

Détaillées explication Code graphique JavaScript natif pour implémenter les effets spéciaux de la boîte d'invite flottante de l'info-bulle

jquery+CSS pour créer un exemple d'info-bulle d'invite de titre de balise personnalisée

Tutoriel jQuery EasyUI-Tooltip (boîte d'invite)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!