Vue組件 el-steps 實現頁面內導航

一、前言

在前端開發過程中，當頁面內容分為若干欄目后，通過增加導航欄位定位至相應欄目不失為一種良好的用戶體驗。

應用el-steps可實現頁面內欄目跳轉。el-steps基本用法如下：

下一步

data:{ active:0 }, methods:{ next(){ if(this.active++ >2){ this.active = 0 } } }

二、屬性介紹

下面重點介紹el-steps的direction、space、active、process-status、align-center屬性，如下:

通過查看Element手冊，需要定寬的步驟條時，設置space屬性即可，單位為px，如果不設置為自適應（若不確定步驟條中每一步驟中內容高度或寬度，可設置為自適應；為使界面美觀，可修改el-step屬性：

.el-step__main { width: 100%!important; padding-left: 3%!important; margin-bottom: 3%!important; }

）

el-step屬性如下圖所示：

這里重點介紹下如何應用el-steps動態展示所需信息。

三、Demo

以上只是實現了步驟條內容的動態展示，若需實現根據用戶瀏覽內容定位導航欄目或者根據導航欄目快速定位至相關欄目處，需通過動態監聽頁面內容實現。

四、拓展閱讀

開發者手冊

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。