如何为 vue-grid-layout 的网格项添加点击事件?

发布于 2025-01-09 15:10:08 字数 822 浏览 3 评论 0原文

我正在使用 vue-grid-layout 包 -https://jbaysolutions.github.io/vue-grid-layout/guide/#npm 并尝试为网格项添加单击事件。但是,似乎不起作用。如何实现网格项的点击事件?

<grid-layout
    ref="gridlayout"
    style="height:1000px"
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :responsive="true"
    :vertical-compact="true"
    :use-css-transforms="true"
    :preventCollision="true"
    :verticalCompact="false"
  >
    <grid-item
      :key="item.i"
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @click="widgetClicked(item)"
    >
      <GridComponent :grid_item="item" />
      <span class="content"></span>
    </grid-item>
  </grid-layout>

I am using vue-grid-layout package -https://jbaysolutions.github.io/vue-grid-layout/guide/#npm and trying to add a click event for grid items. But, it seems like it is not working. How can I implement the click event for grid items?

<grid-layout
    ref="gridlayout"
    style="height:1000px"
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :responsive="true"
    :vertical-compact="true"
    :use-css-transforms="true"
    :preventCollision="true"
    :verticalCompact="false"
  >
    <grid-item
      :key="item.i"
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @click="widgetClicked(item)"
    >
      <GridComponent :grid_item="item" />
      <span class="content"></span>
    </grid-item>
  </grid-layout>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

所有深爱都是秘密 2025-01-16 15:10:08

基本上,vue-grid-layout中的网格项不支持@click@mousedown事件。根据贡献者的说法,您必须通过添加 div 来自己实现它。我链接了github问题供您参考。

Github 问题相同。

Basically the grid items in vue-grid-layout do not support @click or @mousedown events. And according to a contributor, you have to implement it yourself by adding a div. I am linking the github issue for your reference.

Github Issue for the same.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文