![apex.webp](https://r2-1.lantz.fun/lantz-record/img/8cd900bc3800f946b0f8c93c75008c94.apex.webp)



::video{input="7631615020178181427" source="douyin"}
::video{input="7631614988360240411" source="douyin"}
::video{input="7631613820611415346" source="douyin"}
::video{input="7631613803821600026" source="douyin"}
::video{input="7631613602872479003" source="douyin"}
::video{input="7631613602872429851" source="douyin"}

Apex Legends 4.24前

1. 指令核心逻辑：监听元素的 `mouseenter`/`mouseleave` 事件，动态计算边界位置并添加对应样式类；
2. 样式抽离：将 tooltip 样式封装为独立的 CSS 片段，全局引入即可；
3. 指令钩子适配：分别适配 Vue2 和 Vue3 的指令钩子生命周期。



---

## 一、Vue2 版本封装
### 1. 指令文件（`directives/tooltip.js`）
```javascript
// Vue2 自定义指令 v-tooltip
export default {
  // 绑定元素插入父节点时触发
  inserted(el, binding) {
    // 存储 tooltip 文本
    el.setAttribute('tooltip', binding.value || '默认提示');
    
    // 边界检测并设置 tooltip 方向
    const setTooltipDirection = () => {
      const rect = el.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      // 移除所有方向类
      el.classList.remove('tooltip-top', 'tooltip-bottom', 'tooltip-left', 'tooltip-right');

      // 边界检测逻辑
      if (rect.top < 80) {
        el.classList.add('tooltip-bottom');
      } else if (viewportHeight - rect.bottom < 80) {
        el.classList.add('tooltip-top');
      } else if (rect.left < 80) {
        el.classList.add('tooltip-right');
      } else if (viewportWidth - rect.right < 80) {
        el.classList.add('tooltip-left');
      } else {
        el.classList.add('tooltip-top');
      }
    };

    // 鼠标进入时计算方向
    el.addEventListener('mouseenter', setTooltipDirection);
    
    // 销毁时移除事件监听（Vue2 用 unbind 钩子）
    el._tooltipHandler = setTooltipDirection;
  },
  // 更新指令值时触发（比如 tooltip 文本变化）
  update(el, binding) {
    el.setAttribute('tooltip', binding.value || '默认提示');
  },
  // 解绑时清理
  unbind(el) {
    el.removeEventListener('mouseenter', el._tooltipHandler);
    delete el._tooltipHandler;
  }
};
```

### 2. 全局注册指令（`main.js`）
```javascript
import Vue from 'vue';
import tooltipDirective from './directives/tooltip';
// 引入 tooltip 样式（见下方通用样式）
import './styles/tooltip.css';

// 注册全局指令 v-tooltip
Vue.directive('tooltip', tooltipDirective);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

---

## 二、Vue3 版本封装
### 1. 指令文件（`directives/tooltip.js`）
```javascript
// Vue3 自定义指令 v-tooltip
export default {
  // 绑定元素挂载到 DOM 时触发（替代 Vue2 的 inserted）
  mounted(el, binding) {
    // 存储 tooltip 文本
    el.setAttribute('tooltip', binding.value || '默认提示');
    
    // 边界检测并设置 tooltip 方向
    const setTooltipDirection = () => {
      const rect = el.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      // 移除所有方向类
      el.classList.remove('tooltip-top', 'tooltip-bottom', 'tooltip-left', 'tooltip-right');

      // 边界检测逻辑
      if (rect.top < 80) {
        el.classList.add('tooltip-bottom');
      } else if (viewportHeight - rect.bottom < 80) {
        el.classList.add('tooltip-top');
      } else if (rect.left < 80) {
        el.classList.add('tooltip-right');
      } else if (viewportWidth - rect.right < 80) {
        el.classList.add('tooltip-left');
      } else {
        el.classList.add('tooltip-top');
      }
    };

    // 鼠标进入时计算方向
    el.addEventListener('mouseenter', setTooltipDirection);
    
    // 存储 handler 以便卸载时移除
    el._tooltipHandler = setTooltipDirection;
  },
  // 更新指令值时触发
  updated(el, binding) {
    el.setAttribute('tooltip', binding.value || '默认提示');
  },
  // 解绑时清理（Vue3 用 unmounted 钩子）
  unmounted(el) {
    el.removeEventListener('mouseenter', el._tooltipHandler);
    delete el._tooltipHandler;
  }
};
```

### 2. 全局注册指令（`main.js`）
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import tooltipDirective from './directives/tooltip';
// 引入 tooltip 样式（见下方通用样式）
import './styles/tooltip.css';

const app = createApp(App);

// 注册全局指令 v-tooltip
app.directive('tooltip', tooltipDirective);

app.mount('#app');
```

---

## 三、通用样式文件（`styles/tooltip.css`）
```css
/* 无箭头 Tooltip 通用样式 */
[tooltip] {
  position: relative;
  z-index: 10;
  cursor: pointer;
}

/* Tooltip 气泡样式 */
[tooltip]::before {
  content: attr(tooltip);
  position: absolute;
  padding: 6px 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 14px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: var(--transform);
  animation: tooltip-fade 0.2s ease-in forwards;
  display: none;
}

/* hover 显示气泡 */
[tooltip]:hover::before {
  display: block;
}

/* 透明度动画 */
@keyframes tooltip-fade {
  0% {
    opacity: 0;
    transform: var(--transform);
  }
  100% {
    opacity: 1;
    transform: var(--transform);
  }
}

/* 各方向定位 */
.tooltip-top::before {
  bottom: calc(100% + 8px);
  left: 50%;
  --transform: translateX(-50%);
}

.tooltip-bottom::before {
  top: calc(100% + 8px);
  left: 50%;
  --transform: translateX(-50%);
}

.tooltip-left::before {
  right: calc(100% + 8px);
  top: 50%;
  --transform: translateY(-50%);
}

.tooltip-right::before {
  left: calc(100% + 8px);
  top: 50%;
  --transform: translateY(-50%);
}
```

---

## 四、使用示例（Vue2/Vue3 通用）
```vue
<template>
  <div style="display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 90vh; padding: 20px;">
    
    <button v-tooltip="'顶部边界，我往下弹'" style="align-self: flex-start;">顶部边界</button>
    <button v-tooltip="'底部边界，我往上弹'" style="align-self: flex-end;">底部边界</button>
    <button v-tooltip="'左侧边界，我往右弹'" style="align-self: center;">左侧边界</button>
    <button v-tooltip="'右侧边界，我往左弹'" style="align-self: center;">右侧边界</button>
    <button v-tooltip="'中间区域，默认往上弹'" style="align-self: center; margin: auto;">中间区域</button>
    
    
    <button v-tooltip="dynamicText" style="margin: 20px auto;">动态提示</button>
  </div>
</template>
<script>
export default {
  // Vue2 写法
  data() {
    return {
      dynamicText: '我是动态变化的提示文本'
    };
  }
  // Vue3 组合式 API 写法
  // setup() {
  //   const dynamicText = ref('我是动态变化的提示文本');
  //   return { dynamicText };
  // }
};
</script>

```

---

### 关键适配说明
| 对比项 | Vue2 版本 | Vue3 版本 |
| --- | --- | --- |
| 挂载钩子 | `inserted` | `mounted` |
| 解绑钩子 | `unbind` | `unmounted` |
| 注册方式 | `Vue.directive()` | `app.directive()` |
| 核心逻辑 | 完全一致（边界检测/样式） | 完全一致（边界检测/样式） |


### 总结
1. **核心功能**：两个版本都实现了「无箭头 tooltip + 自动边界检测 + 方向切换」，样式和交互完全一致；
2. **使用方式**：只需在元素上添加 `v-tooltip="提示文本"` 即可使用，支持静态/动态文本；
3. **扩展建议**：
    - 可在指令中添加配置项（比如自定义间距、背景色），通过 `binding.modifiers` 或 `binding.arg` 实现；
    - 样式可按需修改 `tooltip.css` 中的间距（8px）、背景色、动画时长等；
    - 如需兼容低版本浏览器，可添加 `@supports` 降级处理或 polyfill。

你可以直接将对应版本的代码复制到项目中，引入样式后即可全局使用 `v-tooltip` 指令，无需重复编写 tooltip 逻辑。

自定义tooltip指令

模块化不是简单的文件拆分，而是构建可维护、可扩展应用架构的艺术。在Vue生态中，合理的模块化设计能让项目从"能跑"进化到"好维护"。



### Vue 2 项目目录结构
#### 小型项目（传统分层）
```bash
vue2-small/
├── src/
│   ├── api/                  # 所有接口
│   │   ├── user.js
│   │   └── order.js
│   ├── components/           # 公共组件
│   │   ├── Header.vue
│   │   └── Modal.vue
│   ├── views/                # 页面组件
│   │   ├── Home.vue
│   │   ├── User.vue
│   │   └── Order.vue
│   ├── utils/                # 工具函数
│   │   ├── request.js
│   │   └── validate.js
│   ├── router/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   ├── App.vue
│   └── main.js
├── public/
└── package.json
```

#### 中型项目（业务模块）
```bash
vue2-medium/
├── src/
│   ├── common/               # 公共沉淀
│   │   ├── components/
│   │   ├── utils/
│   │   └── styles/
│   ├── modules/              # 业务模块
│   │   ├── user/
│   │   │   ├── components/   # 模块私有组件
│   │   │   ├── api/          # 模块接口
│   │   │   ├── views/        # 模块页面
│   │   │   └── store.js      # 模块状态
│   │   └── order/
│   │       ├── components/
│   │       ├── api/
│   │       ├── views/
│   │       └── store.js
│   ├── router/
│   ├── store/                # 全局状态
│   ├── utils/                # 全局工具
│   ├── App.vue
│   └── main.js
├── public/
└── package.json
```

#### 大型项目（领域驱动）
```bash
vue2-large/
├── src/
│   ├── domains/              # 领域层
│   │   ├── user/
│   │   │   ├── components/
│   │   │   ├── api/
│   │   │   ├── store/
│   │   │   ├── types/
│   │   │   └── index.js
│   │   └── order/
│   │       ├── components/
│   │       ├── api/
│   │       ├── store/
│   │       ├── types/
│   │       └── index.js
│   ├── infrastructure/       # 基础设施层
│   │   ├── http/
│   │   ├── auth/
│   │   └── config/
│   ├── shared/               # 共享层
│   │   ├── components/
│   │   ├── utils/
│   │   └── hooks/
│   ├── app/                  # 应用层
│   │   ├── router/
│   │   ├── store/
│   │   └── main.js
│   └── App.vue
├── tests/
├── docs/
└── package.json
```

---

### Vue 3 项目目录结构
#### 小型项目（Vite 默认）
```bash
vue3-small/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── composables/          # 组合式函数
│   │   └── useCounter.js
│   ├── router/
│   ├── stores/               # Pinia
│   ├── App.vue
│   └── main.js
├── public/
├── index.html
└── package.json
```

#### 中型项目（组合式功能）
```bash
vue3-medium/
├── src/
│   ├── features/             # 功能模块
│   │   ├── user/
│   │   │   ├── components/
│   │   │   ├── api/
│   │   │   ├── composables/  # 模块逻辑
│   │   │   ├── views/
│   │   │   └── types.ts
│   │   └── order/
│   │       ├── components/
│   │       ├── api/
│   │       ├── composables/
│   │       ├── views/
│   │       └── types.ts
│   ├── shared/               # 共享资源
│   │   ├── components/
│   │   ├── composables/      # 全局组合式函数
│   │   ├── utils/
│   │   └── styles/
│   ├── stores/               # Pinia stores
│   ├── router/
│   ├── types/                # 全局类型
│   ├── App.vue
│   └── main.ts
├── public/
├── index.html
└── package.json
```

#### 大型项目（Monorepo + TS）
```bash
vue3-large/
├── apps/
│   ├── web/                  # Web 应用
│   │   ├── src/
│   │   │   ├── features/
│   │   │   ├── shared/
│   │   │   ├── stores/
│   │   │   └── main.ts
│   │   └── package.json
│   └── admin/                # 管理后台
│       ├── src/
│       └── package.json
├── packages/
│   ├── ui/                   # UI 组件库
│   │   ├── src/
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── utils/                # 工具包
│   │   ├── src/
│   │   └── package.json
│   ├── types/                # 类型定义
│   │   ├── src/
│   │   └── package.json
│   └── api-client/           # API 客户端
│       ├── src/
│       └── package.json
├── domains/                  # 领域层 (可选)
│   ├── user/
│   └── order/
├── pnpm-workspace.yaml
├── turbo.json
├── tsconfig.json
└── package.json
```

---

### 关键差异对比
| 维度 | Vue 2 | Vue 3 |
| :--- | :--- | :--- |
| **逻辑组织** | 按选项类型分散 (`data`/`methods`) | 按功能集中 (`composables`) |
| **类型支持** | 弱 (`props`/`$emit` 难推断) | 强 (原生 TS，`defineProps`) |
| **状态管理** | Vuex (单一 store 或多 module) | Pinia (多 store，更轻量) |
| **构建工具** | Webpack 为主 | Vite 为主 |
| **大型项目** | 配置复杂，构建慢 | Monorepo 友好，构建快 |