vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue element遇到的坑

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;

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文