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`。
|