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

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

布局如图所示

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

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

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

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

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。它采用了组件化的开发方式,使得开发者可以将页面拆分成多个独立的组件,每个组件负责自己的逻辑和样式。Vue具有简洁易学的语法和高效的性能,因此在前端开发中得到了广泛应用。 Vue-grid-layoutVue的一个插件,用于实现网格布局。它提供了一个可拖拽和可调整大小的网格系统,使得开发者可以轻松地创建灵活的布局。通过使用vue-grid-layout,开发者可以将页面元素按照网格的形式进行排列,并且可以通过拖拽和调整大小来改变元素的位置和尺寸。 以下是一个简单的示例代码,展示了如何在Vue中使用vue-grid-layout: ```html <template> <div> <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"> <div v-for="item in layout" :key="item.i" :data-grid="item"> {{ item.i }} </div> </vue-grid-layout> </div> </template> <script> import VueGridLayout from 'vue-grid-layout'; export default { components: { VueGridLayout }, data() { return { layout: [ { x: 0, y: 0, w: 2, h: 2, i: '1' }, { x: 2, y: 0, w: 4, h: 2, i: '2' }, { x: 6, y: 0, w: 2, h: 4, i: '3' } ] }; } }; </script> ``` 在上面的代码中,我们首先导入了vue-grid-layout插件,并将其注册为Vue的组件。然后,在模板中使用`vue-grid-layout`标签来创建一个网格布局容器。通过设置不同的属性,我们可以定义网格的列数、行高、是否可拖拽和调整大小等。在`vue-grid-layout`标签内部,我们使用`v-for`指令来遍历`layout`数组,并将每个元素渲染为一个网格项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值