本组件是对vue-grid-layout源码插件的修改、以适配nuxt工程、如有侵权请联系修改

组件地址
https://www.npmjs.com/package/vue-grid-layout-nuxt

使用方法与 vue-grid-layout一致，效果如下所示

微信截图_20210914143324.png

安装

npm install vue-grid-layout-nuxt -S

使用步骤

<template>
  <div class="hello" v-if="render">
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :responsive="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        class="grid-item"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        @resized="resizeEvent"
      >
        <div>{{ item.i }}</div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayoutNuxt from 'vue-grid-layout-nuxt'
export default {
  name: 'HelloWorld',
  components: {
    GridLayout: VueGridLayoutNuxt.GridLayout,
    GridItem: VueGridLayoutNuxt.GridItem,
  },
  data() {
    return {
      componentName: '',
      render: false,
      layout: [
        { x: 0, y: 0, w: 6, h: 6, i: '0' },
        { x: 6, y: 0, w: 6, h: 6, i: '1' },
        { x: 0, y: 6, w: 6, h: 6, i: '2' },
        { x: 6, y: 6, w: 6, h: 6, i: '3' },
      ],
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.render = true
    // 小组件注册
  },
  methods: {
    resizeEvent(i, newH, newW, newHPx, newWPx) {
      console.log('大小正在改变', i, newH, newW, newHPx, newWPx)
    },
    handleResize() {},
    // 防止部件拖拽事件跟滚动条拖动冲突
    addBarListener() {},
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.grid-item {
  border: 1px solid red;
}
</style>

原版grid-layout加载出来后，刷新页面就会报错、本插件修改后测试无报错内容、修改效果真实有效；