mui 消息提示框 toast自定义样式

BlizzardWu

于 2021-07-01 16:15:19 发布

阅读量1.3k

点赞数

分类专栏： uniapp 前端文章标签： css js

本文链接：https://blog.csdn.net/BlizzardWu/article/details/118388954

版权

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

uniapp

10 篇文章

订阅专栏

本文介绍了MUI Toast的配置方法，包括设置显示时长、强制使用div模式等。同时提供了CSS样式的详细配置，如调整位置、背景图片、透明度及字体颜色等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js:

参数	说明	说明
duration	持续显示时间,默认值 short(2000ms)	支持整数值和 String ,String可选:long(3500ms),short(2000ms)
type	强制使用mui消息框(div模式)	‘div’

mui.toast('加载中...',{ duration:'long', type:'div' });

css:

.mui-toast-container {
    bottom: 40% !important;/*离布局底部的距离*/
    }
.mui-toast-message {
    background: url(../img/loading.png) no-repeat center 10px #000;   /*toast的背景图片*/
    opacity: 0.7;/*toast中背景色的透明度*/
    color: #FF0000; /*toast中字体颜色*/
    width: 180px; /*toast宽度*/
    padding: 50px 5px 10px 5px;/*toast中文字的位置*/