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