我正在参加「掘金·启航计划」

前言

最近老板想给看板升级，看板都是些图表或者数据排列天气等，需求是可以对各个卡片进行拖拽，添加些没有的图表，简单来说，把页面的设计交给用户。

直接实战

讲究一个言简意赅，包学包会，立竿见影。这次使用的是vue-gird-layout，这个用vue2似乎更契合，所以用了vue2.

上代码，第一步

先引入代码，包含vue2，element，axios，girdlayout，girdlayout要去官网下他的版本，在githubs里，需要的评论留言我可以发。

    <script src="/scp/vue/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/scp/vue/element/index.js"></script>
    <script src="/scp/vue/vue-grid-layout.umd.min.js"></script>
    <script src="/scp/vue/axios.js"></script>

    <!-- echarts -->
    <script src="https://unpkg.com/echarts@5.4.2/dist/echarts.js"></script>

第二步，注册vue实例

创建vue实例开用,因为是在html里引用的js，会自动注册，很简单

    new Vue({
        el: "#app",
        })

第三步，开用

new Vue({
	    el: '#app',
	    data: {
	        layout: [
                {"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"}
            ],
	    },
	});

我们需要再data里定义这里吗的数据源layout，每一个数组对象代表一个框框，x，y是横纵坐标，wh是宽高，i是id，

 <grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
    >

        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i">
            {{item.i}}
        </grid-item>
    </grid-layout>

页面上使用组件的方式引入，此时页面已经有东西了，但是很丑，所以需要一些样式

    .vue-grid-item {
        background-color: #fff;
        border-radius: 14px;
        box-shadow: 0px 6px 24px 0px rgba(53, 55, 81, 0.06);
      }
      
          .remove {
        position: absolute;
        right: 10px;
        top: 15px;
        cursor: pointer;
      }
      .droppable-element {
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 100%;
      }

这样就实现了最基础的拖拽卡片，可以自由拖动，实测效果很不错

增加额外功能

目前我实现了，自动保存，编辑模式，抽屉添加组件，拖拽点击新增删除功能，还有内部内容自适应，增加表格自适应，组件形式载入，文本组件自动保存，看的人多我就来个更详细的教程哦