小鹅通组件

# messageBox 确认框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容

# 初始化

单独引入时：在入口js文件处引入

import Vue from 'vue';
import { MessageBox, Button } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Button);
1
2
3
4
5

# 基础用法

确认框 确认取消 成功确认 报错确认 
this.$confirm('这是一系列的信息描述，可能会很长。也可以是很短同样也可以带标点。', {
    // type: 'error',
    title: '提示',
    }).then((e) => {
        console.log(e) //confirm
    }).catch((err) => {
            console.log(err) //cancel
})
1
2
3
4
5
6
7
8

# 不显示底部按钮

不显示底部按钮 
this.$confirm('这是一系列的信息描述，可能会很长。也可以是很短同样也可以带标点。', {
    type: 'info',
    title: '提示',
    showCancelButton: false,
    showConfirmButton: false,
    boxWidth: 480,
    }).then((e) => {
        console.log(e)
    }).catch((err) => {
        console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11

# 显示输入框

输入框确认

切记需要 confirmButtonDisabledCheck 属性来校验

    this.$confirm('这是一系列的信息描述，可能会很长。也可以是很短同样也可以带标点。', {
        type: 'warning',
        title: '确认删除',
        showInput: true,
        inputPlaceholder: "请输入'确认删除'",
        inputPattern: '确认删除',
        inputPatternType: 'str',
        confirmButtonDisabledCheck: '确认删除',
        }).then((e) => {
            console.log(e)
        }).catch((err) => {
            console.log(err)
    })
1
2
3
4
5
6
7
8
9
10
11
12
13

# 参数

参数 说明 类型 默认值 可选值 支持版本
type 弹框类型 String info info,success,warning,error 1.3.16及其以上
title 弹框标题 String - - 1.3.16及其以上
message 确认框内容 string / VNode - - 1.3.16及其以上
showInput 是否显示输入框 Boolean false true,false 1.3.16及其以上
inputValue 输入框的初始文本 String - - 1.3.16及其以上
inputType 输入框类型 String text - 1.3.16及其以上
inputPlaceholder 输入框placeholder String 请输入内容 - 1.3.16及其以上
inputPattern 输入框的校验表达式 regexp/str - - 1.3.16及其以上
inputPatternType 校验表达式类型 regex/str regex - 1.3.16及其以上
confirmButtonText 确认按钮 String 确认 - 1.3.16及其以上
cancelButtonText 取消按钮 String 取消 - 1.3.16及其以上
showConfirmButton 是否显示确认弹框 Boolean true true,false 1.3.16及其以上
cancelButtonText 是否显示取消弹框 Boolean true true,false 1.3.16及其以上
confirmButtonClass 确认按钮类名 String - - 1.3.16及其以上
cancelButtonText 取消按钮类名 String - - 1.3.16及其以上
buttonPosition 按钮位置 String right right, center, left 1.3.16及其以上
confirmButtonPosition 确认按钮位置 String right right, left 1.3.16及其以上
size 支持另一种风格默认不传为比较小 String big 2.1.2及其以上

# 事件

使用 Promise 接收操作结果

← Message 消息提示 →