Vue.js iView Layout相关修改

版权声明: https://blog.csdn.net/u014418725/article/details/79979719

问题:

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

            

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页