• Using npm:

  npm i qhw-dragable

• 新建配置文件 editor-config.jsx 存放组件数据

import { defineAsyncComponent, defineComponent, markRaw, reactive, ref } from 'vue';
function createEditorConfig() {
  const componentList = []
  const componentMap = {}
  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component)
      componentMap[component.key] = component
    }
  }
}
export let registerConfig = createEditorConfig();
registerConfig.register({
  label: '文本',
  height: 80,
  key: 'hwText',
  render: markRaw(defineAsyncComponent(() => import('@/templates/hw-text'))),
  component: markRaw(defineAsyncComponent(() => import('../components/htext')))
})
registerConfig.register({
  label: '按钮',
  height: 100,
  key: 'hwButton',
  render: markRaw(defineAsyncComponent(() => import('@/templates/hw-button'))),
  component: markRaw(defineAsyncComponent(() => import('@/components/hbutton')))
})
registerConfig.register({
  label: '输入框',
  height: 60,
  key: 'hwInput',
  render: markRaw(defineAsyncComponent(() => import('@/templates/hw-input'))),
  component: markRaw(defineAsyncComponent(() => import('@/components/hinput')))
})

• 新建文件 data.json

{
  "left": {
    "width": 270
  },
  "container": {
    "width": 350,
    "height": 650
  },
  "right": {
    "width": 270
  },
  "blocks": []
}

• 根据 render、component 属性 创建对应的组件

render：负责左面组件
component：负责中间组件

• 在引用组件的文件 讲组件的配置提供出去

provide('editor-config', config)

• 获取 data.json 数据

赋值组件qhw-dragable的v-model

• 效果图