@fekit/toast
v2.2.3
Published
一个“TOAST”插件,可扩展各种主题样式,目前已有三款主题可用,欢迎使用或开发更多主题。
Downloads
47
Readme
MC-RATIO
一个“TOAST”插件,可扩展各种主题样式,目前已有三款主题可用,欢迎使用或开发更多主题。
索引
演示
https://mcui.fekit.cn/#/plugins/js/toast
安装
npm i @fekit/mc-toast
参数
{
time : 3000, // {数字}选填,显示时间,默认为2000
icon : type, // {字符}选填,状态类型并显示状态图片有成功success,失败error,警告warning,网络network,加载中loading五种
text : '提示文案', // {字符}必填,提示文案 *
theme : theme, // {字符}必填,主题
on : { // {函数}选填,显示和消失时的回调传参中的status可以判断是显示或是消失,code可以对显示出的代码进一步操作.
show() {
console.log('出来了〜');
},
hide() {
console.log('消失了〜');
}
}
}
示例
import McToast from './mc-toast';
let toast = new McToast({
theme: 'ac', // 在这里设置的只是这个实例公共的,在使用时仍然可以在show函数的入参中设置并覆盖掉这里的公共设置
time: 3000,
});
let oBtn2 = document.getElementById('btn2');
oBtn2.onclick = function () {
// 显示提示消息
toast.show({
icon: 'success',
text: '一第操作成功的提示消息',
on: {
show() {
console.log('提示消息出来了〜');
},
hide() {
console.log('提示消息消失了〜');
},
},
});
};
// 如果实例公共属性中或show中传入了time则无需手动调用hide方法。但是有时候不能设置时间自动关闭,则不要入参time或time为空,这时我们就需要在合适的时机隐藏它。方法如下:
toast.show({
time: '',
icon: 'loading',
text: '等我请求了一个接口并获得数据后再关闭我吧!',
});
// 手动关闭它
toast.hide({
on: {
hide() {
console.log('提示消息消失了〜');
},
},
});
版本
v2.1.0 [Latest version]
1. 使用ts重构
更多版本信息请移步 https://www.npmjs.com/package/@fekit/toast