react中基于Antd Mobile封装Toast组件支持自定义背景色

L863683305

已于 2022-04-25 16:40:41 修改

阅读量1.1k

点赞数

文章标签：前端 reactjs

于 2022-04-25 16:25:06 首次发布

本文链接：https://blog.csdn.net/L863683305/article/details/124407694

版权

js文件：

import {Toast} from "antd-mobile";
import './index.css';

/**
 * custom_toast_error: error
 * custom_toast_warn: warn
 * custom_toast_normal: normal
 * */

export const customToast = ({className, text, duration = 2000}) => {
    const element = document.getElementsByClassName(className);
    if (!element || element.length < 1) {
        const create_div = document.createElement('div')
        create_div.setAttribute('class', className)
        document.body.appendChild(create_div)
    }

    return Toast.show({
        getContainer: document.getElementsByClassName(className)[0],
        content: text,
        duration: duration
    })

}

css文件：

.custom_toast_error .adm-toast-mask .adm-toast-main-text {
    background: #FF0000 !important;
}

.custom_toast_warn .adm-toast-mask .adm-toast-main-text {
    background: rgba(255, 116, 0, 0.6) !important;
}

.custo