Message 消息提示

用于提示消息，与系统toast相比具有以下优势

1. 不同类型具有不同的提示外观

2. 不限制字数，字数较多时依然能保持布局美观

3. 支持多提示同时显示

4. 支持弹窗显示完成后，执行自定义逻辑

该组件并不能完全替代系统toast，请开发者结合实际场景使用

基本使用

参考element-ui的消息调用设计

// 成功提示
this.$message.success("这是一条成功消息")

// 错误提示
this.$message.error("这是一条错误消息")

// 警告
this.$message.warning("这是一条警告消息")

// 普通消息 方式一
this.$message.info("这是普通消息")

// 普通消息 方式二
this.$toast("这是普通消息")

控制时长

消息提示默认显示时长为2秒，通过duration选项自定义显示时长

this.$message.success({
    title: "显示时间为4s",
    duration: 4000
})

隐藏图标

组件会根据弹窗类型显示对应图标，如果不需要则可以通过icon: false取消图标

this.$message.error({
    title: "这条消息没有显示图标",
    icon: false,
})

弹窗完成后执行逻辑

通过handler选项可以设置在弹窗显示完成之后执行某些逻辑

this.$message.success({
    title: "成功之后会在控制台输出内容",
    handler: ()=>{
        console.log("完成了")
    }
})

API

Props

属性名	说明	类型	必填	默认值
title	消息提示内容	String	是
duration	显示时长，以毫秒为单位	Number	否	2000
icon	是否显示图标	Boolean	否	false
handler	显示完成后的回调函数	Function	否