Las notificaciones de notificación se utilizan para flotar en la esquina de la página para mostrar mensajes de recordatorio de notificación global.
1. Página html personalizada
El documento oficial de element-ui establece que las propiedades del componente de notificación de notificación message admiten el paso de fragmentos HTML, pero el ejemplo solo muestra fragmentos HTML simples, que generalmente no pueden satisfacer las necesidades más profundas del desarrollo. Por ejemplo, necesito agregar botones y verificar cuadros al cuadro de notificación. Los cuadros, especialmente los botones, también están vinculados a eventos de clic, por lo que los fragmentos html de ejemplo no se pueden usar;
Se debe usar un VNode, mediante el cual se pueden crear instancias de diferentes tipos de instancias de VNode. VNode tiene una gran compatibilidad, ya que es un objeto JS, sin importar el nodo o el navegador, se puede operar de manera uniforme, obteniendo así funciones de representación del lado del servidor, representación nativa, representación manuscrita y otras capacidades.
//使用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. Personaliza el botón para cerrar el cuadro emergente
Definimos un botón y esperamos eliminar el cuadro emergente actual haciendo clic en el botón;
Llame Notification o this.$notify devuelva la instancia de notificación actual. Si necesita cerrar la instancia manualmente, puede llamar a su close método.
El método para cerrar la ventana emergente en métodos:
El método consiste en eliminar el marco emergente correspondiente haciendo clic en el botón Aceptar a través del método de cierre cuando hay varios marcos emergentes
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. Personaliza el estilo del cuadro de notificación.
Aquí hay una pantalla simple para modificar la transparencia de fondo del cuadro de viñetas;
Arriba le dimos al cuadro de notificación un nombre de clase que es
//自定义类名
customClass:`warnNotify`,Diseñe el estilo para esta clase en <style></style> y modifíquelo al estilo que desea mostrar.
.warnNotify{
background: rgba(255, 255, 255, 0.8) !important;
}Cabe señalar que el estilo no se puede establecer en el estilo parcial con ámbito en el componente vue actual, porque el div de la capa de mensaje agregado no está debajo del componente actual, ni debajo del div app.vue, y su etiqueta div está al mismo tiempo. level como app.vue , y use !important para ponderar los estilos al peso más alto!
Hasta ahora, la notificación en element-ui notifica que el estilo personalizado, el botón y el evento de clic se completan.