vite+vue2使用vue-grid-layout布局结合动态组件component

快来打我* 2024-03-24 17:27 27阅读 0赞

具体用法以及属性这里不介绍，请看官方文档

> [https://jbaysolutions.github.io/vue-grid-layout/zh/guide/properties.html][https_jbaysolutions.github.io_vue-grid-layout_zh_guide_properties.html]

值得注意的是vite+vue中使用动态组件的写法：  
使用 `import.meta.glob` 函数从文件系统导入多个模块：  
`const modules = import.meta.glob('../../components/*/index.vue');`  
通过 modules 对象的 key 值来访问相应的模块  
`component: modules['../../components/1-energy-monitor/index.vue‘],`

遇到的坑：最开始grid-layout组件绑定data中的值，动态组件一直不显示，后来我发现grid-layout会修改绑定的布局数组的值，但是修改的值中component动态组件字段会丢失，所以只能使用computed，然后set时合并一下布局数组的值，具体代码看下方

<template>
      <div class="home">
          <grid-layout
            :layout.sync="gridLayout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :responsive="true"
            :vertical-compact="true"
            :use-css-transforms="true">
            <grid-item
              v-for="item in gridLayout"
              :static="item.static"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i">
              <component :is="item.component"></component>
            </grid-item>
          </grid-layout>
      </div>
    </template>
    
    <script>
    const modules = import.meta.glob('../../components/*/index.vue');
    export default {
          
      data() {
          
        return {
          
          layout: [
            {
          
              x: 0,
              y: 0,
              w: 6,
              h: 8,
              i: '0',
              static: false,
              component: modules[`../../components/1-energy-monitor/index.vue`],
            },
            {
          
              x: 6,
              y: 0,
              w: 6,
              h: 8,
              i: '1',
              static: false,
              component:
                modules[`../../components/2-all-electricity-condition/index.vue`],
            },
          ],
        };
      },
      computed: {
          
        gridLayout: {
          
          get() {
          
            return this.layout;
          },
          set(v) {
          
            // 不能直接this.layout = v，需要合并，因为component属性会丢失
            this.layout.forEach((item, index) => {
          
              v[index] = {
          
                ...item,
                ...v[index],
              };
            });
            this.layout = v;
          },
        },
      },
    };
    </script>
    <style scoped lang="scss">
    .home {
          
      height: 100%;
    }
    </style>

[https_jbaysolutions.github.io_vue-grid-layout_zh_guide_properties.html]: https://jbaysolutions.github.io/vue-grid-layout/zh/guide/properties.html