English
FxNotification
About 1315 wordsAbout 4 min
2025-12-16
悬浮出现在页面角落,显示全局的通知提醒消息。
方法
调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 close 方法。
| 方法名 | 说明 |
|---|---|
| close | 关闭当前的 Notification |
基本用法
适用性广泛的通知栏
<template>
<fx-button
plain
@click="open1">
可自动关闭
</fx-button>
<fx-button
plain
@click="open2">
不会自动关闭
</fx-button>
</template>
<script>
export default {
methods: {
open1() {
const h = this.$createElement;
this.$notify({
title: '标题名称',
message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
});
},
open2() {
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0
});
}
}
}
</script>带有倾向性
带有 icon,常用来显示「成功、警告、消息、错误」类的系统消息
<template>
<fx-button
plain
@click="open1">
成功
</fx-button>
<fx-button
plain
@click="open2">
警告
</fx-button>
<fx-button
plain
@click="open3">
消息
</fx-button>
<fx-button
plain
@click="open4">
错误
</fx-button>
</template>
<script>
export default {
methods: {
open1() {
this.$notify({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success'
});
},
open2() {
this.$notify({
title: '警告',
message: '这是一条警告的提示消息',
type: 'warning'
});
},
open3() {
this.$notify.info({
title: '消息',
message: '这是一条消息的提示消息'
});
},
open4() {
this.$notify.error({
title: '错误',
message: '这是一条错误的提示消息'
});
}
}
}
</script>自定义弹出位置
可以让 Notification 从屏幕四角中的任意一角弹出
<template>
<fx-button
plain
@click="open1">
右上角
</fx-button>
<fx-button
plain
@click="open2">
右下角
</fx-button>
<fx-button
plain
@click="open3">
左下角
</fx-button>
<fx-button
plain
@click="open4">
左上角
</fx-button>
</template>
<script>
export default {
methods: {
open1() {
this.$notify({
title: '自定义位置',
message: '右上角弹出的消息'
});
},
open2() {
this.$notify({
title: '自定义位置',
message: '右下角弹出的消息',
position: 'bottom-right'
});
},
open3() {
this.$notify({
title: '自定义位置',
message: '左下角弹出的消息',
position: 'bottom-left'
});
},
open4() {
this.$notify({
title: '自定义位置',
message: '左上角弹出的消息',
position: 'top-left'
});
}
}
}
</script>带有偏移
让 Notification 偏移一些位置
<template>
<fx-button
plain
@click="open">
偏移的消息
</fx-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify({
title: '偏移',
message: '这是一条带有偏移的提示消息',
offset: 100
});
}
}
}
</script>使用 HTML 片段
message 属性支持传入 HTML 片段
<template>
<fx-button
plain
@click="open">
使用 HTML 片段
</fx-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify({
title: 'HTML 片段',
dangerouslyUseHTMLString: true,
message: '<strong>这是 <i>HTML</i> 片段</strong>'
});
}
}
}
</script>Warning
message 属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下,请确保 message 的内容是可信的,永远不要将用户提交的内容赋值给 message 属性。
隐藏关闭按钮
可以不显示关闭按钮
<template>
<fx-button
plain
@click="open">
隐藏关闭按钮
</fx-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify.success({
title: 'Info',
message: '这是一条没有关闭按钮的消息',
showClose: false
});
}
}
}
</script>全局方法
FxUI 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题 | string | — | — |
| message | 说明文字 | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
| type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error | — |
| iconClass | 自定义图标的类名。若设置了 type,则 iconClass 会被覆盖 | string | — | — |
| customClass | 自定义类名 | string | — | — |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
| position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | 是否显示关闭按钮 | boolean | — | true |
| onClose | 关闭时的回调函数 | function | — | — |
| onClick | 点击 Notification 时的回调函数 | function | — | — |
| offset | 偏移的距离,在同一时刻,所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
