vue+element遇到的坑及解决
作者：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
项目场景：
问题描述：
项目四周有白边
原因分析：
静态文件夹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>
问题描述：
引用官网例子，布局只占一半，定义固定像素高度又不好适用不同屏幕大小效果。
原因分析：
官网使用静态固定高度
解决方案：
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);// 监听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;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。