Vue Steps步驟條渲染異常問題
Vue Steps步驟條渲染異常
我想創(chuàng)建一個(gè)步驟條，于是將Element官網(wǎng)步驟條代碼拷貝到自己的項(xiàng)目中
顯示結(jié)果：
頁面渲染結(jié)果并沒有想官網(wǎng)描述的那樣
考慮了幾種可能性
（Vue版本不同影響渲染，電腦盜版系統(tǒng)影響渲染，IDA盜版影響渲染，其他組件樣式影響渲染），前三個(gè)太麻煩了（也太貴了），所有選擇最簡(jiǎn)單（便宜）的一項(xiàng)來檢查問題所在
新建了一個(gè)新組件
排除了其他組件樣式的相互影響，運(yùn)行
結(jié)果依然讓人想錘作者！！
但作為一個(gè)有智慧的前端初學(xué)者，我還是打開了調(diào)試面板，哪里 bug 點(diǎn)哪里
可以看出這是點(diǎn)線分離的，這條步驟線沒有問題，步驟描述文字沒有問題，所以問題就出在步驟點(diǎn)上
查看步驟點(diǎn)的樣式
遵循著哪里不爽點(diǎn)哪里的行規(guī)（哪個(gè)樣式不懂點(diǎn)哪里），我把右邊的樣式勾勾一個(gè)個(gè)點(diǎn)沒，終于。。。。
讓我給找到了，雖然這樣式我看不懂啥意思（沒認(rèn)真聽講），
但只要把它的屬性值（不能該none,試了，沒有）給改了就能正常顯示了
于是重新測(cè)試display的其他屬性值
最終發(fā)現(xiàn)flex值最合適
找到全局樣式，添加一條樣式
刷新頁面重新渲染
樣式已覆蓋，顯示無異常，完美
補(bǔ)充
如果你看到這，那恭喜你，我剛發(fā)現(xiàn)（勿噴）還有更簡(jiǎn)單的方法：
直接在el-steps標(biāo)簽上添加align-center屬性，上面步驟都可以忽略，一步解決！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中常遇到第三方j(luò)s,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何引入本地第三方JS庫(kù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue3進(jìn)行樣式Scoped和Global的設(shè)置方法
在 Vue 3 中,組件化開發(fā)成為了我們提升前端開發(fā)效率的利器,其中,樣式的管理也是一個(gè)至關(guān)重要的部分,在 Vue 中,我們會(huì)經(jīng)常使用兩種樣式作用域：Scoped 樣式和 Global 樣式,本文將通過示例代碼來介紹Vue3如何進(jìn)行樣式Scoped和Global的設(shè)置,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了如何寫一個(gè) Vue3 的自定義指令，如果我們想在 Vue.js 的項(xiàng)目中實(shí)現(xiàn)圖片懶加載，那么用自定義指令就再合適不過了，那么接下來就讓我手把手帶你用 Vue3 去實(shí)現(xiàn)一個(gè)圖片懶加載的自定義指令 v-lazy,需要的朋友可以參考一下2022-01-01
這篇文章主要介紹了解讀Vue-loader的相關(guān)知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在Vue中,渲染函數(shù)是一種用于動(dòng)態(tài)生成組件的函數(shù),可以將組件的模板代碼編寫為JavaScript代碼,并在運(yùn)行時(shí)進(jìn)行渲染,下面我們就來看看它的具體用法吧2023-08-08
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新
Vue是一款流行的JavaScript框架，它提供了數(shù)據(jù)響應(yīng)式更新的能力，可以讓我們輕松地更新數(shù)據(jù)，并自動(dòng)更新視圖，本文將介紹Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新，包括使用Vue的響應(yīng)式系統(tǒng)、使用計(jì)算屬性和使用Vue的watcher,需要的朋友可以參考下2023-06-06
Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)
Vue3中我們經(jīng)常需要使用defineProps來定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
這篇文章主要介紹了vue表格顯示字符串過長(zhǎng)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用keep-alive后從部分頁面進(jìn)入不緩存示例詳解
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后從部分頁面進(jìn)入不緩存的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03