问题:
在利用Vue.js和iView组件库设计网页时,使用原生的html代码太多,并不好维护。回看iView官方文档,发现有个布局组件,考虑能不能使用这个进行简单的重写。
过程:
由于个人编写的是一个应用型后台管理网站,所以选取如图的整体布局
整体代码可以简单的表示成
<template>
<Layout>
<!-- header -->
<Header>
<selfheader></selfheader>
</Header>
<!-- body -->
<Layout>
<Sider>
<authmenu></authmenu>
</Sider>
<Layout>
<curpos></curpos><!-- 当前位置 -->
<div style="height: 100%;width: 100%;">
<authwelcome v-if="choose.link0"></authwelcome>
</div>
</Layout>
</Layout>
</Layout>
</template>
细节:
1 Header左右出现间隔
F12调出控制台,查看对应的css设置
很明显是padding的问题,应该是<Header>的问题
修改:
在不动'iview/dist/styles/iview.css'的情况下,利用重写覆盖来修改padding
<style>
.ivu-layout-header {
padding: 0;
}
</style>
2 Sider,左侧Menu导航栏的高度问题,无法覆盖剩余高度
左侧Menu导航栏悬空,看起来特别尴尬,直接添加height:100%并不起作用
修改:
给当前Layout添加style="position: absolute;top: 64px;bottom: 0px;left: 0px;right: 0px;"
利用绝对布局,占据界面距左边0px,右边0px,上边64px(Header默认的高度是64px),下边(底部)0px
这下看起来就正常了,并且不会随着浏览器框体的拉伸和缩放而发生超出预期的变形
总结:
iView组件库的方案整体还是比较全的,不过有的组件只能说,并没有写完善,使用起来非常死板,如Header的高度为64px,可以使用覆盖的方式修改,但是Sider Content等组件也会发生相关变化,如果要修改,会十分麻烦,最后不得不放弃。
iView在使用的过程的,常常会出现并不想要的结果,这时就要学会修改。Vue.js使用渲染式生成界面,所有的组件最后都是转化成html+css+js的基本结构(双向绑定除外),我们可以利用css的属性覆盖优先级,来实现css的重写,方式主要有在<style></style>里添加(包含class)或者直接在标签里直接添加相关css属性。