# MsgBox（提示工具）
> 用于信息的交互提示

## 导入使用
```code[javascript]
import MsgBox from "niceloo-vue2element-ui/service/MsgBox";
```

## MsgBox.alert(ops)
用于文字信息提示的弹窗
```code[javascript]
    Object alert(ops)
    @param ops 字符串 或者 对象
        {
            title: String||'提示',    //提示标题
            content: String,        //提示内容
            cancelText: String||'取消',    //取消按钮的显示文字，默认 确定
            confirmText: String||'确定',    //确认按钮的显示文字，默认 确定
        }
    @returns {
            then:function(callBack){}
        }
```

## MsgBox.confirm(ops)

需要用户选择确定与否的交互提示弹窗

```code[javascript]
    Void confirm()
    @param ops  对象
        {
            Title: String||'提示',    //提示标题
            Content: String,        //提示内容
            showCance: Boolean||true,    //是否显示取消按钮,默认 显示
            cancelText: String||'取消',    //取消按钮的显示文字，默认 确定
            confirmText: String||'确定',    //确认按钮的显示文字，默认 确定
            confirm(){},    //点击确定按钮的回调方法
            cancel(){},     //点击取消按钮的回调方法
        }
```

### MsgBox.warn(ops)

> 交互提示，多用于数据删除需要用户确认

```code[javascript]
     @param ops={
    			title		:   String||'提示',	//提示标题
    			content		:   String,		//提示内容
    			desc		:   String,		//描述内容
    			showCancel		:   Boolean||true,	//是否显示取消按钮,默认 显示
    			cancelText	:   String||'取消',	//取消按钮的显示文字，默认 确定
    			confirmText	:   String||'确定',	//确认按钮的显示文字，默认 确定
    			confirm(){},			//点击确定按钮的回调方法
    			cancel(){},			//点击取消按钮的回调方法
		    }
     MsgBox.warn({
    			    title: "提示",
        			content: "我是提示信息",
        			desc: "我是描述内容",
        			showCancel:true,
        			cancelText: '取消',
        			confirmText: '确定',
        			confirm:function(){
        				console.log("用户点击了确定！");
        			},
        			cancel:function(){
        				console.log("用户点击了取消！");
        			},
    		})
```


### MsgBox.error(ops)

用于展示错误信息提示弹窗

```code[javascript]
    Void error(ops)
    @param ops
        {
            msg: String, // 错误信息提示文案
        }
```


:::demo

```html

<template>
    <div>
        <el-button @click="showAlert1">打开文字弹窗1</el-button>
        <el-button @click="showAlert2">打开文字弹窗2</el-button>
        <el-button @click="showConfirm">打开交互弹窗</el-button>
        <el-button @click="showWarn">打开warn弹窗</el-button>
        <el-button @click="showError">打开error弹窗</el-button>
    </div>
</template>

<script>
    export default {
        methods: {
            showAlert1() {
                MsgBox.alert("我是提示信息").then(function () {
                    console.log("提示信息已经点击确认")
                });
            },
            showAlert2() {
                MsgBox.alert({
                    title: "提示",
                    content: "我是提示信息",
                    confirmText: '点击确定',
                }).then(function () {
                    console.log("提示信息已经点击确认")
                });
            },
            showConfirm() {
                MsgBox.confirm({
                    title: "提示",
                    content: "我是提示信息",
                    showCancel:true,
                    cancelText: '取消',
                    confirmText: '确定',
                    confirm:function(){
                        console.log("用户点击了确定！");
                    },
                    cancel:function(){
                        console.log("用户点击了取消！");
                    },
                })
            },
            showWarn() {
                 MsgBox.warn({
                        title: "提示",
                        content: "我是提示信息",
                        desc: "我是描述内容",
                        showCancel:true,
                        cancelText: '取消',
                        confirmText: '确定',
                        confirm:function(){
                            console.log("用户点击了确定！");
                        },
                        cancel:function(){
                            console.log("用户点击了取消！");
                        },
                    })
            },
            showError() {
                MsgBox.error({
                    msg: '我是错误信息提示弹窗'
                })
            }
        }
    }
</script>
```
:::