前端开发之vue-grid-layout的使用和实例

前言

Vue Grid Layout官方文档
Vue Grid Layout中文文档
可通过拖拽改变布局（如果我们做简易开发，通过拖拽组件形成页面或者有这个需求就是非常实用的了）
因为vue-grid-layout是vue2版本的 但自己用的是vue3版本，所以要安装vue3的依赖和相关配置

效果图

一、vue中简单案例

1、安装组件

NPM

npm install vue-grid-layout --save

Yarn

yarn add vue-grid-layout

2、vue文件

<template>
  <div style="width: 100%; height: 100%">
    <div class="layoutJSON">
      显示为
      <code>[x, y, w, h]</code>
      :
      <div class="columns">
        <div v-for="(item, indexVar) in layout" :key="indexVar">
          <b>{
  { item.i }}</b>
          : [{
  { item.x }}, {
  { item.y }}, {
  { item.w }}, {
  { item.h }}]
        </div>
      </div>
    </div>
    <hr />
    <input v-model="draggable" type="checkbox" />
    可拖动
    <input v-model="resizable" type="checkbox" />
    可调整大小
    <input v-model="responsive" type="checkbox" />
    镜像
    <br />
    <div style="width: 100%; margin-top: 10px; height: 100%">
      <grid-layout
        :col-num="12"
        :is-draggable="draggable"
        :is-resizable="resizable"
        :layout="layout"
        :responsive="responsive"
        :row-height