react页面引导组件, 支持语音播报

最新推荐文章于 2024-06-21 14:22:52 发布

weixin_33991727

最新推荐文章于 2024-06-21 14:22:52 发布

阅读量2.6k

点赞数 1

文章标签： javascript 移动开发前端 ViewUI

原文链接：https://juejin.im/post/5ca859ccf265da30b53ed07b

版权

本文介绍了如何实现一个React页面引导组件，包括遮罩层、提示框、内容区和语音功能。组件通过DOM自定义属性获取引导内容，支持在页面缩放时重新布局，并集成了语音播报功能，使用`<audio>`标签结合百度语音API，提供良好的用户体验。同时，提供了安装、API和使用示例。

摘要由CSDN通过智能技术生成

页面引导在用户第一次访问网站能过提供很好的提示, 下面介绍基于react写的一个页面引导的组件. 演示地址

效果图

Guide组件的实现

可以把<Guide/>设计成一个容器组件, 因为我们不知道要引导的内容是什么, 通过容器组件的this.props.children渲染内容

class Guide extends Component {
    render () {
        return (
            <div className="guide-container" ref={e => this.guide = e}>
              {this.props.children}
            </div>
        )
    }
}
复制代码

如何获取哪些是要引导的dom? 可以通过dom的自定义属性, 再通过querySelectorAll获取

// example
<Guide >
    <header data-step="1" data-tip='Welcome to use react-guide'>React Guide</header>
</Guide>
// 获取要引导的dom
this.guide.querySelectorAll('[data-step]')
复制代码

<Guide/>组件还需要有: 遮罩层、提示框、内容区、语音功能, 4个部分.

遮罩层

遮罩层通过fixed布局,加个透明度就好了, 通过外面传来的visible控制显示

class Guide extends Component {
    render () {
        return (
            <div className="guide-container" ref={e => this.guide = e}>
              {this.props.children}
              {this.props.visible&&<div className="guide-shadow" ref={e => this.sha