手仿antd–message消息

时间:2021-6-12 作者:qvyue

bullet 需求分析

    approx  消息的内容、显示时常是可自定义的

    approx  需要内置一些常用图标

bullet 基本实现

    star  定义Message类,考虑到调用方式除了message.funcName之外还会有传递配置项的需求,将success、info等作为静态方法暴露

手仿antd--message消息

    star  由于success、info等函数的接受参数以及内部实现几乎是一样的,故生命一个公共函数alert,并通过bind方式将不同的函数类型传入

手仿antd--message消息

    star  消息的模板是固定的,只需要替换icon图标、content内容即可,故考虑将这一部分提取成单独组件layout并作为props接收这些可变值

手仿antd--message消息

    star  alert函数如下

手仿antd--message消息

        ominus  通过观察ant和element,我发现他们都是在消息调用时向body中动态添加了div,我这里通过辅助函数_getMsgBox函数做这件事

手仿antd--message消息

        ominus 辅助函数_iconName则根据用户调用的不同方法名获取不同的图标类型和主题,这将传递给layout组件中的icon组件使用

手仿antd--message消息

        ominus  创建timer遍历,它是setTimeout的返回值,将在message卸载时被调用

        ominus  如果不传时常,则默认1s后消息弹窗被关闭

        ominus  由于message将作为函数而非组件被使用,故考虑react-dom提供的render函数以加载layout组件,它的参数二是一个回调函数,相当于class组件的componentDidMount生命周期

        ominus  在render回调中我们将执行对已弹出消息动画的创建与”回收”

            cdot  辅助函数_calculateDistance用来计算当前要生成的消息弹窗应该在动画结束后停在哪个位置,而name属性则又会作为animate动画的函数名

手仿antd--message消息

            cdot  辅助函数_createAnimate用来创建动画,其实就是动态向页面的head标签内添加一个style标签

手仿antd--message消息

                    在框红一的位置,将生成动态的animate动画

手仿antd--message消息

                    框红二的位置,则在动画结束后通知准备销毁

            cdot  在动画执行结束后收到反馈时将调用react-dom提供unmountComponentAtNode方法对组件进行卸载,但是该方法只会卸载知道dom节点内的子节点,对于节点本事需要手动销毁,我这里定义了辅助函数_unmountMsgDiv

手仿antd--message消息

    star 使用

手仿antd--message消息
手仿antd--message消息
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。