Vue.js iView Layout相关修改

问题：

        在利用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属性。