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

Question

我正在使用 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>

Answer 1

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

Github Issue for the same.

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

How to add click event for grid items for vue-grid-layout?

grid-layout

vue.js

vue-component

vuejs2