實現效果如下:

element實現方法:[官網通道](http://element.eleme.io/#/zh-CN/component/steps)
1.element實現放在一個頁面,加入一個步驟內容太多,有時候頁面又多。一個代碼文件綁定數據,方法,我想知道你得寫多少行代碼才能填滿你肚子,人要知足啊!就是寫在里邊,要維護的話,你找吧,土里邊找土疙瘩,累死你,如果你寫的還好,如果別人來看你寫的,或者你看別人寫的,你是不是該罵街了。當然也可以用路由拆成模塊。
2.樣式修改,看樣子官網的可定制化還挺高,數字,包含狀態的,包含描述的,橫著的,豎著的……可是改起來,好,好好改吧,認認真真的。萬一需求非要按設計稿的來,哦,好吧,這改組件樣式的時間我早自己寫樣式的時間出來了,好修改好維護。
~~~
<div class="zk_tm_header">
<ul class="zk_tm_progress">
<li>
<p class="zk_tmpg_title">導入座次表</p>
<p class="zk_tmpg_box"><span class="spanNum" :class="{'spanProgress':path>0}">1</span></p>
</li>
<li>
<p class="zk_tmpg_title">導入學籍照</p>
<p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>1}"></span><span class="spanNum" :class="{'spanProgress':path>1}">2</span></p>
</li>
<li>
<p class="zk_tmpg_title">采集樣本</p>
<p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>2}"></span><span class="spanNum" :class="{'spanProgress':path>2}">3</span></p>
</li>
<li>
<p class="zk_tmpg_title">位置校準</p>
<p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>3}"></span><span class="spanNum" :class="{'spanProgress':path>3}">4</span></p>
</li>
<li>
<p class="zk_tmpg_title">樣本訓練</p>
<p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>4}"></span><span class="spanNum" :class="{'spanProgress':path>4}">5</span></p>
</li>
<li>
<p class="zk_tmpg_title">識別檢測</p>
<p class="zk_tmpg_box"><span class="spanline" :class="{'spanProgress':path>5}"></span><span class="spanNum" :class="{'spanProgress':path>5}">6</span></p>
</li>
</ul>
</div>
<router-view @fatherpath="fatherpath"></router-view>
~~~
子步驟,我是通過路由來實現的,頁面代碼量少,方便自己查看,關鍵別人來維護的話也一目了然。
到了第幾步驟,需要子路由給父級路由傳值
代碼如下:(跳轉到步驟2,就設置為2,然后通過綁定的fatherpath傳遞給父組件);
~~~
data() {
return {
path:1
}
}
created () {
this.setPath()
},
methods:{
setPath () {
this.$emit('fatherpath',this.path);
},
}
~~~
- 1. KanCloud快捷鍵
- algate.github.io的網站建設
- algate.github.io基礎完善
- 如何在github上展示作品——為你的項目生成一個快速訪問的網址
- Github README.md 添加圖片
- git上傳github常用命令
- WEB開發文檔
- 工具相關文檔說明
- GulpJs開發文檔
- 安裝Gulp詳細教程
- 如何上傳到github
- 服務端相關文檔
- tomcat配置多域名多端口訪問
- Vue遇到的那些大坑
- vue-bulid新建問題解決方案
- vue-prev功能實現方案優劣(element)
- 常用組件使用和功能實現
- 1-文件上傳功能
- 2-select插件實現利弊
- 3-實現分步驟流程效果
- ES6-export與export default遇到的坑
- require.context()-route去中心化管理
- webpack.ensure(webpack代碼分割)
- angular爬-跪著也要爬完
- 新建遇到的問題
- 常用angular核心知識
- React初生牛犢不怕虎
- react初次見面之泥坑深譚
- react+webpack+es6精簡版HelloWorld
- create-react-app創建失敗
- create-react-app不歸路
- react用到的組件module
- react-hot-loader
- JavaScript成長之路
- Js進階
- Js模塊化編程:require.js的用法
- 淺談前端架構
- Js常見問題匯總
- 瀏覽器渲染原理及解剖瀏覽器內部工作原理
- 雅虎前端優化的35條軍規
- 常見問題描述-面試常問
- 前端性能優化-algate
- http狀態碼詳解
- 作用域,閉包,面向對象
- Js基礎知識
- Js基本功必須扎實
- 各個瀏覽器加載icon
- html特殊標簽和屬性的說明
- 個人資源總結
- 個人簡歷-絕對真實有效
- Jekyll博客創建
- Jekyll開始創建
- Jekyll文檔說明
- jekyll-paginate分頁問題
- HEXO博客創建
- es6新用法解析以及使用
- 神奇的三個點:...
- 幾大類
- coding創建hexo
- sublime相關配置
- Atom使用