r-util-js/packages/vue2

@r-utils/vue2

仅用于 Vue2 项目的工具包。

适用范围

• 适用于 Vue2 项目。
• 适用于需要根据页面可见性触发组件 onShow / onHide 的场景。

不适用范围

• 不适用于 Vue3 项目。
• 如果是 uni-app 专用能力，建议优先使用 @r-utils/uni-app。

安装

pnpm add @r-utils/vue2

导入方式

推荐：根入口导入

大多数场景推荐从根入口导入，路径简单，使用心智负担更低。

import Vue from "vue";
import { VisibilityPlugin } from "@r-utils/vue2";

Vue.use(VisibilityPlugin);

也可以使用默认导出：

import Vue from "vue";
import VisibilityPlugin from "@r-utils/vue2";

Vue.use(VisibilityPlugin);

兼容：子路径导入

如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。

import Vue from "vue";
import VisibilityPlugin from "@r-utils/vue2/plugins/visibility";

Vue.use(VisibilityPlugin);

当前能力

子路径	说明
@r-utils/vue2/plugins/visibility	基于页面可见性变更触发 onShow / onHide

使用示例

export default {
  onShow() {
    console.log("页面显示");
  },
  onHide() {
    console.log("页面隐藏");
  },
};

注意事项

• 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
• 本包依赖 Vue2，请确保业务项目已安装兼容版本的 vue。