vue.js - 分辨率降低时的 Vue-Grid-Layout 响应组件

Question

我有一个由 Vue-Grid-Layout 制成的仪表板，它包含许多其他组件，我使用了 2 种不同的网格布局，一种用于我的卡片，另一种用于我的小部件。我不希望我的卡片被拖动和替换到我的小部件应该在的地方，所以我将它们分成两个布局。这是我的 html 的样子；

<div class="row" v-if="isCardsActive">
        <grid-layout 
          :layout.sync="cardsLayout"
          :col-num="12"
          :row-height="25"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :vertical-compact="true"
          :use-css-transforms="true"
          :responsive="true"
        >
          <grid-item 
            v-for="(item, index) in cardsLayout" :key="index"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            drag-allow-from=".vue-draggable-handle"
            drag-ignore-from=".no-drag"
          >
            <component v-if="item.isActive" :is="item.c"></component>
          </grid-item>
        </grid-layout>
      </div>
      <!-- Widgets -->
      <div class="row" v-if="isWidgetsActive">
        <grid-layout 
          :layout.sync="layout"
          :col-num="12"
          :row-height="30"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :vertical-compact="true"
          :use-css-transforms="true"
          :responsive="true"
        >
          <grid-item 
            v-for="(item, index) in layout" :key="index"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            drag-allow-from=".vue-draggable-handle"
            drag-ignore-from=".no-drag"
          >
            <component v-if="item.isActive" :is="item.c"></component>
          </grid-item>
        </grid-layout>

我有两个布局数组，它们是cardsLayout和widgetsLayout，这是我的数据；

  data() {
    return {
      title: "Dashboard",
      items: [
        {
          text: "Dashboard",
          active: true,
        },
      ],
      isCardsActive: true,
      cardsLayout: [
        {"x":0,"y":0,"w":3,"h":4,"i":"0", "c": 'ManagedDevices', isActive: true}, 
        {"x":3,"y":0,"w":3,"h":4,"i":"1", "c": 'ActiveEndpoints', isActive: true},
        {"x":6,"y":0,"w":3,"h":4,"i":"2", "c": 'RoutingTraffic', isActive: true},  
        {"x":9,"y":0,"w":3,"h":4,"i":"3", "c": 'BridgingTraffic', isActive: true}, 
      ],
      isWidgetsActive: true,
      layout: [
        {"x":0,"y":0,"w":12,"h":13,"i":"0", "c": 'TrafficOverview', isActive: true},
        {"x":0,"y":0,"w":4,"h":10.7,"i":"1", "c": 'TopManagedDevices', isActive: true},
        {"x":4,"y":0,"w":4,"h":10.7,"i":"2", "c": 'WirelessChannels', isActive: true},
        {"x":8,"y":0,"w":4,"h":10.47,"i":"3", "c": 'DeviceAlarms', isActive: true},
      ],
      draggable: true,
      resizable: false,
      index: 0
    };
  },

我将我的组件放在这些数组中，还有另外两个函数可以根据用户选择检查组件是处于活动状态还是处于非活动状态，但我没有将它们放在我的问题中，因为它们与它无关。

我想要做的是，根据用户的选择显示和隐藏这些组件，并为自己制作一个小部件逻辑。用户将允许选择和取消选择要在仪表板中表示的卡片和组件。但事情就是这样；

假设用户不想在仪表板顶部看到任何卡片，所以他取消了所有卡片，grid-layoutfor 卡片仍然存在，因为我只更改了数组属性的元素，即isActive.

我还创建了另一个函数来检查卡片数组isActive属性的所有元素是否为假，它会变为isCardsActive假。正如您在我的 HTML 中看到的那样，我仅在为isCardsActivetrue 时才显示卡片网格布局。这样，当仪表板中没有卡片时，我可以删除卡片网格布局。

但是我需要一个类似的widgetsLayout逻辑。widgetsLayout 数组中有 4 个组件，用户也可以在仪表板中隐藏和显示它们。但问题是，如果用户取消选择一个组件或小部件，它不会显示在仪表板上，但它的网格布局仍然存在，并在仪表板上占据了一些巨大的空间。我不能v-if用于小部件布局，因为它们都在同一个网格布局中。

我的问题的另一部分是，当分辨率降低时，在较小的设备、平板电脑和手机中，响应能力有点问题。我没有col-md-6在组件的 HTML 本身中声明任何东西，因为我在布局数组中声明了高度、宽度、坐标、列等。

例如，当页面已满时，4 张卡片并排出现在一行中。所以其中一个基本上需要12个中的3个。但是当分辨率降低时，它们会出现在布局中的愚蠢位置。

我想要做的是，如果设备更小，比如平板电脑或手机，卡片不应该出现在一行中，而是一个有col-md-12大小的列。所以我应该以更动态的方式定义它。

我知道这是一个很长的问题，但是如果有人一直在使用 Vue-Grid-Layout，我认为我的工作和我的问题如果得到正确回答应该可以帮助其他人。提前致谢。

标签： vue.jsgrid-layout