Notification (ant-design) and $notify (element-ui) notification content customization
We use the notification component content in the scene to display different notification data according to different needs
First, take a look at the Notification notification of ant-design
Let's first look at the attributes of Notification
-
duration: the duration of automatic shutdown, in seconds
-
top: the position from the top (top), unit px, default 24px
-
bottom: the position from the bottom (bottom), unit px, default 24px
-
placement: pop-up position topLeft, topRight (default), bottomLeft, bottomRight
Call different methods to pop up different styles:
-
notification.open(notification) // default
-
notification.info(notification) // reminder
-
notification.success(notification) // 成功
-
notification.error(notification) // failed
-
notification.warn(notification) // warning
了解完属性和方法进入正题 自定义description的内容
Here we use the function to render the virtual dom to realize the description content.
First, we must understand the usage in vue render. Go throughh()the official document
Type 1: Simply change styles and customize content
notification.open({
message:"标题",
description: [h('div', {
style: {
fontSize: '14px', }, },"自定义内容可以在style更改样式"),],
duration: 5,
});
The second: Create multiple h() for layout
这里是通过 第一个h()里面创建一个[]的形式来添加多个 h()
notification.open({
message:"标题",
description: [h('div',[h('div',"左边" ),h('div',"右边" )],],
duration: 5,
});
The third way: add click event
notification.open({
message:"标题",
description: [h('div', {
onClick: () => {
console.log("点击事件")} }, "点击按钮")],
duration: 5,
});
2. $notify notification of element-ui
The first way of writing: h()
在element-ui 的message中我们还是使用h() 所以我们只看一下和 ant-design 不同的地方
first create h()
const h = this.$createElement;
The use of h() in the message 点击事件and the changes here should pay attention to the details. The outermost layer of h() is not created.数组
this.$notify({
title: `${
this.OVER_SPEED[data[0].event]}`,
message: h('div',{
on: {
click: () => {
console.log("点击事件") } }, "点击按钮"),
duration: 5000,
type: 'warning'
});
The second way of writing: use the attribute dangerouslyUseHTMLString: true to write in HTML fragments
this.$notify({
title: '提示',
dangerouslyUseHTMLString: true,
message: "<div>这是 <i id="show">内容</i> 片段</div>",
duration: 0,
})
Summarize
The duration difference between $notify and Notification
$notify: duration unit ms, default 4500ms
Notification: duration unit second
The above are the methods for customizing the content of the two notifications.
If you encounter other problems, you can discuss and study with me in private.
Yes, 关注收藏博客the author will continue to update...