vue-grid-layout 使用 新增vue-grid-item拖拽 添加样式

项目中使用到vue-grid-layout布局来实现拖拽组件,实现组件的自定义布局

使用中发现了一些问题,如果熙新增的话,新增的框不太明显,如果把每一个vue-grid-item设置样式的话,所有的组件块都会加上背景色,这样达不到设计的需求,违背了初衷;所以做了如下改进:

具体使用:

vue-grid-layout git 地址: 传送门

<grid-layout
      :layout.sync="layout"
      :col-num="colNum"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :use-css-transforms="true"
    >
      <template>
        <div v-for="(item, i) in layout" :key="i">
          <div class="home" @contextmenu.prevent="showMenu(i)">
            <grid-item
              :x="item.x"
              :y&#
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue Grid Layout是一个可拖拽和可调整大小的网格布局组件,它可以帮助我们实现灵活可变的网格布局。在Vue Grid Layout中,我们可以很方便地添加和删除网格项,并且可以通过监听相关事件来进行相应的处理。 要添加一个网格项,我们可以使用Vue Grid Layout提供的`addItem`方法。该方法接受一个包含网格项的配置对象作为参数,配置对象中包括网格项的id、x和y轴的坐标、宽度和高度等信息。我们可以在需要添加网格项的地方调用`addItem`方法来动态添加网格项。 例如,我们可以在点击一个按钮的事件处理函数中调用`addItem`方法,将一个新的网格项添加到网格布局中。具体的代码可以如下所示: ```javascript methods: { handleAddItem() { const newItem = { id: 'new-item', x: 0, y: 0, w: 2, h: 2 }; this.$refs.gridLayoutRef.addItem(newItem); } } ``` 要删除一个网格项,我们可以使用Vue Grid Layout提供的`removeItem`方法。该方法接受一个网格项的id作为参数,我们可以通过id来指定要删除的网格项。同样地,在需要删除网格项的地方调用`removeItem`方法即可完成删除。 例如,我们可以在点击某个网格项的删除按钮的事件处理函数中调用`removeItem`方法,将该网格项从网格布局中移除。具体的代码可以如下所示: ```javascript methods: { handleRemoveItem(itemId) { this.$refs.gridLayoutRef.removeItem(itemId); } } ``` 通过这样的方式,我们可以很方便地添加和删除Vue Grid Layout中的网格项,实现动态的网格布局操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值