ecode页面引导 (泛微 OA E9)

原创已于 2024-09-25 22:28:37 修改 · 856 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

于 2024-01-22 20:11:27 首次发布

泛微OA 专栏收录该内容

19 篇文章

订阅专栏

该篇文章展示了如何在React项目中集成antd和WeaIntro库，实现一个带有步骤控制和定时器功能的交互式引导过程。

部署运行你感兴趣的模型镜像

const { Button, Popover } = antd;
const { WeaIntro } = ecCom;
const { Intro, Step } = WeaIntro;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible1: true
    };
  }

  onReady = intro => {
    this.intro = intro;
    const end = () => {
      this.setState({
        visible1: false,
      });
    };
    this.intro.onchange(ele => console.log("id", ele.id));
    this.intro.onnextbuttonclick(step => {
      this.setState({ visible1: false});
      return false;
    });
    this.intro.oncomplete(end);
    this.intro.onexit(end);
    this.intro.setOptions({
      steps: [
        {
          element: "#step_1",
          intro: "step 1",
        },
      ],
    });
    this.intro.refresh(); // 刷新队列
    this.intro.start(); // 开始引导
  };

  render() {
    const { visible1 } = this.state;
    return (
      <div className="step_3">
        {visible1 && 
          <div>
            <Intro onReady={this.onReady} />
            <Step id="step_1">定时器防止动画未完成白屏12323332</Step> 
          </div>
        }
  
      </div>
    );
  }
}
ecodeSDK.setCom("${appId}", "Demo", Demo);