elementui中el-alert實現換行的方法


很多時候需要用到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;
        
}

最后效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM