vue-grid-layout使用方法以及参数介绍

59 阅读 0 评论 39 点赞

我是靠谱客的博主听话航空，最近开发中收集的这篇文章主要介绍vue-grid-layout使用方法以及参数介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、介绍

vue-grid-layout 一个可拖拽的编辑器，

二、安装方法

npm install vue-grild-layout --save

导入

 import VueGridLayout from 'vue-grid-layout';

或者直接在script里引入

 <script src="vue-grid-layout.umd.min.js"></script>

添加到vue组件

export default {
       components: {
           GridLayout: VueGridLayout.GridLayout,
           GridItem: VueGridLayout.GridItem
       },
   // ... data, methods, mounted ()
   }

 <grid-layout :layout.sync="layout"   网格初始化布局 --必须填写 每一项都要有i,x,y,w,h属性
              :col-num="colNum"  表示网格有多少列 --非必填 默认为12
              :row-height="30"  表示一行的高度(像素为单位) -- 非必填 默认为150
              :is-draggable="draggable" 表示网格项数是否可以拖动(Boolean) --非必填 默认为true
              :is-resizable="resizable"  表示网格是否可以改变大小(Boolean) --非必填 默认为true
              :vertical-compact="true"  垂直方向上 是否应该紧凑布局(Boolean) --非必填 默认为true
              :use-css-transforms="true" 是否使用css的transforms来排版 --非必填 为false时，使用后采用定位方法来布局 默认为true
              :autoSize="true"  容器是否适应内部变化(Boolean) --非必填 默认为true
              :responsive="false"  布局是否应响应窗口宽度 --非必填 为false时，使用后采用定位方法布局 默认false


            @layout-created="layoutCreatedEvent"  // 布局创建事件
            @layout-before-mount="layoutBeforeMountEvent" // 布局安装以前事件
            @layout-mounted="layoutMountedEvent"    // 布局安装事件
            @layout-ready="layoutReadyEvent"    // 布局准备活动
            @layout-updated="layoutUpdatedEvent" // 格子位置，大小更新
             >
            <grid-item v-for="item in layout" 便利数组内容 渲染元素
                       :static="item.static" 
                       :x="item.x"  横向距离
                       :y="item.y"  纵向距离
                       :w="item.w"  宽度
                       :h="item.h"  高度 
                       :i="item.i"  宽度
              >
                <span class="text">{{item.i}}</span>
                <span class="remove" @click="removeItem(item.i)">x</span>
            </grid-item>
        </grid-layout>