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


::video{input="ac48570594"}
::video{input="ac48570589"}
::video{input="ac48570612"}
::video{input="ac48570602"}
::video{input="ac48570604"}

Apex Legends 5.30晚

# 书源导入 —— 适用于“阅读”App

> 阅读 App **“阅读”** ，教你如何快速导入书源。



![image.png](https://r2-1.lantz.fun/lantz-record/img/76c3861594fda0e2389d9114f8ed629f.image.webp)

没下APP？ 下载分享：

:::info{title="阅读APP"}
[https://wwbwj.lanzouu.com/iuCSU3qpbgqd](https://wwbwj.lanzouu.com/iuCSU3qpbgqd)

密码:239d
:::



[书源推荐(点击访问)](https://yuedu.xiu2.xyz/)
### 1. 进去后复制链接

![946d19c379eadedb8a4f554c2a74d1a1.jpg](https://r2-1.lantz.fun/lantz-record/img/4dd58b8ae3a8aea35e7f573a9049e690.946d19c379eadedb8a4f554c2a74d1a1.webp)

### 2. 打开APP -> 个人 -> 书源管理 -> 右上角网络导入

![11.jpg](https://r2-1.lantz.fun/lantz-record/img/408d142ca92a8914dc13d2367195168b.11.webp)

### 3. 搜索（弹出的起点中文直接右上勾掉就行）

![22.jpg](https://r2-1.lantz.fun/lantz-record/img/f518ae60f173320f6a6729ad52beb3dd.22.webp)


> 搞定

"阅读"导入书源

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



::video{input="ac48559882"}
::video{input="ac48559718"}
::video{input="ac48559903"}
::video{input="ac48559907"}

Apex Legends 5.24-5.26

![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 逻辑。