资讯专栏INFORMATION COLUMN

Vue组件之Tooltip

silenceboy / 3270人阅读

摘要:前言本文主要组件的大致框架,提供少量可配置选项。旨在大致提供思路常用于展示鼠标时的提示信息。由属性决定展示效果属性值为方向对齐位置四个方向。属性用于设置触发的方式,默认为。

前言

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

tooltip

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

模板结构

大致结构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属性值为:方向-对齐位置;四个方向:topleftrightbottomtrigger属性用于设置触发tooltip的方式,默认为hover


  鼠标移动到我上面试试


  点我试试
content内容分发

设置一个名为contentslot


  鼠标移动到我上面试试
  

我是内容分发的conent。

Attributes
参数 说明 类型 可选值 默认值
content 显示的内容,也可以通过 slot#content 传入 DOM String
placement Tooltip 的出现位置 String top/right/bottom/left top
trigger tooltip触发方式 String hover

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89137.html

相关文章

  • Tooltip组件拆解

    摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...

    miya 评论0 收藏0
  • Tooltip组件拆解

    摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...

    khlbat 评论0 收藏0
  • Tooltip组件拆解

    摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...

    marser 评论0 收藏0
  • 手把手教你撸个vue2.0弹窗组件

    摘要:组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置,之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示,也可以只用于简单信息的展示。可以通过属性来显示任意标题,通过属性来修改显示区域的宽度。 手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/k...

    mrli2016 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<