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

一文搞定vue3中的函数式弹窗
函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧
2024-01-01
路由的hash和history模式的区别及说明
Vue-Router提供了hash模式和history模式两种路由模式,hash模式URL带#,支持低版本IE,history模式URL不带#,需要服务器支持
2025-01-01
Vue3中Vuex状态管理学习实战示例详解
这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
Vue2.0在IE11版本浏览器中的兼容性问题
这篇文章主要介绍了Vue2.0在IE11版本浏览器中的兼容性问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue引用echarts饼图不显示图例的解决
这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
Vue中使用及封装websocket示例详解
这篇文章主要为大家介绍了Vue中使用及封装websocket示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue3触发父组件两种写法
这篇文章主要介绍了vue3触发父组件两种写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
从0到1构建vueSSR项目之路由的构建
这篇文章主要介绍了从0到1构建vueSSR项目之路由的构建，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
vue3 el-pagination 将组件中英文‘goto’ 修改为&nbs
这篇文章主要介绍了vue3 el-pagination 将组件中英文‘goto’ 修改为中文到‘第几’,通过实例代码介绍了vue3项目之Pagination 组件,感兴趣的朋友跟随小编一起看看吧
2024-02-02
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友可以参考下
2018-04-04