如何为 vue-grid-layout 的网格项添加点击事件?
我正在使用 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
基本上,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.