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

TIP 👉 A hero is a man who has great ambition, good policy in his belly, the opportunity to contain the universe and swallow the ambition of heaven and earth. — Romance of The Three Kingdoms

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.

The Tag icon

import

import Tag from '@/components/Tag/Tag.js';
Copy the code

Props

1. prefixCls

• Type: string
• Default: ‘IS-tag’
• Description: Sets the style of the external element of the label

2. color

• Type: string
• Default value: none
• Note: Set the label style based on the color: White, PINK, red, yellow, orange, CYan, green, Blue, purple Set the label style based on the status: default, ERROR, WARN, SUCCESS, info

3. checked

• Types: bool
• Default value: none
• Note: This property can be set when the current label is switched

4. onClose

• Type: func
• Default value: none
• Note: Close the label’s callback

5. icon

• Type: string
• Default value: none
• Description: Set the label icon

6. transparent

• Types: bool
• Default value: false
• Note: Set whether the label background is transparent

7. className

• Type: string | array | object (key: style name, value: bool)
• Default value: none
• Description: Outermost element style

Let’s implement one such component

import React from 'react';
import { Component, PropTypes } from '.. /utils/';
import Icon from '.. /icon';
import './tag.scss';

export default class Tag extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: true}; }// Close the button operation
    close = (e) = > {
        const { onClose, children } = this.props;
        onClose && onClose(e, children);
        console.log('ddd', e.isDefaultPrevented())
        if (e.isDefaultPrevented()) return;
        this.setState({
            visible: false}); }isColorValue(color) {
        const span = document.createElement('span');
        span.style.color = color;
        if(span.style.color ! = =' ') return true;
        return false;
    }
    // Check the color value passed in
    isPresetColor(color) {
        return /^(white|pink|red|yellow|orange|cyan|green|blue|purple)$/.test(color);
    }

    render() {
        const{ prefixCls, color, onClose, icon, className, checked, children, transparent, ... others } =this.props;
        const { visible } = this.state;
        let colors = ' ';

        // Get the label style
        switch (color) {
            case 'default': colors = 'white'; break;
            case 'error': colors = 'red'; break;
            case 'warn': colors = 'orange'; break;
            case 'success': colors = 'green'; break;
            case 'info': colors = 'blue'; break;
            default: colors = color; break;
        }

        const cls = this.classNames(prefixCls, className, checked, {
            [`${prefixCls}-${colors}`] :this.isPresetColor(colors) && color,
            [`${prefixCls}-checkable`]: checked === false || checked === true.transparent: transparent
        });

        // Custom color values
        const styles = {};
        if (!this.isPresetColor(colors) && this.isColorValue(colors)) {
            styles.backgroundColor = colors;
        }

        return visible ? (
            <span {. others} style={styles} className={cls}>{/* with button label */} {icon &&<Icon type={icon} />} {children} {/* Define delete button */} {(onClose) &&<Icon type="close"
                      className={this.classNames({[` ${prefixCls}-icon-close`]: onClose})},onClick={this.close}
                />
                }
      </span>
        ) : null;
    }
}

Tag.propTypes = {
    // Customize the tag style
    prefixCls: PropTypes.string,
    // The color of the label display
    color: PropTypes.string,
    // Does the label have a background color? False is not selected
    checked: PropTypes.bool,
    // Delete label callback function
    onClose: PropTypes.func,
    // The icon before the label
    icon: PropTypes.string,
    // Whether the tag has a background
    transparent: PropTypes.bool,
    // Outermost element style
    className: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.array,
        PropTypes.objectOf(PropTypes.bool)
    ])
};

Tag.defaultProps = {
    // The label is displayed by default
    color: 'default'.// Label style defaults
    prefixCls: 'is-tag'.// Whether the tag has a background
    transparent: false};Copy the code

I’m going to leave the styles out for now

“Feel free to discuss in the comments section.”

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