Notification 消息過多太長 希望能折疊
如圖下效果
- element-plus 可以將dom 插入到具體的元素 結合css :nth-child 來控制樣式達到效果
element dom 只能插入到body中 所以無法使用:nth-child
1.Notification需要消息提示時設置class
let eleNum = 0 // 彈窗的序號
function notificationDialog(val) {
//彈窗關閉后 重制if (document.getElementsByClassName('zl-message-omp').length === 0) {eleNum = 0}eleNum = eleNum + 1Notification({title: '',dangerouslyUseHTMLString: true,customClass: `zl-message-omp-${eleNum} zl-message-omp`,duration: 3000,message: 1111})
}notificationDialog()
notificationDialog()
notificationDialog()
notificationDialog()
notificationDialog()
notificationDialog()
2。使用scss
超過3個折疊
@for $i from 4 through 100{$space:10px; //折疊的高度$base:254px; //這個值是第三個dom的top值.zl-message-omp-#{$i}{top: ($i - 3) * $space + $base !important;}
}
效果