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

weui —— 提示信息

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

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

    一:alert

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

    1:简单的alert提示


    weui.alert('普通的alert');

    现象为:

    image.png

    2:带回调的alert提示

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

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

    image.png

    3:自定义标题的alert提示

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

    现象为:

    image.png

    4:自定义按钮的alert

    weui.alert('自定义按钮的alert', {
            title: '自定义按钮的alert',
            buttons: [{
                label: 'OK',
                type: 'primary',
                onClick: function(){ console.log('ok') }
            }]
        });

    现象为:

    image.png

    二:confirm

    confirm为weui的确认弹窗

    1:简单的confirm提示

    weui.confirm('普通的confirm');

    现象为:

    image.png

    2:带回调的confirm提示

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

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

    image.png

    3:自定义标题的confirm提示

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

    现象为:

    image.png

    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') }
        }]
    });

    现象为:

    image.png

    三:toast

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

    1:简单的toast提示

    weui.toast('操作成功', 3000);//3秒自动消失

    现象为:

    image.png

    2:带回调的toast提示

    weui.toast('操作成功', {
            duration: 3000,//3秒后自动消失
            className: 'custom-classname',//自定义类名
            callback: function(){
                //回调函数
                console.log('close')
            }
        });

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

    image.png

    四:toptips 

    toptips 用于顶部报错提示

    1:简单的toptips提示(默认3秒消失,指定时间消失可以将消失时间参数放在第二个参数,单位为毫秒)

    weui.topTips('请填写正确的字段');

    现象为:

    image.png

    2:带回调的toptips提示

    weui.topTips('请填写正确的字段', {
        duration: 3000,//3秒后消失
        className: 'custom-classname',//自定义类名
        callback: function(){
            //回调函数
            console.log('close')
        }
    });

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

    image.png

    以上就为weui的常用提示

0 +1