首頁 > web前端 > js教程 > 主體

Vue組件之Tooltip實例詳解

小云云
發布: 2018-01-09 13:50:00
原創
4469 人瀏覽過

本文主要介紹了Vue組件之Tooltip的範例程式碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

前言

本文主要Alert 元件的大致框架, 提供少量可設定選項。 旨在大致提供想法

tooltip

常用於展示滑鼠 hover 時的提示資訊。

模板結構


<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結構 一個p 包含 箭頭 及 氣泡內容。

v-bind中可選tooltip位置,是否停用,及顯示隱藏

slot 差值供自訂預設接收content內容

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;
登入後複製

封裝的事件監聽

使用

使用content屬性決定hover時的提示訊息。由placement屬性決定展示效果:placement屬性值為:方向-對齊位置;四個方向:top、left、right、bottom。 trigger屬性用於設定觸發tooltip的方式,預設為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的slot。


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

Attributes

##說明類型可選值預設值#content##placement# #Tooltip 的出現位置
參數
##顯示的內容,也可以透過 slot#content 傳入DOM String
String

top/right/bottom/left

top

trigger

#tooltip觸發方式

String

—######hover###############相關推薦:####### ##詳解原生JavaScript實作Tooltip浮動提示框特效的圖文程式碼#############jquery+CSS建立自訂的a標籤title提示tooltip範例########### ##jQuery EasyUI 教學-Tooltip(提示框)#######

以上是Vue組件之Tooltip實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!