Vue-Grid-Layout分享一款好用的可拖拽组件

缺乏、安全感 2022-02-25 13:44 940阅读 0赞

在使用Grafana的过程中，发现Grafana关于视图页面中每一个面板都可拖拽，可随意放大放小，体验非常棒，F12看了Grafana的代码，看打包后的代码很像react，进一步css，看到有grid layout的字眼，然后尝试去搜了下有没有这方面的组件，一搜果然是有这样的组件的。首先看到的是react版本的组件，然后搜了下也有vue相关的。 以前也见过jquery的可拖拽组件demo，但是整体上感觉不如grid-layout优秀。

[【1】 VUE Grid Layout][1_ VUE Grid Layout].

[【2】React Grid Layout][2_React Grid Layout]

[【3】jQuery响应式可拖拽的元素组件网格布局插件][3_jQuery]

每个组件在GitHub上的介绍还是比较清晰易懂，项目中主要用到了vue-grid-layout组件，下面简单介绍下。

执行如下命令安装

npm install vue-grid-layout --save

然后新增一个grid\_layout.vue文件

<template>
      <div>
        <grid-layout
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :layoutList="testLayout">
        </grid-layout>
      </div>
    </template>
    
    <script>
      import gridLayout from './../comm/grid_layout'
    
      export default {
        data() {
          return {
            testLayout: [
              {"x": 0, "y": 0, "w": 4, "h": 7, "i": "0"},
              {"x": 4, "y": 0, "w": 4, "h": 7, "i": "1"},
              {"x": 8, "y": 0, "w": 4, "h": 7, "i": "2"},
              {"x": 0, "y": 7, "w": 4, "h": 6, "i": "3"},
              {"x": 0, "y": 13, "w": 4, "h": 5, "i": "4"},
              {"x": 4, "y": 7, "w": 4, "h": 11, "i": "5"},
              {"x": 8, "y": 7, "w": 4, "h": 6, "i": "6"},
              {"x": 8, "y": 13, "w": 4, "h": 5, "i": "7"}
            ]
          }
        },
        components: {
          gridLayout
        },
      }
    </script>
    
    <style scoped>
    </style>

is-draggable 表示是否可拖拽，设置为true，说明是可以随意拖拽的
    is-resizable 表示是否可缩放，设置为ture，说明可以通过鼠标调整每一区域的大小
    layoutList   是绑定的数据实体，用来标识区域大小的
    
    layoutList是一个对象数据，每一个对象如下

{"x": 0, "y": 0, "w": 4, "h": 7, "i": "0"}

其中：
    x 标识该区域左上角点的x坐标
    y 标识该区域左上角点的y坐标
    w 是宽度
    h 是高度
    i 是唯一标示，表示必须唯一，且不同，不然，你会发现改变大小的时候，所有的都会被改变。。。

[1_ VUE Grid Layout]: https://github.com/jbaysolutions/vue-grid-layout
[2_React Grid Layout]: https://strml.github.io/react-grid-layout/examples/0-showcase.html
[3_jQuery]: http://www.jq22.com/yanshi6649