v-tooltip

简介

v-tooltip 指令用于通过使用 Tooltip 组件为目标元素添加提示信息。

示例

<template>
<article>
  <veui-button
    v-tooltip="'Preview'"
    ui="icon"
  >
    <veui-icon name="zoom-in"/>
  </veui-button>
  <veui-button
    v-tooltip="'Upload'"
    ui="icon"
  >
    <veui-icon name="upload"/>
  </veui-button>
  <veui-button
    v-tooltip="'Remove'"
    ui="icon"
  >
    <veui-icon name="trash"/>
  </veui-button>
</article>
</template>

<script>
import { Button, Icon, tooltip } from 'veui'
import 'veui-theme-dls-icons/zoom-in'
import 'veui-theme-dls-icons/upload'
import 'veui-theme-dls-icons/trash'

export default {
  components: {
    'veui-button': Button,
    'veui-icon': Icon
  },
  directives: {
    tooltip
  }
}
</script>

<style lang="less" scoped>
.veui-button + .veui-button {
  margin-left: 8px;
}
</style>

API

绑定值

类型:string | Object

使用 string 类型表示提示的文本信息:

<button v-tooltip="添加">+</button>

使用 Object 类型时绑定值可完整配置所有参数。例如:

<button v-tooltip="{
  content: '添加',
  position: 'top',
  disabled: false
}">+</button>
参数类型默认值描述
contentstring | VNode | Array<VNode>-提示信息字符串或通过渲染函数返回的虚拟节点(数组)。
positionstring-浮层提示的展示位置。参考 Tooltip 组件的 position 属性。
disabledbooleanfalse是否禁用浮层提示。

修饰符

对应 Object 类型绑定值中的 position。例如:

<button v-tooltip.bottom-end="添加">+</button>

全局配置

配置项类型默认值描述
tooltip.warmupnumber800完成“预热”所需的毫秒数。
tooltip.cooldownnumber800完成“冷却”所需要的毫秒数。