很多時候需要用到el-alert來做用戶提醒, 但是默認的它無法實現換行,后來發現它有個標題slot,使用后就能實現輕松換行了
<el-alert title="需要注意的事項" type="warning"> <template slot='title'> <div class="iconSize">需要注意的事項:</div> <div class="iconSize">1、登錄后請及時檢查對應的姓名和手機號是否正確</div> <div class="iconSize">2、卡片式每頁顯示一個問題,列表式一頁顯示全部的問題</div> <div class="iconSize">3、評測問卷提交保存后就無法再次做答了,請慎重對待每一個問題</div> </template> </el-alert>
CSS的部分,主要是為了讓字看上去大一些,上下間隔開一些,有興趣的可以給第一行寫個標題CSS,更美觀。
.iconSize{ font-size: 16px; padding: 10px; font-weight: bold; }
最后效果如下: