v-tooltip

简介

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

示例

基本用法

在 GitHub 上编辑此示例编辑
<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>

溢出时显示

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consequatur ad hic aspernatur maiores adipisci velit nostrum nobis, cum earum, incidunt repellendus ex! Fuga, fugit! Placeat quam ex minima laudantium.
Lorem upsum.

当无绑定值或不提供 content 参数时,将自动展示被绑定元素的 textContent 内容。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <div
      v-tooltip.overflow
      class="item"
    >
      {{ loremIpsum }}
    </div>
    <div
      v-tooltip.overflow="loremIpsum"
      class="item"
    >
      Lorem upsum.
    </div>
  </section>
</article>
</template>

<script>
import { tooltip } from 'veui'

const loremIpsum = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consequatur ad hic aspernatur maiores adipisci velit nostrum nobis, cum earum, incidunt repellendus ex! Fuga, fugit! Placeat quam ex minima laudantium.'

export default {
  directives: {
    tooltip
  },
  data () {
    return {
      loremIpsum
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  display: inline-block;
  margin-right: 12px;
  width: 200px;
  border: 1px solid #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

API

绑定值

类型:string | Object

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

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

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

<button v-tooltip="{
  content: '添加',
  position: 'top',
  disabled: false
}">+</button>
参数类型默认值描述
contentstring | VNode | Array<VNode>=-提示信息字符串或通过渲染函数返回的虚拟节点(数组)。如果不传,将默认使用对应元素的 textContent
positionstring-浮层提示的展示位置。参考 Tooltip 组件的 position 属性。
overflowbooleanfalse是否仅在目标元素内容溢出容器时显示悬浮提示。
disabledbooleanfalse是否禁用浮层提示。

修饰符

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

<span v-tooltip.bottom-end.overflow="添加">A paragraph of very long text...</span>

全局配置

配置项类型默认值描述
tooltip.warmupnumber800完成“预热”所需的毫秒数。
tooltip.cooldownnumber800完成“冷却”所需要的毫秒数。
在 GitHub 上编辑此页面编辑