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 checkbox 全选数据的绑定及获取和计算方法
下面小编就为大家分享一篇vue checkbox 全选数据的绑定及获取和计算方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vxe-table如何在单元格中渲染简单的饼图
这篇文章主要介绍了vxe-table如何在单元格中渲染简单的饼图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
详解vue-router和vue-cli以及组件之间的传值
这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue中使用vue-pdf组件实现文件预览及相应报错解决
在需求中,经常遇见pdf的在线预览效果,很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf,下面这篇文章主要给大家介绍了关于vue中使用vue-pdf组件实现文件预览及相应报错解决的相关资料,需要的朋友可以参考下
2022-09-09
vue使用keep-alive后清除缓存的方法
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08
vue单页面在微信下只能分享落地页的解决方案
这篇文章主要介绍了vue单页面在微信下只能分享落地页的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
vue绑定数字类型 value为数字的实例
这篇文章主要介绍了vue绑定数字类型 value为数字的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
使用vant的地域控件追加全部选项
这篇文章主要介绍了使用vant的地域控件追加全部选项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue中如何使用ztree
这篇文章主要介绍了vue中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
2018-02-02
在vue项目中使用sass语法问题
sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。这篇文章主要介绍了在vue项目中使用sass语法,需要的朋友可以参考下
2019-07-07