1 <template>
 2   <div class="board" style="width: 100%">
 3     <div class="home">
 4       <grid-layout
 5         :layout="layoutData"
 6         :col-num="12"
 7         :row-height="layoutHeight"
 8         :is-draggable="dialogVisible"
 9         :is-resizable="dialogVisible"
10         :is-mirrored="false"
11         :vertical-compact="true"
12         :margin="[10, 10]"
13         :use-css-transforms="true"
14       >
15         <grid-item v-for="(item,index) in layoutData"
16                    :x="item.x"
17                    :y="item.y"
18                    :w="item.w"
19                    :h="item.h"
20                    :i="item.i"
21                    :key="item.i"
22         >
23           {{index}}
24         </grid-item>
25       </grid-layout>
26     </div>
27   </div>
28 </template>
29
30 <script>
31   import layoutData from '@/virtualData/layoutData.json'
32   import VueGridLayout from 'vue-grid-layout'
33
34   const GridLayout = VueGridLayout.GridLayout
35   const GridItem = VueGridLayout.GridItem
36   export default {
37     data() {
38       return {
39         // 布局数据
40         layoutData: [],
41         layoutConfig: {
42           height: 100, // 默认高度
43           dialogVisible: false // 是否可拖拽或改变大小
44         }
45       }
46     },
47     components: {
48       GridLayout,
49       GridItem
50     },
51     methods: {
52       init() {
53         this.layoutData = layoutData.mainData
54       }
55     },
56     created() {
57       this.init()
58     }
59   }
60
61 </script>
62
63
64 <style lang="scss" scoped>
65 </style>

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

 <data>menuConfig: {visible: false,left: 0,top: 0}<methods>// 右键打开菜单
      openMenu(tag, e) {this.menuConfig.visible = truethis.menuConfig.left = e.clientXthis.menuConfig.top = e.clientY},// 关闭菜单
      closeMenu() {this.menuConfig.visible = false},// 测试方法
      test(i) {console.log(i)}},
<watch>
// 点击任意处，关闭菜单'menuConfig.visible'() {if (this.menuConfig.visible) {document.body.addEventListener('click', this.closeMenu)} else {document.body.removeEventListener('click', this.closeMenu)}}