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

项目场景：

问题描述：

项目四周有白边

原因分析：

静态文件夹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;

总结

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

您可能感兴趣的文章:

vue
element

vue路由相对路径跳转方式
这篇文章主要介绍了vue路由相对路径跳转方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-08-08
Vue中注册全局组件的三种方式
这篇文章主要介绍了Vue中注册全局组件的三种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
vue之el-upload使用FormData多文件同时上传问题
这篇文章主要介绍了vue之el-upload使用FormData多文件同时上传问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
axios 封装上传文件的请求方法
今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
基于Vue实现HTML转PDF并导出
这篇文章主要为大家介绍了三种方法，可以实现将HTML页面转为PDF并实现下载。文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下
2022-04-04
Vue之插件详解
这篇文章主要为大家介绍了Vue之插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助，希望能够给你带来帮助
2021-11-11
Vue2实现组件通讯的常用方式
在 Vue 项目开发中,组件通讯是基础也是核心,不同的组件关系（父子、祖先后代、任意组件）有着不同的最优解方案,本文介绍了Vue项目中组件通讯的不同方式,包括父子组件的props、v-model和自定义事件,需要的朋友可以参考下
2026-04-04
Vue插件之滑动验证码用法详解
这篇文章主要介绍了Vue插件之滑动验证码用法,结合实例形式详细分析了Vue滑动验证码插件相关使用方法与操作注意事项,需要的朋友可以参考下
2020-04-04
Vue组件化学习之scoped详解
这篇文章主要为大家详细介绍了Vue组件化学习之scoped，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue如何调用摄像头实现拍照上传图片、本地上传图片
这篇文章主要给大家介绍了关于vue如何调用摄像头实现拍照上传图片、本地上传图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-07-07