消息框

基础用法

从顶部出现，3秒后自动消失。

1
2
3

<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg1()">
  打开消息提示
</button>

var msg = new woUI.Message();
function msg1() {
  msg.show({
    message: '这是一条信息',
    duration: 3
  })
};

不同状态

用来显示不同类型的操作反馈。

<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg2()">
  红色
</button>
<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg3()">
  蓝色
</button>
<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg4()">
  橙色
</button>
<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg5()">
  绿色
</button>
<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg6()">
  紫色
</button>

function msg2() {
  msg.show({
    iconType: 'red',
    message: '这是一条信息',
    duration: 3
  })
}
function msg3() {
  msg.show({
    iconType: 'blue',
    message: '这是一条信息',
    duration: 3
  })
}
function msg4() {
  msg.show({
    iconType: 'orange',
    message: '这是一条信息',
    duration: 3
  })
}
function msg5() {
  msg.show({
    iconType: 'green',
    message: '这是一条信息',
    duration: 3
  })
}
function msg6() {
  msg.show({
    iconType: 'purple',
    message: '这是一条信息',
    duration: 3
  })
}

可关闭

可以添加关闭按钮。

1
2
3

<button class="woui-btn woui-btn-basic woui-btn-red" onclick="msg7()">
  打开消息提示
</button>

function msg7() {
  msg.show({
    iconType: 'purple',
    message: '这是一条信息',
    showClose: true,
    duration: 3
  })
}

修改延迟

可控制消失延迟。

<button class="woui-btn woui-btn-basic woui-btn-blue" onclick="msg8()">
  10秒关闭
</button>
<button class="woui-btn woui-btn-blue" onclick="close1()">
  手动关闭
</button>

var tmp;
function msg8() {
  tmp = msg.show({
    iconType: 'red',
    message: '这是一条信息',
    customClass: 'test',
    showClose: true,
    duration: 1000
  })
}
function close1() {
  msg.close(tmp)
}

Options 参数

参数	说明	类型	可选值	默认值
message	消息文字	string	-	-
iconType	图标颜色	string	red/blue/purple/orange/green	`blue`
iconClass	图标类名	string	-	`icon icon-close`
customClass	自定义类名	string	-	-
duration	显示时间，秒	number	-	`3`
showClose	是否显示关闭按钮	boolean	-	`false`
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	function	-	-

Events 事件

调用 woUI.Message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

方法名	说明
show	打开当前的Message
close	关闭当前的Message

消息框