欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue框架设置响应式布局

程序员文章站 2024-01-29 19:40:16
...

最近折腾自己的网站,在自适应方面发现有了很多新的方法,感叹前端的技术真是日新月异,从以前只能这样,到现在除了这样,还可以那样,甚至再那样......技术永无止境啊。

回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择,的确,其中的各种xl,xs,栅格布局让响应式变得很容易。

话说,这Vue做响应式,其实一点都不复杂:一个生命周期钩子,一个条指令,一套js判断语句解决,说到这,高手们应该早已经明白如何操作了, 这篇文章就给广大刚入门的同学们拓宽一下吧(不熟悉Vue的同学,还是先恶补一下Vue基础吧)。

一个生命周期钩子——mounted:挂载时操作;一条指令——v-show(本例中采用,非绝对):根据条件显示;一套js判断语句:if/else或者switch/case。具体操作起来很简单:(代码直接展示)

<!--这是一段导航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
	<ul class="easyUtil-flexContainerRow">
		<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
			<a :href="nav.href">{{nav.name}}</a>
		</li>
	</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
	el : "#head",
	data : {
        //此处省略一千字
		show : true
		},
	mounted : function(){
		//可用于设置自适应屏幕,根据获得的可视宽度(兼容性)判断是否显示
		let w = document.documentElement.offsetWidth || document.body.offsetWidth;
		if(w < 1000){
			this.show = false;
		}
})

我的目的是在移动设备中不显示搜索栏(search-part)部分,那么利用v-show,和mounted配合,在挂载时检测一下屏幕可视宽度,如果小于1000,则认为是手机,v-show设为false,不显示即可。

看,很简单吧,简单到我觉得自己好像在忽悠。其实到这里,原理已经说完,具体的应用大家可以自行发挥,而且也不一定就用v-show,我这里是为了显示与否,如果大家想添加样式什么的,还可以写别的,甚至于计算属性,watch都可以。只要记住在挂载的时候完成即可,不然页面会有跳动,不利于体验。

可能有人会问,用css的@media就可以完成了,为啥用js,我这里想说的是,我并没有否认@media,这里只是写出更多一种方式,同时结合一下现在很火的前端框架。多一种方法,就多一种解决思路,不至于再回到以前"只能这样"的道路上。具体到实际应用中,当然是最适合的方法为主。前端水深,前端的路子也越来越多,越来也丰富,敞开思维,就会看见不同的天空。

ps一句,js确实需要刷新页面重新加载才会显示,也就是说如果用户将页面从大屏移动到小屏幕,就可能出现布局不响应问题,但是在实际使用中,这种情况几乎不会出现,因为用户不能可能将电脑打开的网页,直接移动到手机上,操作永远都是重新打开,所以js,css在显示效果上是没有区别的(当然如果js太过复杂,性能会有影响)。另外,文中方法的兼容性问题,只要支持Vue的浏览器,都没问题。

就说到这吧,欢迎大神指正,不胜感激!