利用vue-gird-layout 制作可定制桌面 （一）

安装 vue-gird-layout

https://github.com/jbaysolutions/vue-grid-layout

先跑一遍demo 运行起来。

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

index.vue

 <template>
   <div class="board" style="width: 100%">
     <div class="home">
       <grid-layout
         :layout="layoutData"
         :col-num="12"
         :row-height="layoutHeight"
         :is-draggable="dialogVisible"
         :is-resizable="dialogVisible"
         :is-mirrored="false"
         :vertical-compact="true"
         :margin="[10, 10]"
         :use-css-transforms="true"
       >
         <grid-item v-for="(item,index) in layoutData"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
                    :key="item.i"
         >
           {{index}}
         </grid-item>
       </grid-layout>
     </div>
   </div>
 </template>

 <script>
   import layoutData from '@/virtualData/layoutData.json'
   import VueGridLayout from 'vue-grid-layout'

   const GridLayout = VueGridLayout.GridLayout
   const GridItem = VueGridLayout.GridItem
   export default {
     data() {
       return {
         // 布局数据
         layoutData: [],
         layoutConfig: {
           height: 100, // 默认高度
           dialogVisible: false // 是否可拖拽或改变大小
         }
       }
     },
     components: {
       GridLayout,
       GridItem
     },
     methods: {
       init() {
         this.layoutData = layoutData.mainData
       }
     },
     created() {
       this.init()
     }
   }

 </script>

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

index.vue

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

layoutData.json

运行起来之后，页面效果

加上点背景颜色

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

　　

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

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

　　

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

　　html:

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

　　script：

 <data>
        menuConfig: {
          visible: false,
          left: 0,
          top: 0
        }
    <methods>
      // 右键打开菜单
      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)
      }
    },
<watch>
// 点击任意处，关闭菜单
 '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;
        }
      }
    }