技術標籤：VueElement UIvueelementui

最近專案裡需要個訊息翻滾一條條出現的效果，如下圖：

正在用原生js操作的時候，突然想起element ui有個走馬燈（Carousel），這個走馬燈可以實現前端比較常用的輪播效果，那肯定也能實現這個功能訊息無縫翻滾出現的功能。
話不多說，下面放程式碼：
html部分：

<!--我這個需求是有訊息時才會讓這個功能顯示，所以使用了v-if-->
<div class="bs-sysMsg" v-if="systemMsg.length > 0">
    <
 
i class="el-alert__icon el-icon-warning"></i>
    <div class="msg__content">
        <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
            <el-carousel-item v-for="
 
item in systemMsg" :key="item.id">
                <a href="javascript:void(0)" class="item">{{item.title}}</a>
            </el-carousel-item>
        </el-carousel>
    </div>
</div>

解釋下上面的重點：
1、element ui的走馬燈direction 預設為 horizontal（橫向切換），通過設定 direction 為 vertical 來讓走馬燈在垂直方向上切換；

data部分：

data(){
	return{
		// 滾屏訊息
        systemMsg: [
            {id:1,title:'入主白宮近10日 拜登做了10件大事'},
            {id:2,title:'全民帶貨？小紅書外鏈淘寶許可權將大範圍開放'},
            {id:3,title:'賈躍亭FF將在納斯達克上市 股票程式碼為FFIE'}
        ],
	}
}

好人做到底，再把css部分貼上來，直接可完美測試
css部分：

/*輪翻訊息*/
.bs-sysMsg {
    position: relative;
    display: flex;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 2px;
    color: #e6a23c;
    background-color: #fdf6ec;
    overflow: hidden;
    opacity: 1;
    align-items: center;
    transition: opacity .2s;
}
.bs-sysMsg .msg__content {
    display: table-cell;
    padding: 0 8px;
    width: 100%;
}
.bs-sysMsg .msg__content a.item {
    color: #e6a23c;
    font-size: 14px;
    opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover{text-decoration: underline;}

好了，就上面這麼多,如果點選訊息還有詳情，可以給a標籤加連結，跳轉到詳情頁面。
有沒有超簡單，什麼一大對js控制都弱爆了。

新部落格，堅持原創碼字，辛苦分享給點個贊鼓勵下可好。