Detaillierte Erläuterung der Tooltip-Instanz der Vue-Komponente

In diesem Artikel wird hauptsächlich der Beispielcode der Tooltip der Vue-Komponente vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Dieser Artikel stellt hauptsächlich den allgemeinen Rahmen der Alert-Komponente dar und bietet eine kleine Anzahl konfigurierbarer Optionen. Ziel ist es, grob Ideen zu liefern.

Tooltip

wird häufig verwendet, um beim Bewegen der Maus schnelle Informationen anzuzeigen.

Vorlagenstruktur

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

Grobe Struktur DOM-Struktur A p enthält Pfeile und Blaseninhalt.

Optionale Tooltip-Position in V-Bind, ob deaktiviert und ein- und ausgeblendet werden soll

Slot-Unterschied für die Anpassung zum standardmäßigen Empfang von Inhaltsinhalten

Skript

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;

Gekapselter Ereignis-Listener

Verwenden Sie

Verwenden Sie das Inhaltsattribut, um die Eingabeaufforderungsinformationen beim Bewegen des Mauszeigers zu bestimmen. Der Anzeigeeffekt wird durch das Platzierungsattribut bestimmt: Der Wert des Platzierungsattributs ist: Richtung – Ausrichtungsposition; oben, links, rechts, unten. Das Trigger-Attribut wird verwendet, um die Methode zum Auslösen des Tooltips festzulegen. Die Standardeinstellung ist 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>

Inhaltsverteilung

Legen Sie einen Slot mit dem Namen „Content“ fest.

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

Attribute

Verwandte Empfehlungen:

Detailliert Erklärung Nativer JavaScript-Grafikcode zum Implementieren von Spezialeffekten für schwebende QuickInfo-Eingabeaufforderungsfelder

jquery+CSS zum Erstellen eines benutzerdefinierten Tooltip-Beispiels für eine Tag-Titel-Eingabeaufforderung

jQuery EasyUI Tutorial-Tooltip (Eingabeaufforderungsfeld)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Tooltip-Instanz der Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!