Tooltip

一个可以通过 <nly-tooltip> 组件或者 v-nly-tooltip 指令把提示框插组件的插件

<div class="text-center my-3">
  <nly-button v-nly-tooltip.hover title="`v-nly-tooltip` 指令提示框">
    移入鼠标查看效果
  </nly-button>

  <nly-button id="tooltip-target-1">
    移入鼠标查看效果
  </b-button>
  <nly-tooltip target="tooltip-target-1" triggers="hover">
    提示框 <b>组件</b>
  </b-tooltip>
</div>

<!-- tooltip.name -->
<!-- tooltip.vue -->

组件参数

<nly-tooltip>

props 参数

props (Click to sort Ascending)类型默认值描述
title
String标题文字
target
必传
String or or or Function or Objectlink 的 target 属性,可选_blank,_self,_parent,_top,framename
triggers
String or Array'hover focus'
placement
String'top'
fallback-placement
String or Array'flip'
variant
Stringnull主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark
custom-class
Stringnull
delay
Number or Object or String50
boundary
String or or Object'scrollParent'
boundary-padding
Number or String5
offset
Number or String0
no-fade
Booleanfalse无动画,设置true关闭动画
container
String or or Object
show
Booleanfalse
noninteractive
Booleanfalse
disabled
Booleanfalse禁用,设置true为禁用状态
id
Stringnull设置id

Slots

Slot NameDescription
tabs-start 在有内容的选项卡前面添加没有内容的选项卡
tabs-end 在有内容的选项卡最后面添加没有内容的选项卡
empty 当没有tab时渲染

Events

EventArgumentsDescription
input
  1. tabIndex - 当前可见tab的index
更新v-model值时触发
activate-tab v0.4.4+
  1. newTabIndex - tab激活之后的index
  2. prevTabIndex - 当前激活的tab的index,如果没有激活,那么默认为-1
  3. nlyEvt - NlyEvent对象. 防止冒泡
准备激活tab之前的index
changed
  1. currentTabs - 当前tabs中tab集合
  2. previousTabs - 未更新之前的tabs的tab集合
当一个tab被移除或者重新排序,或者新增一个tab时触发

<nly-tab>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
active
Booleanfalse设置 true 处于激活状态
tag
String'div'标签
button-id
String如果传入, 则可设置一个按钮来操作对应id的nly-tab可见状态,如果没用传入,会自动生成一个
title
String''标题文字
title-item-class
String or Array or Object选项卡控制器 li标签的 自定义css
title-link-class
String or Array or Object选项卡控制器里包裹的a标签自定义css
title-link-attributes
v0.4.4+
Object选项卡控制器里包裹的a标签 attributes属性
disabled
Booleanfalse禁用,设置true为禁用状态
no-body
Booleanfalse
lazy
Booleanfalse懒加载

Slots

Slot NameDescription
title tab标题插槽

Events

EventArgumentsDescription
click
  1. evt - 原生事件
点击tab时触发

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-tooltip>NlyTooltipnly-adminlte-vue
<nly-tab>NlyTabnly-adminlte-vue

例子

import { NlyTooltip } from 'nly-adminlte-vue'
Vue.component('nly-tooltip', NlyTooltip)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
TooltipPluginnly-adminlte-vue

例子

import { TooltipPlugin } from 'nly-adminlte-vue'
Vue.use(TooltipPlugin)