超简 Vue3+Ts 可视化拖拽设计器DreamDesign

今天给大家分享一款 vue3.x 在线表单可视化布局设计模板DreamDesign。

dream-design 基于 vue3+vite+ts 的可视化页面设计器，可在线设计页面表单等，支持引入多种组件库和自定义组件。

除了基本的输入、开关、选择器、单选等，还封装了对象编辑器。

非嵌套组件只需遵守如下格式

    {
    	tag: "el-button",
    	title: "el按钮",
            ...
        childrens: []
    }

即可渲染出如下dom

<el-button></el-button>

嵌套组件只需遵守如下格式

    {
    	tag: "el-row",
    	title: "el行容器",
            ...
        childrens: [    
        	{
    			tag: "el-col",
    			title: "el列容器",
            	...
        		childrens: []
    		}]
    }

即可渲染出如下dom

<el-row>
    <el-col></el-col>
</el-row>

支持多种组件库并自定义

如果大家对vue3可视化模板感兴趣，可以去看下。

// 克隆项目
git clone https://github.com/yaolunmao/dream-design
// 安装依赖
npm i
// 运行项目
npm run dev

OK，今天就分享到这里了。