77 lines
1.5 KiB
Markdown
77 lines
1.5 KiB
Markdown
|
# @r-utils/vue2
|
|||
|
|
|
|||
|
|
仅用于 Vue2 项目的工具包。
|
|||
|
|
|
|||
|
|
## 适用范围
|
|||
|
|
|
|||
|
|
- 适用于 Vue2 项目。
|
|||
|
|
- 适用于需要根据页面可见性触发组件 `onShow` / `onHide` 的场景。
|
|||
|
|
|
|||
|
|
## 不适用范围
|
|||
|
|
|
|||
|
|
- 不适用于 Vue3 项目。
|
|||
|
|
- 如果是 uni-app 专用能力，建议优先使用 `@r-utils/uni-app`。
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
pnpm add @r-utils/vue2
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 导入方式
|
|||
|
|
|
|||
|
|
### 推荐：根入口导入
|
|||
|
|
|
|||
|
|
大多数场景推荐从根入口导入，路径简单，使用心智负担更低。
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import Vue from "vue";
|
|||
|
|
import { VisibilityPlugin } from "@r-utils/vue2";
|
|||
|
|
|
|||
|
|
Vue.use(VisibilityPlugin);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
也可以使用默认导出：
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import Vue from "vue";
|
|||
|
|
import VisibilityPlugin from "@r-utils/vue2";
|
|||
|
|
|
|||
|
|
Vue.use(VisibilityPlugin);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 兼容：子路径导入
|
|||
|
|
|
|||
|
|
如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import Vue from "vue";
|
|||
|
|
import VisibilityPlugin from "@r-utils/vue2/plugins/visibility";
|
|||
|
|
|
|||
|
|
Vue.use(VisibilityPlugin);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 当前能力
|
|||
|
|
|
|||
|
|
| 子路径 | 说明 |
|
|||
|
|
| --- | --- |
|
|||
|
|
| `@r-utils/vue2/plugins/visibility` | 基于页面可见性变更触发 `onShow` / `onHide` |
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
export default {
|
|||
|
|
onShow() {
|
|||
|
|
console.log("页面显示");
|
|||
|
|
},
|
|||
|
|
onHide() {
|
|||
|
|
console.log("页面隐藏");
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
|
|||
|
|
- 本包依赖 Vue2，请确保业务项目已安装兼容版本的 `vue`。
|