从零搭建低代码平台（五）实现预览区组件的渲染功能

目录

大体介绍

具体思路

创建一个组件来实现画布中组件的渲染

在主文件中引入我们创建的组件

引入网格线，使预览区更好看

预期结果

---

大体介绍

在上一篇文章中，我们实现了组件区的拖拽功能。所以，在这篇文章中，我们要实现在组件区将组件拖拽到预览区，鼠标松开之后，组件可以在预览区进行相应的渲染，即可以让组件在预览区可以展现出来。

具体思路

我们可以在画布中对data中的数据进行遍历，获取data中数据，再创建一个组件来对接收的数据进行在画布中的渲染，当data中的数据发生变化的时候，会重新渲染，这样就完成了我们想要的预览区的组件渲染，因为在上一篇博客中，我们将想要的组件信息存入到data中，data中的数据更新，导致画布中的组件进行重新渲染，从而就实现了添加组件的操作。

创建一个组件来实现画布中组件的渲染

新建一个editor-block.jsx 文件：

// 画布中组件的渲染
import {computed, defineComponent, inject, onMounted, onUpdated, ref} from "vue";

export default defineComponent({
    props: {
        data: {type: Object},
        block: {type: Object},
    },
    setup(props) {

        const blockStyles = computed(() => ({
            top: `${props.block.top}px`,
            left: `${props.block.left}px`,
            zIndex: `${props.block.zIndex}`,
        }));

        const config = inject('config');
        // console.log(config)


        const blockRef = ref(null);

        // 从菜单栏到内容画布实现的第一次渲染
        onMounted(() => {
            let {offsetWidth, offsetHeight} = blockRef.value;
            if (props.block.alignCenter) {
                props.block.left = props.block.left - offsetWidth / 2;
                props.block.top = props.block.top - offsetHeight / 2;
                props.block.alignCenter = false;
            }
            // console.log(props.block)
            props.block.width = offsetWidth + 5;
            props.block.height = offsetHeight + 5;
            // console.log(props.block.key)

            // console.log(blockRef.value.style.width)
            // console.log(blockRef.value.children[0].innerHTML)
        })


        return () => {
            // 通过block的key属性直接获取对应的组件
            const component = config.componentMap[props.block.key];

            // 获取render函数
            const RenderComponent = component.render();
            return <div class="editor-block" style={blockStyles.value} ref={blockRef}>
                {RenderComponent}
            </div>
        }
    }
})

在当前组件中，我们接收一个block即当前拖拽的组件和data（JSON）的数据，通过config中的对应map列表来提取组件的render（）函数，最后将取到的组件进行返回，同时可以添加我们想要的样式。这样之后我们就可以在预览区看到我们所渲染的组件了。

在主文件中引入我们创建的组件

在editor.jsx文件中

 {
                            (data.value.blocks.map((block, index) => (
                                <EditorBlock
                                    block={block}
                                    data={data}
                                ></EditorBlock>
                            )))
                        }

引入网格线，使预览区更好看

在editor.jsx中

import Grid from "../utils/Grid" 
{/*网格线*/}
                        <Grid/>

新建Grid.vue：

<template>
    <svg
        class="grid"
        width="100%"
        height="100%"
        xmlns="http://www.w3.org/2000/svg"
    >
        <defs>
            <pattern
                id="smallGrid"
                width="7.236328125"
                height="7.236328125"
                patternUnits="userSpaceOnUse"
            >
                <path 
                    d="M 7.236328125 0 L 0 0 0 7.236328125" 
                    fill="none" 
                    stroke="rgba(207, 207, 207, 0.3)" 
                    stroke-width="1"
                >
                </path>
            </pattern>
            <pattern
                id="grid"
                width="36.181640625"
                height="36.181640625"
                patternUnits="userSpaceOnUse"
            >
                <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect>
                <path 
                    d="M 36.181640625 0 L 0 0 0 36.181640625" 
                    fill="none" 
                    stroke="rgba(186, 186, 186, 0.5)" 
                    stroke-width="1"
                >
                </path>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)"></rect>
    </svg>
</template>

<style lang="scss" scoped>
.grid {
    position: absolute;
    top: 0;
    left: 0;
}
</style>

预期结果

这样我们就完成了组件在预览区的渲染的过程，在下一篇文章中，我们要说明如何通过鼠标点击来实现组件的聚焦功能（获取焦点）。