Vue-Grid-Layout 的使用

1.下载

  官方地址： https://jbaysolutions.github.io/vue-grid-layout/zh/

  npm的地址： https://www.npmjs.com/package/vue-grid-layout

npm install vue-grid-layout		// 供vue2.0版本使用

npm install vue-grid-layout@3.0.0-beta1		// 供vue3.0版本使用不会报错

2.引用

  在main.js中进行挂载

1.  
   import GirdLayout from 'vue-grid-layout'
2.  
   createApp(App).use(GirdLayout).mount('#app')

  在组件中引用注册

1.  
   <script>
2.  
   import { GridLayout, GridItem } from 'vue-grid-layout'
3.  
   export default {
4.  
   name: '',
5.  
   }
6.  
   </script>

3.实例

1.  
   <template>
2.  
   <grid-layout
3.  
   :layout="layout" :col-num='4' :row-height="100" :is-draggable="true"
4.  
   :is-resizable="true" :maxRows="3":vertical-compact="true" :margin="[10, 10]"
5.  
   :use-css-transforms="true">
6.  
   <grid-item v-for="item in layout" :x='item.x' :y="item.y" :w="item.w" :h="item.h"
7.  
   :i="item.i" :key='item.i' @moved="onItemMoved" class="item">
8.  
   </grid-item>
9.  
   </grid-layout>
10.  
    </template>
11.  
    <script>
12.  
    import { GirdLayout, GridItem } from 'vue-grid-layout'
13.  
    export default {
14.  
    name: 'app',
15.  
    data() {
16.  
    return{
17.  
    layout: [
18.  
    {x:0, y:0, w:1, w:1, h:1, i: '0'},
19.  
    {x:1, y:0, w:1, w:1, h:1, i: '1'},
20.  
    {x:2, y:0, w:1, w:1, h:1, i: '2'},
21.  
    {x:3, y:0, w:1, w:1, h:1, i: '3'},
22.  
    ]
23.  
    }
24.  
    }
25.  
    }
26.  
    </script>
27.  
    <style>
28.  
    .item {
29.  
    background-color: aqua;
30.  
    }
31.  
    </style>

这篇好文章是转载于：学新通技术网