vue-grid-layout 从栅格外部添加其他组件

可以通过在栅格外部添加其他组件的方法来扩展`vue-grid-layout`组件。

首先，在父组件中添加需要在栅格外部显示的组件，例如：

<template>
  <div>
    <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
      <div v-for="item in items" :key="item.i" :data-grid="item">
        {{ item.i }}
      </div>
    </vue-grid-layout>
    <other-component />
  </div>
</template>

在上述代码中，`<other-component>`组件是需要在栅格外部显示的组件。

然后，需要通过CSS样式将`vue-grid-layout`组件的位置设置为相对定位（`position: relative;`），并将`<other-component>`组件的位置设置为绝对定位（`position: absolute;`）。例如：

.vue-grid-item {
  position: relative;
}

.other-component {
  position: absolute;
  top: 0;
  right: 0;
}

在上述代码中，将`<other-component>`组件的位置设置到了栅格组件的右上角。

最后，需要注意的是，在使用这种方法时，需要自行处理`<other-component>`组件的大小和位置，以确保不会与栅格组件重叠。