重新定义移动端提示框

vue-modal

移动端基于Vue包括Alert、Confirm、Toast、Loading、Notify、Prompt、modalLayer 弹框

Alert

modal-alert

this.$modal.alert({
    mes: '消息一出，休想滚动屏幕[移动终端]！',
    callback: function(){}
});

alertProps 参数

参数	说明
mes	[String] 弹出的消息内容，支持Html
icon	[String]， 图标CLASS
stylename	[String]， 弹出框增加样式名称，用于个性化更改样式
btntxt	[String]， 按钮文字
callback	[Function]， 点击确定按钮回调

Confirm

modal-confirm

//普通调用方式
this.$modal.confirm({
    title: '选填标题',
    mes: '我有一个小毛驴我从来也不骑！',
    opts: function(){}
});

//更换按钮名称
this.$modal.confirm({
    title: '选填标题',
    mes: '我有一个小毛驴我从来也不骑！',
    opts: [
        {txt: '不看了',class: '.btnclass',callback: function() {}},
        {txt: '好，提交了',class: '.btnclass',callback: function() {}}
    ]
});

confirmProps 参数

参数	说明
title	[String] 确认框的标题
close	[Boolean] 右上角显示关闭按钮，默认False
stylename	[String]， 弹出框增加样式名称，用于个性化更改样式
opts	[Array, Function]， 当为 Function 时，点击确定按钮的回调方法，当为数组的时候，可一修改底部的按钮名称： {txt: '不看了',class: '.btnclass',callback: function() {}},

Toast

modal-toast

    //一般的Toast
    this.$modal.toast({mes: '这是一个toast.'})
    //成功的Toast
    this.$modal.toast({
        mes: '提交保存成功',
        timeout: 1500,
        icon: 'success',
        callback: functon(){}
    });
    //失败的Toast
    this.$modal.toast({
        mes: '失败了',
        icon: 'error',
    });

toastProps 参数

参数	说明
mes	[String] 弹出的消息内容
icon	[String]， 可选：success、error, 默认无
styleclass	[String]， 弹出框增加样式名称，用于个性化更改样式
timeout	[String]， n 秒后消失
callback	[Function]， 消失后的回调方法

Loading

modal-loading

    //打开loading
    this.$modal.loading.open({title: "很多加载", icon: 1});

    //pade-loading
    this.$modal.loading.open({type: 2, icon: 2});
    
    //关闭loading
    this.$modal.loading.close();

loadingProps 参数

参数	说明
type	[String] 1: 普通的loading, 2: page-loading
icon	[String]， 1 ~ 4 种不同的loading图标
title	[String]， loading图标下的文案

Notify

modal-notify

    this.$modal.notify({
        mes: '5秒后自动消失，点我也可以消失！',
        timeout: 5000,
        callback: function() {
            console.log('我走咯！');
        }
    });

loadingProps 参数

参数	说明
mes	[String] 内容
timeout	[Number]， n 秒后消失
callback	[Function]， 消失后的回调

Prompt

modal-prompt

    this.$modal.prompt({
        title: "输入",
        placeholder: "请输入****",
        content: '这里是内容',
        maxlength: 500,
        callback: function(data) {
            console.log(data);
        }
    });

loadingProps 参数

参数	说明
title	[String] 弹框标题
placeholder	[String]， textarea文本框描述
content	[String]， textarea文本框默认内容
maxlength	[Number]， textarea文本框最大字数
callback	[Function]， 提交后的回调

ModalLayer

ModalLayer

    <modal-layer title="modaltitle" stylename="stylename">
        <div slot='body'>这是body</div>
        <div slot="foot">这是foot</div>
    </modal-layer>

ModalLayerProps 参数

参数	说明
title	[String] 标题
stylename	[String]， 样式名称