安装 vue-gird-layout

 

先跑一遍demo 运行起来。

# install with npm    npm install vue-grid-layout --save

 index.vue 

1 
      29 30 62 63 64 

 layoutData.json

{  "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"    }  ]}

 运行起来之后，页面效果

    加上点背景颜色

.vue-grid-item {  background: aquamarine;}

　　

 

　　此时可以拖拽，可以改变格子大小了。

　　接下来开始写几个方法，封装一下配置

　　

添加右键事件，以后配置的时候用

　　html:

     
      
      
1
      
      
2
      
      
3
    
     

　　script：

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

　　 style:

.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;        }      }    }