Vue3从0到1组件开发-系统组件：Tooltip文字提示

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

Tooltip是指什么呢？

这里呢，Tooltip文字提示顾名思义，就是文字提示了... 废话吼。

说一千道一万，看个图片全明了。

先看一个经典的案例。

先不管图片内容是啥，有经验的小伙伴一眼就看出来，这是img图片标签的alt的属性，而其他的标签也可以借助title属性来实现这一效果。

这里随便改了下dom，添加了title属性来实现。

当然这些都是默认的效果，并且需要鼠标停留1-2秒才能看到这个属性的效果。

而今天要分析的文字提示组件实现的就是这一效果，只是相比起默认的效果，反应更快，毕竟自己封装组件的话，是可以自定义展示的时间的。

并且可以通过组件来自定义显示的位置。

结构，结构，结构。再说一次

再开发之前，当然还是看一波效果，然后分析下，组件要完成的事情。

看到效果之后，单纯的布局和css样式还是比较好处理的。

block content
div.yx-tooltip(
  @mouseenter="handleShowPopper" 
  @mouseleave="handleClosePopper"
)
  div.yx-tooltip-rel(ref="reference")
    slot
  transition(name="fade")
    div(
      :class="['yx-tooltip-popper' `yx-tooltip-${theme}`]"
      ref="popper"
      v-show="!disabled && (visible||always)"
      @mouseenter="handleShowPopper"
      @mouseleave="handleClosePopper"
      :data-transfer="transfer"
    )
      div.yx-tooltip-content
        div.yx-tootip-arrow
        div( :class="['yx-tootip-inner', !maxWidth ? 'yx-tooltip-inner-width' : '']" )
          slot

结构比较简单，也可以自定义，主要是需要提前写好对应的css；

当然也可以试图用在JavaScript逻辑部分进行计算。

逻辑部分

这一块的逻辑部分，因为显示方式、位置之类的信息交由html和css来完成，所及逻辑部分比较简单。

主要是控制显示隐藏就可以。

let timeout;
const handleShowPopper = () => {
  if (timeout) clearTimeout(timeout);
  timeout = setTimeout(() => {
    visiblevalue = true;
  }, props.delay);
}
const handleClosePopper = () => {
  if (timeout) {
    clearTimeout(timeout);
    if (!props.controlled) {
      timeout = setTimeout(() => {
        props.visible = false;
      }, 100);
    }
  }
}

主要部分就是这些了，具体的样式可以自定义了。

挂在组件。

因为是在界面中调用使用的，所以使用最开始的时候的挂载方式即可。

import ele from './tooltip.vue';

ele.install = function(app){
  app.component(ele.name, ele)
}

export default ele;