Vue Element-UI el-aside组件永远有一个300px的width
Vue Element-UI el-aside组件永远有一个300px的width文章目录Vue Element-UI el-aside组件永远有一个300px的width问题发生问题描述问题排查解决方案和总结根本原因解决方案总结问题发生前端学艺不精,所以所写的前端代码层次也没有特别高,久闻Element-UI有布局相关的组件,但是从来没有使用过,最近写代码心血来潮,决定使用element-...
Vue Element-UI el-aside组件永远有一个300px的width
问题发生
前端学艺不精,所以所写的前端代码层次也没有特别高,久闻Element-UI有布局相关的组件,但是从来没有使用过,最近写代码心血来潮,决定使用element-UI布局组件 + vue-router的嵌套路由写一个稍微美观点的代码。但是没想到刚用就碰到了坑。
问题描述
网页结构组成使用 el-container包含el-aside和el-main组合的结构,简要代码如下:
<template>
<el-container>
<el-aside id="aside-style">
...
</el-aside>
...
</el-container>
</template>
<style scoped>
#aside-style {
min-width: 160px;
max-width: 280px;
width: 18%;
...
}
</style>
但是发现<el-aside>组件宽度不对,并且永远保持同一个宽度,查看网页源码发现
永远都有一个元素宽度属性被添加,导致最终的宽度错误。
问题排查
- 首先对全局的300px数值进行全局搜索,查看是不是因为代码某处设置了宽度,导致的问题。结果并没有发现可疑的设置。
- 检查代码是否正确作用,确定对aside-style的相关设置已经作用到了<el-aside>组件上,只是宽度被覆盖,手动去除覆盖的元素样式,<el-aside>组件正常运作。
- 直接查看<el-aside>组件源码,发现其接受一个width值,并使用元素样式设定这个值,若没有传width值,则默认指定width为300px,破案了。
解决方案和总结
根本原因
<el-aside>组件中的源码如下,但是设定了默认的宽度,所以在没有指定宽度的时候,会按照默认的宽度进行设定,且优先级极高。
<template>
<aside class="el-aside" :style="{ width }">
<slot></slot>
</aside>
</template>
<script>
export default {
name: 'ElAside',
componentName: 'ElAside',
props: {
width: {
type: String,
default: '300px'
}
}
};
</script>
解决方案
使用代码:
<el-aside id="aside-style" width="18%">
...
<el-aside>
指定宽度18%后,宽度按照指定样式显示
总结
问题解决后,查看Element-UI的官方文档发现,在文档底部的组件属性说明中,已经指出对于<el-aside>、<el-header>和<el-footer>三个组件,都有默认的宽度或高度,所以在使用时需要对此进行特别关注;同时,遇到错误的时候,可以直接查找官方文档相关内容,这是一个非常直接和简单的获得建议和解决问题的方向。
如有错误,欢迎指摘。也欢迎通过各种渠道与我讨论交流。
更多推荐
所有评论(0)