在两个月前，我被公司安排做一个系统的前端页面开发，当时我还是个对前端知识一无所知的小白，html标签只知道<p><body>这些，css只知道width啊，height啊，margin啊这种很简单的属性，js就只知道变量都是弱类型，声明var全搞定，什么前端框架更是一概不知了。没人做，只能硬着头皮上了，用的vue框架，一路跌跌撞撞，踩了不知道多少坑，终于从无到有写出来个平台，不算粗糙也算不上精美，只能说一般般，到现在也只敢说自己微微入了门，深感前端的博大精深和折磨人，样式就要调死人，而且因为自己基础的薄弱，对一些想要实现的功能和效果根本有心无力，一句话，心很累！
虽然自己还是个菜鸟，但是两个月做下来，自己也有一些心得，想要拿出来跟大家交流交流，顺便抛砖引玉，万一大神看到了，说，你这么做太愚蠢了，应该怎么怎么滴，那岂不是很爽，期待幻想中的大神~
今天想要说的是Vue组件宽高自适应问题。针对不同的屏幕大小，肯定不能把组件的width，height都定死了，用百分比对一些效果还有布局来说也不是很好。做到现在，我是有几个自适应的小方法的，但是也有不满意的地方，想要提出来跟大家交流交流，感觉应该有更好的方法。
1.在created方法中设置宽高
在created方法中，使用jQuery获取组件，设置组件的宽高
created () {
$('#total').css('width', $('#rightBox').height() * 0.5)
}
2.使用计算属性计算宽高
computed: {
mapWidth() {return$(document).width() -200+'px'},
mapHeight() {return$(document).height() -100+'px'}
},
在templete中的组件要这么写
<div id="map":style="{width: mapWidth, height: mapHeight}"></div>
两种方法其实大同小异，但是有一个大问题，就是都是一次性设置，不能做到随屏幕大小改变，除非刷新。感觉很愚蠢又找不到别的方法。希望有人能知道聪明的做法，一起交流交流呗
网友评论