1.0.2 • Published 2 years ago
qhw-dragable v1.0.2
- 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
- 效果图