ant design vue 树形控件_Vue 面向对象 - 实战 - 内容管理系统（三）

接着之前的，我们已经通过shadow root 样式封装，让 ant-design-vue 后台管理框架中，显示了 ejs 配置的 bootstrap 组件：

那么接下来，就是通过表单，动态地修改这个 ejs 中的值，并实时预览了

其实这个表单操作的组件以及相关逻辑非常简单：

TemplateForm.vue:

TemplateFormService.ts:

直接使用就行了

只要保证和显示用的 TemplateDisplay 组件传入的是同一个 TemplateService，那么就可以通过其实时改变 ejs 组件的数据了：

最后我们来看看效果：

修改以下~

操作圆满成功~

https://codesandbox.io/s/intelligent-grass-yu16l?file=/src/components/TemplateForm.vue​codesandbox.io

那么接下来，就要开始拖拽布局的实现了，等基本功能实现，各位就能看到 SOA 大显神威了