ホームページ > ウェブフロントエンド > jsチュートリアル > VueコンポーネントのTooltipインスタンスの詳細説明

VueコンポーネントのTooltipインスタンスの詳細説明

小云云
リリース: 2018-01-09 13:50:00
オリジナル
4496 人が閲覧しました

この記事では主にVueコンポーネントのツールチップのサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

はじめに

この記事では主に、Alert コンポーネントの一般的なフレームワークの概要を説明し、少数の構成可能なオプションを提供します。 大まかなアイデアを提供することを目的としています

tooltip

は、マウスをホバーしたときにプロンプ​​ト情報を表示するためによく使用されます。

テンプレート構造


<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>
ログイン後にコピー

大まかな構造 DOM構造 A pには矢印とバブルコンテンツが含まれています。

v-bind でのオプションのツールチップの位置、デフォルトでコンテンツを受信するためのカスタマイズのための

スロットの違いの表示/非表示

script


import EventListener from &#39;../utils/EventListener.js&#39;;

export default {
 props: {
  // 需要监听的事件
  trigger: {
   type: String,
   default: &#39;click&#39;
  },
  effect: {
   type: String,
   default: &#39;fadein&#39;
  },
  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 &#39;top&#39; :
      this.position.left = triger.offsetLeft - popover.offsetWidth / 2 + triger.offsetWidth / 2;
      this.position.top = triger.offsetTop - popover.offsetHeight;
      break;
     case &#39;left&#39;:
      this.position.left = triger.offsetLeft - popover.offsetWidth;
      this.position.top = triger.offsetTop + triger.offsetHeight / 2 - popover.offsetHeight / 2;
      break;
     case &#39;right&#39;:
      this.position.left = triger.offsetLeft + triger.offsetWidth;
      this.position.top = triger.offsetTop + triger.offsetHeight / 2 - popover.offsetHeight / 2;
      break;
     case &#39;bottom&#39;:
      this.position.left = triger.offsetLeft - popover.offsetWidth / 2 + triger.offsetWidth / 2;
      this.position.top = triger.offsetTop + triger.offsetHeight;
      break;
     default:
      console.log(&#39;Wrong placement prop&#39;);
    }
    popover.style.top = this.position.top + &#39;px&#39;;
    popover.style.left = this.position.left + &#39;px&#39;;
   }
  }
 },
 methods: {
  toggle() {
   this.show = !this.show;
  }
 },
 mounted() {
  if (!this.$refs.popover) return console.error("Couldn&#39;t find popover ref in your component that uses popoverMixin.");
  // 获取监听对象
  const triger = this.$refs.trigger.children[0];
  // 根据trigger监听特定事件
  if (this.trigger === &#39;hover&#39;) {
   this._mouseenterEvent = EventListener.listen(triger, &#39;mouseenter&#39;, () => {
    this.show = true;
   });
   this._mouseleaveEvent = EventListener.listen(triger, &#39;mouseleave&#39;, () => {
    this.show = false;
   });
  } else if (this.trigger === &#39;focus&#39;) {
   this._focusEvent = EventListener.listen(triger, &#39;focus&#39;, () => {
    this.show = true;
   });
   this._blurEvent = EventListener.listen(triger, &#39;blur&#39;, () => {
    this.show = false;
   });
  } else {
   this._clickEvent = EventListener.listen(triger, &#39;click&#39;, 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. &#39;click&#39; or &#39;mouseover&#39;.
  * @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(&#39;on&#39; + eventType, callback);
   return {
    remove() {
     target.detachEvent(&#39;on&#39; + eventType, callback);
    }
   };
  }
 }
};

export default EventListener;
ログイン後にコピー

カプセル化されたイベントモニタリング

Use

content 属性を使用して、ホバー時のプロンプト情報を決定します。表示効果は配置属性によって決まります。配置属性値は次のとおりです。方向 - 配置位置は 4 方向: 上、左、右、下です。トリガー属性は、ツールチップをトリガーする方法を設定するために使用されます。デフォルトはホバーです。


<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という名前のスロットを設定します。


<d-tooltip>
 <d-button type="text">鼠标移动到我上面试试</d-button>
 <p slot="content" class="tooltip-content">我是内容分发的conent。</p>
</d-tooltip>
ログイン後にコピー

属性

パラメータ 説明 タイプ オプションの値 デフォルト値
content によって表示されるコンテンツは、slot# を通じて表示することもできますcontent DOM String
placement が表示されるツールチップ String top/right/bottom/left top
trigger ツールチップのトリガー方法 String hover

関連推奨事項:

ツールチップフローティングプロンプトボックスの特殊効果を実装するためのネイティブJavaScriptのグラフィックコードの詳細な説明

jquery+CSSを使用してカスタムのタグ タイトル プロンプト ツールチップの例

jQuery EasyUI チュートリアル - ツールチップ (プロンプト ボックス)

以上がVueコンポーネントのTooltipインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート