您现在的位置是：网站首页>>前端技术>>weui

weui —— 提示信息

发布时间：2019-04-30 17:03:31作者：wangjian浏览量：1394点赞量：0

在weui中一个有四种提示方式，分别为：alert，confirm，toast，topTips

一：alert

alert 警告弹框，功能类似于浏览器自带的 alert 弹框，用于提醒、警告用户简单扼要的信息，只有一个“确认”按钮，点击“确认”按钮后关闭弹框。

1：简单的alert提示weui.alert('普通的alert');

现象为：

2：带回调的alert提示

weui.alert('带回调的alert', function(){ console.log('ok') });

现象为(点击确定按钮会在控制台打印出ok)：

3:自定义标题的alert提示weui.alert('自定义标题的alert', { title: '自定义标题' });

现象为：

4：自定义按钮的alertweui.alert('自定义按钮的alert', {

title: '自定义按钮的alert',

buttons: [{

label: 'OK',

type: 'primary',

onClick: function(){ console.log('ok') }

}]

});

现象为：

二：confirm

confirm为weui的确认弹窗

1：简单的confirm提示weui.confirm('普通的confirm');

现象为：

2：带回调的confirm提示weui.confirm('带回调的confirm', function(){ console.log('yes') }, function(){ console.log('no') });

现象为(点击取消在控制台输出no，点击确认在控制台输出yes)：

3：自定义标题的confirm提示weui.confirm('自定义标题的confirm', { title: '自定义标题' });

现象为：

4：自定义按钮的confirm提示weui.confirm('自定义按钮的confirm', {

title: '自定义按钮的confirm',

buttons: [{

label: 'NO',

type: 'default',

onClick: function(){ console.log('no') }

}, {

label: 'YES',

type: 'primary',

onClick: function(){ console.log('yes') }

}]

});

现象为：

三：toast

toast 一般用于操作成功时的提示场景

1：简单的toast提示weui.toast('操作成功', 3000);//3秒自动消失

现象为：

2：带回调的toast提示weui.toast('操作成功', {

duration: 3000,//3秒后自动消失

className: 'custom-classname',//自定义类名

callback: function(){

//回调函数

console.log('close')

}

});

现象为(消失后会在控制台输出close)：

四：toptips

toptips 用于顶部报错提示

1：简单的toptips提示(默认3秒消失，指定时间消失可以将消失时间参数放在第二个参数，单位为毫秒)weui.topTips('请填写正确的字段');

现象为：

2：带回调的toptips提示weui.topTips('请填写正确的字段', {

duration: 3000,//3秒后消失

className: 'custom-classname',//自定义类名

callback: function(){

//回调函数

console.log('close')

}

});

现象为(消失后会在控制台输出close)：

以上就为weui的常用提示

0

+1