Vue 컴포넌트의 Tooltip 인스턴스에 대한 자세한 설명

小云云
풀어 주다: 2018-01-09 13:50:00
원래의
4469명이 탐색했습니다.

이 글에서는 주로 Vue 컴포넌트의 Tooltip 샘플 코드를 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

머리말

이 문서에서는 주로 경고 구성 요소의 일반적인 프레임워크를 간략하게 설명하고 구성 가능한 소수의 옵션을 제공합니다. 대략적인 아이디어 제공을 목표로 함

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;
로그인 후 복사

캡슐화된 이벤트 모니터링

사용

content 속성을 사용하여 마우스를 가져갈 때 프롬프트 정보를 결정합니다. 표시 효과는 배치 속성에 의해 결정됩니다. 배치 속성 값은 방향 - 정렬 위치, 네 방향: 위쪽, 왼쪽, 오른쪽, 아래쪽입니다. Trigger 속성은 툴팁을 트리거하는 방법을 설정하는 데 사용됩니다. 기본값은 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

content라는 이름의 슬롯을 설정합니다.


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

Attributes

Parameters Description Type 선택적 값 기본값
콘텐츠 에서 표시되는 콘텐츠는 슬롯#을 통해서도 표시할 수 있습니다. DOM String
placement Tooltip이 나타나는 위치에 전달 String top/right/bottom/left top
trigger 툴팁 트리거 방법 String hover

관련 권장 사항:

도구 설명 부동 프롬프트 상자 특수 효과를 구현하기 위한 기본 JavaScript의 그래픽 코드에 대한 자세한 설명

jquery+CSS를 사용하여 사용자 정의 태그 제목 프롬프트 툴팁 예시

jQuery EasyUI 튜토리얼-툴팁(프롬프트 상자)

위 내용은 Vue 컴포넌트의 Tooltip 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!