vue+element遇到的坑及解決
更新時間：2023年06月08日 10:35:29 作者：ashirely
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
container布局容器問題
1、el-header和el-aside不在同一行
項目場景：
官方示例代碼：
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>問題描述：
在使用Element-UI的Container布局容器時，el-header和el-aside不在同一行。
原因分析：
aside是一個塊級元素，它會獨占一行，后面不會有其他元素；自然main就掉下去了；
解決方案：
加上浮動：float：left
<el-container>
<el-aside style="float:left" width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
2、Vue腳手架中默認的margin
項目場景：
問題描述：
項目四周有白邊
原因分析：
靜態(tài)文件夾public中的index.html
解決方案：
找到vue腳手架中index.html頁面
<!-- 解決vue腳手架默認margin:8px問題 -->
<style>
body {
margin: 0;
}
</style>3、Container布局容器布滿全屏
項目場景：
<el-container>
<el-aside style="float:left" width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
問題描述：
引用官網例子，布局只占一半，定義固定像素高度又不好適用不同屏幕大小效果。
原因分析：
官網使用靜態(tài)固定高度
解決方案：
1.修改app.vue
<style>
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>2.修改布局組件樣式
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 10vh;
height: 100%;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 100vh;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 91vh;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 100%;
}
</style>4、eventBus兄弟組件傳參
1.修改main.js
new Vue({
router,
render: h => h(App),
data: {
// 空的實例放到根組件下，所有的子組件都能調用
Bus: new Vue()
}
}).$mount('#app')2.修改兄弟組件
this.$root.Bus.$emit('collapsed',this.collapsed);// 監(jiān)聽collapsed
this.$root.Bus.$on('collapsed', value => {
this.collapsed = !value
})5、vue添加全局變量
1.新建components/Global.vue
<!--全局變量-->
<script>
//線上接口地址
const baseURL="http://xxxxxx.iscoser.com";
export default{
baseURL
}
</script>2.main.js引入apiUrl，給Vue的原型添加這個屬性。
import baseURLfrom './components/Global.vue' Vue.prototype.baseURL= baseURL.baseURL;
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
函數式彈窗是一種使用函數來創(chuàng)建彈窗的技術,它可以簡化彈窗的使用,只需要在需要彈窗的地方調用函數就可以了,下面我們就來看看vue3中函數式彈窗的具體應用吧2024-01-01
Vue-Router提供了hash模式和history模式兩種路由模式,hash模式URL帶#,支持低版本IE,history模式URL不帶#,需要服務器支持2025-01-01
Vue3中Vuex狀態(tài)管理學習實戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學習實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了Vue2.0在IE11版本瀏覽器中的兼容性問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue引用echarts餅圖不顯示圖例的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家介紹了Vue中使用及封裝websocket示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了vue3觸發(fā)父組件兩種寫法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了從0到1構建vueSSR項目之路由的構建，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue3 el-pagination 將組件中英文‘goto’ 修改 為&nbs
這篇文章主要介紹了vue3 el-pagination 將組件中英文‘goto’ 修改 為 中文到‘第幾’,通過實例代碼介紹了vue3項目之Pagination 組件,感興趣的朋友跟隨小編一起看看吧2024-02-02
使用sessionStorage解決vuex在頁面刷新后數據被清除的問題
localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限，具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數據被清除的問題,需要的朋友可以參考下2018-04-04