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
})

4、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;