This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

TIP 👉 thousands of mill strike is still strong, Ren Erdong southwest north wind. — Zheng Xie “Bamboo Stone”

preface

Web Component is an area that the front-end world has been very enthusiastic about. To implement it with third-party componentized frameworks, you need to rely on a lot of things in the framework itself. Most of the time we just have a few simple components, not too big, not too many, so in order to keep the components lightweight, Simple, we don’t really want to use a third party framework at this point.

Message Global Message

import

import Message from '@/components/Message/Message';
Copy the code

Props

1. visible

• Types: bool
• Default value: false
• Description: Whether visible

2. type

• Type: string
• Default value: basic
• Description: Prompt type

3. content

• Type: string | ReactNode
• Default value: none
• Description: Prompt content

4. duration

• Type: number
• Default value: 3000
• Description: Delay for automatic shutdown, in milliseconds

5. top

• Type: number
• Default value: 18
• Description: Position of the message from the top

Let’s write code to implement message.js

import React from 'react';
import PropTypes from 'prop-types';
const classNames = require('classnames');
import './message.scss';

/** * Message Global Message */
class Message extends React.Component {
    // Check the input type
    static propTypes = {
        // Whether to display
        visible: PropTypes.bool,
        / / type
        type: PropTypes.string,
        // Prompt content
        content: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.node]
        ),
        // Automatic shutdown delay, in milliseconds
        duration: PropTypes.number,
        // The location of the prompt message from the top
        top: PropTypes.number,
    };

    // Enter the default value
    static defaultProps = {
        visible: false.type: 'basic'.duration: 3000.top: 18
    };

    constructor(props) {
        super(props);
        this.removeMessage = this.removeMessage.bind(this);
    }

    componentWillMount() {
        this.removeMessage();
    }

    componentWillReceiveProps(nextProps) {
        const { visible } = nextProps;
        this.setState({
            visible: visible,
        });
        if (visible) {
            this.removeMessage(); }}removeMessage() {
        const { duration } = this.props;
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(() = > {
            this.setState({
                visible: false}); }, duration); }render() {
        const {visible, type, content, top} = this.props;

        var iconClass1 = classNames('icon', {[`icon-${type}`]: type
        });

        let iconClass2 = ' ';
        switch (type) {
            case 'success':
                iconClass2 = 'icon-jieguoye';
                break;
            case 'error':
                iconClass2 = 'icon-guanbishibaixianxing';
                break;
            case 'warning':
                iconClass2 = 'icon-xinxi-xianxing';
                break;
            case 'basic':    
            default:
                iconClass2 = 'icon-xinxi-xianxing';
                break;
        }

        if(! visible)return null;

        return (
            <div className="message" style={{top: parseFloat(top) + 'px'}} >
                <div className={`message-boxThe ${type} `} >
                    {
                        <p>
                            <i className={` ${iconClass1} ${iconClass2} `} ></i>
                            {content}
                        </p>
                    }
                </div>
            </div>)}}export default Message;
Copy the code

Style message. SCSSS

@import '.. /.. /scss/util.scss'; .message { position: fixed; top: 16px; right: 0; z-index: 1000; width: 100%; text-align: center; } .message-box { display: inline-block; margin: 0 auto; font-size: 14px; color: #fff; text-align: left; p { padding: 8px 20px; text-align: center; .icon{ margin-right: 10px; }} &. Basic {background:rgba(0,153,255,0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } &. Success {background: rgba (44215170,0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } &. Error {background: rgba (242,39,53,0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } &. Warning {background: rgba (248172,48,0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }}Copy the code

“Feel free to discuss in the comments section.”

Hope to finish watching friends can give a thumbs-up, encourage once