vue+element遇到的坑及解決
更新時(shí)間：2023年06月08日 10:35:29 作者：ashirely
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
container布局容器問題
1、el-header和el-aside不在同一行
項(xiàng)目場(chǎng)景：
官方示例代碼：
<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布局容器時(shí)，el-header和el-aside不在同一行。
原因分析：
aside是一個(gè)塊級(jí)元素，它會(huì)獨(dú)占一行，后面不會(huì)有其他元素；自然main就掉下去了；
解決方案：
加上浮動(dòng)：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腳手架中默認(rèn)的margin
項(xiàng)目場(chǎng)景：
問題描述：
項(xiàng)目四周有白邊
原因分析：
靜態(tài)文件夾public中的index.html
解決方案：
找到vue腳手架中index.html頁面
<!-- 解決vue腳手架默認(rèn)margin:8px問題 -->
<style>
body {
margin: 0;
}
</style>3、Container布局容器布滿全屏
項(xiàng)目場(chǎng)景：
<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>
問題描述：
引用官網(wǎng)例子，布局只占一半，定義固定像素高度又不好適用不同屏幕大小效果。
原因分析：
官網(wǎng)使用靜態(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: {
// 空的實(shí)例放到根組件下，所有的子組件都能調(diào)用
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的原型添加這個(gè)屬性。
import baseURLfrom './components/Global.vue' Vue.prototype.baseURL= baseURL.baseURL;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue路由相對(duì)路徑跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-08-08
這篇文章主要介紹了Vue中注冊(cè)全局組件的三種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
vue之el-upload使用FormData多文件同時(shí)上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時(shí)上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇axios 封裝上傳文件的請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實(shí)現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
在 Vue 項(xiàng)目開發(fā)中,組件通訊是基礎(chǔ)也是核心,不同的組件關(guān)系（父子、祖先后代、任意組件）有著不同的最優(yōu)解方案,本文介紹了Vue項(xiàng)目中組件通訊的不同方式,包括父子組件的props、v-model和自定義事件,需要的朋友可以參考下2026-04-04
這篇文章主要介紹了Vue插件之滑動(dòng)驗(yàn)證碼用法,結(jié)合實(shí)例形式詳細(xì)分析了Vue滑動(dòng)驗(yàn)證碼插件相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07