Les notifications de notification sont utilisées pour flotter dans le coin de la page pour afficher les messages de rappel de notification globale.
1. Page HTML personnalisée
Le document officiel element-ui indique que les propriétés du composant de notification Notification message prennent en charge la transmission de fragments HTML, mais l'exemple ne montre que des fragments HTML simples, qui ne peuvent généralement pas répondre aux besoins de développement plus profonds. Par exemple, je dois ajouter des boutons et vérifier boîtes à la boîte de notification. Les boîtes, en particulier les boutons, sont également liées aux événements de clic, de sorte que les exemples de fragments html ne peuvent pas être utilisés ;
Un VNode doit être utilisé, en utilisant les différents types d'instances de VNode qui peuvent être instanciés. VNode a une forte compatibilité, car il s'agit d'un objet JS, quel que soit le nœud ou le navigateur, il peut être utilisé de manière uniforme, obtenant ainsi un rendu côté serveur, un rendu natif, des fonctions de rendu manuscrites et d'autres capacités.
//使用VNode创建一个勾选框
const checkbox = h('input', {
attrs: {
type: 'checkbox',
checked: this.checked
},
domProps: {
checked: this.checked
},
on: {
change: (event) => {
this.$store.state.showWarning = event.target.checked
}
}
})
const label = h('label', {
style:{
margin:"10% 0 0 0 ",
}
}, [
checkbox,
`不再弹出该类型消息`
])
//定义确认按钮
const button = h('el-button', {
props:{
type:'primary',
size:"mini"
},
on: {
//为按钮绑定点击事件
click: ()=>{
this. closeWarn(obj)
}
},
style:{
border:"none",
textAlign:"center",
// width:"20%",
margin:"5% 0 0 0 ",
}
}, '确定')
const br = h('br')
//定义通知弹窗
const notification = this.$notify({
type:this.warnType,
title: this.warn.msg,
dangerouslyUseHTMLString: true,
offset:50,
message:h('div', {
style:{
width:"100%"
},
}, [
label,
br,
button
]),
duration: 0,
//自定义类名
customClass:`warnNotify`,
showClose: false,
});
2. Personnalisez le bouton pour fermer la fenêtre contextuelle
Nous définissons un bouton et nous prévoyons de supprimer la boîte de dialogue actuelle en cliquant sur le bouton ;
Appelez Notification ou this.$notify renvoyez l'instance de notification actuelle. Si vous devez fermer l'instance manuellement, vous pouvez appeler sa close méthode.
La méthode de fermeture de la fenêtre pop-up dans les méthodes :
La méthode consiste à supprimer le cadre contextuel correspondant en cliquant sur le bouton OK via la méthode de fermeture lorsqu'il y a plusieurs cadres contextuels
closeWarn(obj) { // 点击确认，关闭弹框，并且删除数组中对应的项
this.notifyList.forEach((item, index) => {
//满足以下条件时关闭弹框
if (item.id === obj.id && item.flag===obj.flag) {
item.notification.close(); // 关闭弹框
indices.push(index); // 存储需要删除的索引
// 删除对应的项
// indices.reverse().forEach((index) => {
this.notifyList.splice(index, 1);
this.notifyArr.splice(index,1)
}
});
}3. Personnalisez le style de la boîte de notification
Voici un affichage simple pour modifier la transparence du fond de la boîte à puces ;
Ci-dessus, nous avons donné à la boîte de notification un nom de classe qui est
//自定义类名
customClass:`warnNotify`,Concevez le style de cette classe dans <style></style> et modifiez-le selon le style que vous souhaitez afficher.
.warnNotify{
background: rgba(255, 255, 255, 0.8) !important;
}Il convient de noter que le style ne peut pas être défini sur le style partiel délimité dans le composant vue actuel, car la div de la couche de message ajoutée n'est pas sous le composant actuel, ni sous la div app.vue, et sa balise div est au même niveau comme app.vue , et utilisez !important pour pondérer les styles avec le poids le plus élevé !
Jusqu'à présent, la notification dans element-ui notifie le style personnalisé, le bouton et l'événement de clic à terminer.