可拖拽调整大小，嵌套组件vue-draggable-resizable

官网案例图：

我自己需要的需求图：

其中实现的功能有：

• 父元素控制组件
• 父组件和子组件都可拖动和调整大小
• 其中子组件限制在父组件中移动和调整大小
• 父组件具有宽高比和minHeight，minWidth
• 冲突检测
• 元素对齐辅助线

其中我用的组件是二次开发后的，链接在下面

GitHub - gorkys/vue-draggable-resizable-gorkys: Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线

其中遇到一个问题就是 ：

当父组件设置为:parent="true"后，拖动父组件只在其中高度的范围内晃动

解决思路：设置高度为100%；相对定位，因为他死文档流的形式，所有一定要设置高度和宽度；

父级css样式：

 .canvas {
      height: calc(100% - 60px);
      border: 1px solid gray;
      position: relative;
      margin: 5px 10px 10px 10px;
      .item-canvas {
        border:3px solid #b5b5b5;
      }
      .title {
        top: 50%;
        left: 50%;
        color: #000;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        transform: translate(-50%,-50%);
      }

      .areaContainer {
        width: 100%;
        height: 100%;
      }
}

其中子组件在父组件中拖拽也是一样，在父组件中晃动

解决思路：
1、设置:ref="`store-${store.id}`"，在激活方法中@activated设置其中的checkParentSize
2、在子组件的外边添加div设置其中的宽高为100%
3、设置：@activated="() => onStoreActivated(store)"
代码如下：在子组件中:

 onStoreActivated(store) {
      console.log('onStoreActivated',this.$refs[`store-${store.id}`]);
      if (this.$refs[`store-${store.id}`]) {
        this.$refs[`store-${store.id}`][0].checkParentSize();
        console.log('checkParentSize');
      }
      this.dbFormStore = store;
      console.log(this.dbFormStore)
    },

其他函数说明：

@contextmenu.prevent="onCanvasActiveParentContextmenu"

采用的是鼠标右键快捷菜单方法；

用到的插件是这个：GitHub - GitHub-Laziji/menujs: Vue2 原生实现右键菜单组件, 零依赖

其中拖拽组件中的方法和prop属性在上面链接中都有；