其他指令

除了 Drag (拖拽) 和 Resize (尺寸监听) 这两个独立的交互指令外，TechUI 还为高频使用的浮层组件提供了快捷指令版本。

使用这些指令，您可以直接将交互行为绑定到现有的 DOM 元素上，而无需改变 HTML 结构进行组件嵌套。

这些指令在对应的组件文档中均有提及，所以这些指令集合在一个文档中，不再用独立章节进行介绍。

气泡提示

用于快速唤起 Poptip (文字提示) 或 Popinfo (信息卡片)。

它是 TuiPoptip 和 TuiPopinfo 组件的指令化封装，通过 appearance 属性进行形态切换。

基础用法

<template>
  <div class="row">
    <TuiButton 
      v-tui-popover="{ 
        content: '这是一个基础提示', 
        placement: 'top',
        type: 'primary'
      }"
    >
      文字提示
    </TuiButton>

    <TuiButton 
      v-tui-popover="{ 
        appearance: 'popinfo',
        title: '详细信息', 
        content: '这是一段包含标题的卡片内容。', 
        trigger: 'click' 
      }"
    >
      卡片提示
    </TuiButton>
  </div>
</template>

详细参数配置请参阅：[Poptip 文档] 或 [Popinfo 文档]

弹出菜单

用于快速为元素绑定 Menu (菜单) 功能。

它是 TuiMenu 组件的轻量化实现，支持左键点击、悬停或右键菜单，数据源完全由 menus 数组驱动。

基础用法

<script setup>
const menuData = [
  { label: '复制', value: 'copy', icon: 'ti-copy' },
  { label: '粘贴', value: 'paste', icon: 'ti-paste' }
]
</script>

<template>
  <div 
    class="context-area"
    v-tui-menu="{ 
      trigger: 'contextmenu', 
      menus: menuData,
      menuClick: (params) => console.log(params)
    }"
  >
    在此区域点击右键
  </div>
</template>

详细参数配置请参阅：[Menu 文档]

跟随提示

用于生成跟随鼠标移动的 CursorTip (光标提示)。

它通过虚拟锚点技术让提示框实时吸附在鼠标旁。常用于需要实时反馈状态的区域（如地图探索、绘图板、状态指示）。

基础用法

<template>
  <div 
    class="explore-zone"
    v-tui-cursor-tip="{ 
      title: '区域 A',
      content: '状态：正常运行', 
      type: 'success',
      caretOffset: 15
    }"
  >
    Hover Me
  </div>
</template>

详细参数配置请参阅：[CursorTip 文档]