低代码之构建框架1

1：项目初始化

• vue create vue-lesson 初始化项目文件
• npm i 初始化 package.json
• package.json 配置运行脚本

  {"name": "vue-lesson","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"core-js": "^3.8.3","element-plus": "^2.3.6","vue": "^3.2.13"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-service": "~5.0.0","sass": "^1.32.7","sass-loader": "^12.0.0"}
  }
  

• 安装依赖

  npm i element-plus
  

2：src / data.json 数据 （ 容器大小与渲染的表单数据 ）

{"container":{"width":550,"height":550},"blocks":[{"top":100,"left":100,"zIndex":1,"key":"text"},{"top":200,"left":200,"zIndex":1,"key":"button"},{"top":300,"left":300,"zIndex":1,"key":"input"}]
}

3：App.vue ( 导入editor组件传递data.json之中的数据与 向下提供组件配置数据config )

<template><div class="app"><Editor v-model="state"></Editor></div>
</template><script>
import { provide, ref } from "vue";
import data from "./data.json";
import Editor from "./packages/editor"
import { registerConfig as config } from "./utils/editor.config";
export default {components:{Editor},setup() {const state = ref(data);provide('config',config) // 把组件配置传入return {state,};},
};
</script>
<style lang="scss">
html,body,#app{margin: 0;padding: 0;width: 100%;height: 100%;
}
.app {background: #fff;width: 100%;height: 100%;
}
</style>

4：src / packages / editor.jsx 框架区域样式与组件引入

import { computed, defineComponent ,inject} from "vue";
import "./editor.scss"
import EditorBlock from "./editor-block";
export default defineComponent({props:{modelValue:{type:Object},},setup(props){// console.log('props',props.modelValue);const data = computed({get () {return props.modelValue}})const contentStyle = computed(()=>({width: data.value.container.width + 'px',height: data.value.container.height + 'px'}))const config = inject('config')return () => <div class='editor'><div class='editor-left'>{/** 根据config的注册列表 渲染出左侧的物料区域 */}{ config.componetsList.map(component=>(<div class="editor-left-item"><span class="editor-left-item-label">{ component.label }</span><div>{ component.preview() }</div></div>))}</div><div className="editor-center"><div class="editor-top">top</div><div class="editor-content">{/* 负责尝试滚动条 */}<div class="editor-content-canvas">{/* 产生内容区域 */}<div class="editor-content-canvas_content" style={contentStyle.value}>{(data.value.blocks.map(block=>(<EditorBlock block={block}></EditorBlock>)))}</div></div></div></div><div class="editor-right">right</div></div>}
})

5：editor.scss

.editor {width: 100%;height: 100%;overflow: hidden;display: flex;.editor-left ,.editor-right{width: 270px;background: yellow;height: 100%;}.editor-left {.editor-left-item {position: relative;width: 250px;margin: 20px auto;display: flex;justify-content: center;align-items: center;background: #ccc;padding: 20px;box-sizing: border-box;cursor: move;user-select: none; // 无法操作min-height: 100px;.editor-left-item-label {position: absolute;left: 0;top: 0;background: rgb(96, 205, 224);color: #fff;padding: 4px;}// 设置 item 项目不可点击等&::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #ccc;opacity: 0.2;}}}.editor-center {width: calc(100% - 270px - 270px - 20px);padding: 0 10px;background: orange;height: 100%;}.editor-top {height: 80px;background: pink;}.editor-content {height: calc(100% - 80px);background: orange;.editor-content-canvas {overflow: scroll;height: 100%;}.editor-content-canvas_content {position: relative;margin: 20px auto;// height: calc(100% - 40px);// width: 550px;// height: 550px;background: #ccc;}}
}
.editor-block {position: absolute;
}

6：src / packages / editor-block.jsx 子组件

import { computed, defineComponent,inject } from "vue";export default defineComponent({props:{block:{type:Object}},setup(props){const blockStyle = computed(()=>({top:`${props.block.top}px`,left: `${props.block.left}px`,zIndex:`${props.block.zIndex}`}))const config = inject('config') // 获取从app.vue 提供的组件配置return ()=> {// 通过block之中的key 获取config之中对应的组件const component = config.componetsMap[props.block.key];console.log('component',component);// 获取组件的渲染函数const componentRender = component.render();return <div class="editor-block" style={blockStyle.value}>{componentRender}</div>}}
})

7：src / utils / editor.config.jsx 编辑区域的配置文件

// 列表区可以显示所有的物料
// key对应的组件隐射关系import { ElButton,ElInput } from "element-plus"
function createEditorConfig(){const componetsList = []const componetsMap = {}return {componetsList,componetsMap,register:(component)=>{componetsList.push(component)componetsMap[component.key] = component}}
}export let registerConfig = createEditorConfig()
console.log('registerConfig',registerConfig);
// 文本
registerConfig.register({label:'文本',preview:()=> '预览文本',render:()=> '渲染文本',key:'text'
})
registerConfig.register({label:'按钮',preview:()=> <ElButton>预览按钮</ElButton>,render:()=> <ElButton>渲染按钮</ElButton>,key:'button'
})
registerConfig.register({label:'输入框',preview:()=> <ElInput placeholder='预览输入框'></ElInput>,render:()=> <ElInput placeholder='渲染输入框'></ElInput>,key:'input'
})// echarts等

8：main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'createApp(App).mount('#app')

效果