vue 根据后端数据渲染文件模板，编辑并实时预览效果

Posted 2023-03-21

参考技术A 最近有个需求，用户要线上编辑模板文件，以前直接考虑用富文本编辑方式，用户想怎么编辑就怎么编辑，但这次需求后端提到输入的关键信息要入库，并且有select选项插入。整篇带样式的html由后端返回。
初步想法是分左右栏，左侧预览右侧form，最开始想收到后端的html后再插入document，但动态插入的dom无法做到数据响应，变换下思路，把需要动态显示的dom事先初始化dom中，等模板html渲染完成后再插入到对应位置。

和后端约定的数据格式，tempStr是html，动态插值用$表示，form是表单描述，用于渲染表单：

思路：

template.vue:

效果

暂时type只区分了select，可以加入radio、checkbox等表单形式。