28 lines
937 B
Markdown
28 lines
937 B
Markdown
# 文章编辑与预览
|
||
|
||
编辑与预览共用同一个 `Article` 对象，用标签在两种视图之间切换。
|
||
|
||
## 组合演示
|
||
|
||
:::preview 编辑与预览联动 || 切换正文类型时两个标签页同时切换渲染分支
|
||
|
||
demo-preview=../demos/scenarios/article.vue
|
||
|
||
:::
|
||
|
||
## 这个场景覆盖了什么
|
||
|
||
- **正文类型切换**：纯文本、Markdown、富文本三种形态共用一份数据
|
||
- **数据联动**：`ArticleEditor` 抛出的更新直接喂给 `ArticleView`
|
||
- **字段保留**：`title` 等业务字段由外层维护，编辑器不会丢字段
|
||
- **提交语义**：`submit()` 等待未完成的媒体上传后再返回最终数据
|
||
|
||
## 为什么用标签而不是分栏
|
||
|
||
PC 端可以左右并排，移动端宽度不够。用标签切换既保证了对比的便利，又不牺牲编辑区的可用宽度。
|
||
|
||
## 相关组件
|
||
|
||
- [ArticleEditor](/components/article-editor)
|
||
- [ArticleView](/components/article-view)
|