欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue组件之Tooltip的示例代码

程序员文章站 2022-07-06 20:18:27
前言 本文主要alert 组件的大致框架, 提供少量可配置选项。 旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息。 模板结构...

前言

本文主要alert 组件的大致框架, 提供少量可配置选项。 旨在大致提供思路

tooltip

常用于展示鼠标 hover 时的提示信息。

模板结构

<template>
 <div style="position:relative;">
  <span ref="trigger">
   <slot>
   </slot>
  </span>
  <div class="tooltip"
   v-bind:class="{
    'top':   placement === 'top',
    'left':  placement === 'left',
    'right':  placement === 'right',
    'bottom': placement === 'bottom',
    'disable': type === 'disable',
    'delete': type === 'delete',
    'visible': show === true 
   }"
   ref="popover"
   role="tooltip">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner">
    <slot name="content" v-html="content"></slot>
   </div>
  </div>
 </div>
</template>

大致结构dom结构 一个div 包含 箭头 及 气泡内容。

v-bind中可选tooltip位置,是否禁用,及显示隐藏

slot 差值供自定义 默认接收content内容

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;

封装的事件监听

使用

使用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 显示的内容,也可以通过 slot#content 传入 dom string
placement tooltip 的出现位置 string top/right/bottom/left top
trigger tooltip触发方式 string hover

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。