4.0.0 • Published 4 years ago

@huteming/ui-message v4.0.0

Weekly downloads
2
License
ISC
Repository
-
Last release
4 years ago

弹出式提示框,有多种交互形式。


全局引入

import { Message } from '@huteming/ui'
Vue.use(Message)

this.$message(options)
this.$message(message, options)
this.$message(message, title, options)

单独使用

import { Message } from '@huteming/ui'

Message(options)
Message(message, options)
Message(message, title, options)

便捷方式(推荐)

这里定义了三种常用类型各自的方法。要注意的是,因为从外部表现来看,调用类型是无关紧要的,所以 Message 配置对象并没有提供类似 type 的参数去定义类型,内部会根据传参的种类进行判断。 例如:有输入框 (showInput),代表 prompt; 显示取消按钮 (showCancelButton),代表 confirm;其余代表 alertalert 类型时,会禁用 closeOnClickModal

Message.alert(options)
Message.confirm(options)
Message.prompt(options)

注册回调

Message 方法返回的是 Promise, resolve 状态代表确定,reject 状态代表取消

Message(options)
    // 确定
    .then(res => {
        const { inputValue, action } = res
    })
    // 取消
    .catch(res => {
        const { inputValue, action } = res
    })

API

参数说明类型可选值默认值
title提示框的标题String
message提示框的内容String
confirmButtonText确认按钮的文本String确定
confirmButtonHighlight是否将确认按钮的文本加粗显示Booleanfalse
showCancelButton是否显示取消按钮Booleanfalse
cancelButtonText取消按钮的文本String取消
cancelButtonHighlight是否将取消按钮的文本加粗显示Booleanfalse
showInput是否显示一个输入框Booleanfalse
inputType输入框的类型Stringtext
inputValue输入框的值String
inputPlaceholder输入框的占位符String请输入
beforeConfirm确定前的回调,会暂停 message 的关闭。done 用于关闭 messageFunction(done, res)
beforeCancel取消前的回调,会暂停 message 的关闭。done 用于关闭 messageFunction(done, res)
beforeClose关闭前的回调,会暂停 message 的关闭。done 用于关闭 messageFunction(done, res)
closeOnClickModal是否在点击遮罩时关闭提示框(alert 为 false)Booleantrue