vue-grid-layout布局设置item最小宽度minW

最近项目中在用vue-grid-layout布局,红色标记部分是title部分,由于要展示文字和时间选择框以及图标等元素,所以宽度不能特别小,否则布局会乱,想办法如何设置item的最小宽度

布局如图所示

刚开始没有仔细看vue-grid-layout的官方文档,采取的方法是监听元素尺寸,用三目运算符判断宽度小于最小值时设置宽度为最小值,否则设置为元素当前调整宽度,但是不起作用,没找到原因,打印了数据,三目运算符部分确实执行了,但是到页面时最小值仍然不起作用。

查看官方文档,发现可以设置minW,因此在layout数据中设置minW,minW可以根据自己的需要设置,比如我的项目中这个item的原始宽度我设置的是6,minW为5的时候,页面布局不会乱,所以设置的是5,大家可以根据自己的需要设置
在这里插入图片描述
然后去查看效果,还是不行,都要自闭了,感觉不应该有问题了啊,但是最小宽度还是不起作用,后来发现是忘了在HTML中元素设置

就是这里,一定要设置,不然不起作用。设置好就可以了

算是踩得一个坑,在网上搜了好久也没找到很详细的设置宽度最小值的文章,记录一下,有需要的人可以参考下,宽度最大值,高度最大值,高度最小值均同理。

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值