Vue组件之Tooltip实例详解

前言

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

tooltip

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

模板结构

<template>
 <p style="position:relative;">
  <span ref="trigger">
   <slot>
   </slot>
  </span>
  <p 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">
   <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

封装的事件监听

使用

使用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

相关推荐：

详解原生JavaScript实现Tooltip浮动提示框特效的图文代码

jquery+CSS创建自定义的a标签title提示tooltip示例

jQuery EasyUI 教程-Tooltip（提示框）

以上就是Vue组件之Tooltip实例详解的详细内容，更多请关注Gxl网其它相关文章！