v-tips 提示框指令

简介

为任意元素添加提示框效果，基于 Element Plus 的 Tooltip 组件封装，提供简洁易用的指令式调用方式。

基本用法

基本文本提示

通过字符串直接设置提示文本：

<template>
  <button v-tips="'这是一个提示信息'">鼠标悬停查看提示</button>
</template>

对象形式配置

通过对象配置提示框的各种属性：

<template>
  <button v-tips="{ content: '这是配置化的提示信息', placement: 'top' }">顶部提示</button>
</template>

参数说明

参数	说明	类型	默认值
content	提示内容	string	-
placement	提示框出现位置	string	bottom
appendTo	提示框挂载目标元素	Element	当前元素
其他属性	支持 Element Plus Tooltip 组件的所有配置项	object	-

使用示例

不同位置的提示

<template>
  <div class="tips-demo">
    <button v-tips="{ content: '顶部提示', placement: 'top' }">顶部</button>
    <button v-tips="{ content: '右侧提示', placement: 'right' }">右侧</button>
    <button v-tips="{ content: '底部提示', placement: 'bottom' }">底部</button>
    <button v-tips="{ content: '左侧提示', placement: 'left' }">左侧</button>
  </div>
</template>

<style scoped>
.tips-demo {
  display: flex;
  gap: 20px;
  padding: 40px;
}
</style>

提示框主题设置

<template>
  <button
    v-tips="{
      content: '深色主题提示',
      placement: 'top',
      effect: 'dark',
    }"
  >
    深色主题
  </button>
</template>

注意事项

• 指令内部使用了 virtual-triggering: true 和 virtual-ref 来避免 DOM 嵌套问题，确保提示框正常显示
• 当直接传入字符串时，会自动作为 content 属性值，默认显示在底部
• 支持所有 Element Plus Tooltip 组件的配置项，可以通过对象形式传入