Vue3 vue-grid-layout布局添加右键事件

示例

code

<template>
  <div class="dashboard-container">

    <ul class='contextmenu' v-show="menuConfig.visible" :style="{left:menuConfig.left+'px',top:menuConfig.top+'px'}">
      <li @click="test(1)">关闭</li>
      <li @click="test(2)">取消</li>
      <li @click="test(3)">收藏</li>
    </ul>

    <grid-layout
      :layout="layoutData"
      :is-mirrored="false"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :use-css-transforms="true"
    >

      <grid-item v-for="item in layoutData"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i"
                 :key="item.i">
        <div class="layout-Box" @contextmenu.prevent="openMenu(item, $event)">
          {{ item.i }}
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script setup>

import {reactive, watch} from "vue";

let layoutData = [
  {"x":0,"y":0,"w":2,"h":2,"i":"0"},
  {"x":2,"y":0,"w":2,"h":4,"i":"1"},
  {"x":4,"y":0,"w":2,"h":5,"i":"2"},
  {"x":6,"y":0,"w":2,"h":3,"i":"3"},
  {"x":8,"y":0,"w":2,"h":3,"i":"4"},
  {"x":10,"y":0,"w":2,"h":3,"i":"5"},
  {"x":0,"y":5,"w":2,"h":5,"i":"6"},
  {"x":2,"y":5,"w":2,"h":5,"i":"7"},
  {"x":4,"y":5,"w":2,"h":5,"i":"8"},
  {"x":6,"y":3,"w":2,"h":4,"i":"9"},
  {"x":8,"y":4,"w":2,"h":4,"i":"10"},
  {"x":10,"y":4,"w":2,"h":4,"i":"11"},
  {"x":0,"y":10,"w":2,"h":5,"i":"12"},
  {"x":2,"y":10,"w":2,"h":5,"i":"13"},
  {"x":4,"y":8,"w":2,"h":4,"i":"14"},
  {"x":6,"y":8,"w":2,"h":4,"i":"15"},
  {"x":8,"y":10,"w":2,"h":5,"i":"16"},
  {"x":10,"y":4,"w":2,"h":2,"i":"17"},
  {"x":0,"y":9,"w":2,"h":3,"i":"18"},
  {"x":2,"y":6,"w":2,"h":2,"i":"19"}
];

const menuConfig = reactive({
  visible: false, left: 0, top: 0
})

const openMenu = (tag, e) => {
  menuConfig.visible = true
  menuConfig.left = e.clientX
  menuConfig.top = e.clientY
}

const closeMenu = () => {
  menuConfig.visible = false
}

const test = (i) => {
  console.log('output-> i::: ', i)
}

watch(() => menuConfig.visible, (newValue, oldValue) => {
  if (menuConfig.visible) {
    document.body.addEventListener('click', closeMenu)
  } else {
    document.body.removeEventListener('click', closeMenu)
  }
}, {deep: true})
</script>


<style lang="scss" scoped>

</style>
<style lang="scss" scoped>


.vue-grid-layout {
  background: #eee;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  background: #cce;
}

.layout-Box {
  width: 100%;
  height: 100%;
}

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 100;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }
  }
}

</style>