Vue.js iView Layout相关修改

标签: Vue.js iView Layout Sider 绝对布局
4人阅读 评论(0) 收藏 举报
分类:

问题:

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

            

查看评论

iview 使用第三天

最近几天在做新项目,简单的小项目,可是因为没有UI,只能自己来搜索页面,根据功能点,自定义页面~一句话,自由发挥。 好希望有一个设计,好希望有一个UI同事啊~~~ (以上,纯属个人想法,以下,纯属...
  • LiangHui0914
  • LiangHui0914
  • 2017-12-12 21:33:36
  • 2162

View&五大布局介绍

一:UI视图结构 什么是View     这个类是用户接口的基础构件。 View 表示屏幕上的一块矩形区域,负责绘制这个区域和事件处理。     View 是所有widget类的基类,Wid...
  • u013599468
  • u013599468
  • 2017-09-20 18:55:10
  • 517

iview非render中组件写法

在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker。以下组件,在非 template/render ...
  • jimjack2013
  • jimjack2013
  • 2018-03-22 17:47:03
  • 76

springboot+Vue.js+iView搭建图书管理系统(附完整源码)

进击的程序猿 2018-01-14 17:31:55背景:最近在学习Vue.js,于是决定借此来巩固下学习的内容,正好结合上在研究的springboot,前端UI使用的是iView,确实相当漂亮,关键...
  • pingdouble
  • pingdouble
  • 2018-03-16 18:23:16
  • 225

Vuejsshizhan.pdf.zip

  • 2018年02月13日 15:54
  • 198.17MB
  • 下载

ListView-更改控件显示样式

代码设置: HWND hListView; 如何更改ListView控件的显示样式  使用ListView_SetView宏int ListView_SetView(HWND hwnd, DWORD ...
  • aasmfox
  • aasmfox
  • 2011-06-10 15:08:00
  • 2516

Vue2 + iVIew 后台管理系统解决方案

和element说再见! https://github.com/vanishcode/iview2-management-system
  • SFtec
  • SFtec
  • 2017-03-15 21:40:23
  • 14054

[DIV/CSS] Vue.js 开发实践:实现精巧的无限加载与分页功能

本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景——分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比,更全面的展示使用Vue.js...
  • hxm102581
  • hxm102581
  • 2016-06-22 17:40:01
  • 3077

vue router路由钩子详解

导航钩子 正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。 全局钩子 你...
  • zjl516088421
  • zjl516088421
  • 2017-09-26 13:19:06
  • 417

将iview中表单验证提示的红色*改为图片

表单验证的红色*,是iview自带的样式,想要设置自己的样式,需要将iview的样式改变. 要将图片转码成base64 iview原来的样式: .ivu-form-item-required...
  • xjt_1993
  • xjt_1993
  • 2018-01-19 17:31:49
  • 171
    个人资料
    持之以恒
    等级:
    访问量: 2622
    积分: 125
    排名: 119万+
    文章分类
    文章存档
    最新评论