二次封装element 的提示框

最新推荐文章于 2024-06-15 14:14:14 发布

黄权彬DX

最新推荐文章于 2024-06-15 14:14:14 发布

阅读量73

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_54108198/article/details/132851812

版权

import { Notification, MessageBox } from 'element-ui';
import errorImage from '@/assets/images/modal_error.png'
import warningImage from '@/assets/images/modal_warning.png'
const openPromptBox = (imgSrc, message) => {
    switch (imgSrc) {
        case 'success':
            Notification({
                title: '提示',
                message: message,
                type: 'success',
                position: 'bottom-right',
                duration: 2000,
                showClose: false,
            });
            break;
        case 'error':
            return MessageBox.alert(
                `
                    <div style="text-align: center;">
                        <img style="width: 88px;height: 88px;" src="${errorImage}" alt=""/>
                        <p style="font-size: 16px;">${message}</p>
                    </div>
                `,
                '提示',
                {
                    dangerouslyUseHTMLString: true,
                    showClose:false,
                    confirmButtonText: "确认",
                }
            );
            break;
        case 'warning':
            return MessageBox.confirm(
                `
                    <div style="text-align: center;">
                        <img style="width: 88px;height: 88px;" src="${warningImage}" alt=""/>
                        <p style="font-size: 16px;">${message}</p>
                    </div>
                `,
                '提示',
                {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }
            )
            break;
            case 'info':
                return MessageBox.confirm(
                    `
                        <div style="text-align: center;border-bottom: 1px solid #d9d9d9;">
                            <p style="font-size: 17px;">${message}</p>
                        </div>
                    `,

                    '提示'
                    ,
                    {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确定',
                        showClose:false,
                        showCancelButton:false,
                        center:true
                    }
                )
                break;
                default:
    }
}

export default openPromptBox