umijs 使用wowjs 定义公共方法 多个组件引用 详细实例

umijs 是一个可插拔的企业级前端应用框架，它基于 React 和 TypeScript，并且遵循约定优于配置的原则。wowjs 是一个轻量级的库，用于实现元素的滚动动画。在 umijs 中使用 wowjs 来定义公共方法，可以让多个组件在滚动到页面的某个区域时触发动画效果。

以下是一个简单的实例，展示如何在 umijs 项目中定义一个公共的 wowjs 方法，并让多个组件引用这个方法来实现动画效果。

1. 首先，安装 wowjs 库到你的 umijs 项目中：

npm install wowjs --save

2. 在你的 umijs 项目中创建一个公共目录，比如 `utils`，然后在该目录下创建一个名为 `wow.js` 的文件，用来封装 wowjs 的初始化代码和公共方法。

3. 在 `utils/wow.js` 文件中，你可以这样编写代码：

import React, { useEffect } from 'react';
import WOW from 'wowjs';

// 定义公共方法，用于触发动画
const useWow = (options = {}) => {
  useEffect(() => {
    // 初始化 wowjs，可以根据需要设置配置项
    const wow = new WOW.WOW(options);
    // 启动 wowjs 动画
    wow.init();
    // 组件卸载时，清除 wowjs 实例
    return () => {
      wow.destroy();
    };
  }, []);
};

// 将公共方法暴露出去
export default useWow;

4. 在需要使用 wowjs 动画的组件中，导入并使用 `useWow` 钩子：

import React from 'react';
import useWow from '@/utils/wow';

const AnimatedComponent = () => {
  // 使用 useWow 钩子来触发动画
  useWow({
    // 这里可以传入 wowjs 的配置项，例如：
    boxClass: 'animate__animated animate__fadeInUp', // 动画效果类名
    mobile: false, // 禁用移动端动画
    live: 'resources', // 动画触发时机
  });

  return (
    <div className="animated-box">这里是动画内容</div>
  );
};

export default AnimatedComponent;

5. 在页面或布局组件中引入 `AnimatedComponent`，当滚动到该组件时，将触发动画效果。