在本次項目新需求中,需要用到彈窗提示信息,使用的是Element的通知(Notification)。
要求是后台推送過來一條消息,前端接收后再將消息進行提煉后通過彈窗通知用戶。前后端發送接收消息用的技術是webIm,這個先不提了,官方文檔配置一下就OK了。
遇到的問題是產品給的設計圖與Element的出入很大,所以就使用了Element的dangerouslyUseHTMLString屬性,即把需要發送的消息寫成HTML結構發送
在模板字符串中,加載圖片那里發現路徑無法實現圖片的加載,試了很多種方法,發現使用require+${}的方法最好用,上圖中<img src=${this.imgUrlNormal}>中,${}保存的地址需要先在data里邊return出來
這個問題就解決了。
第二個問題是遇到了樣式的調整問題,Element的權重太高,真的是不太好搞,在網上找了很多解決方案,發現把<style>標簽中的scoped去掉這種方法可以解決問題。
並且用到了costomClass這個屬性,這個屬性是給元素添加一個class類名,自己來添加樣式。
這樣,這個彈窗的問題就解決了。