VEUI

简介

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

VEUI 对通过 v-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.

在 GitHub 上编辑此页编辑

<template>
<article>
  <section>
    <div
      v-tooltip.overflow="loremIpsum"
      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>

参数	类型	默认值	描述
`content`	`string \| VNode \| Array<VNode>`	-	提示信息字符串或通过渲染函数返回的虚拟节点（数组）。
`position`	`string`	-	浮层提示的展示位置。参考 `Tooltip` 组件的 `position` 属性。
`overflow`	`boolean`	`false`	是否仅在目标元素内容溢出容器时显示悬浮提示。
`disabled`	`boolean`	`false`	是否禁用浮层提示。

修饰符

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

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

全局配置

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

在 GitHub 上编辑此页编辑