创建影评

介绍

创建影评使用了 wangEditor 富文本编辑器，通过其提供的自定义工具栏，增加了添加影视/影人/角色信息卡功能。

目录结构

└─ src
   └─ pages
      └─ movie                            # 影视相关页面
         └─ list                          # 影视列表
            └─ detail                     # 影视详情
               └─ review                  # 影评
                  ├─ index.vue            # 影评列表
                  └─ components           # 影评组件
                     └─ ReviewModal.vue   # 创建/编辑影评

关键代码

<wang-editor class="wang-editor" ref="editor" v-model="form.content" />

实现 wang-editor 的 v-model 双向绑定

model: {
	prop: "value",
	event: "change",
},
mounted() {
	let editor = new E("#editor");

	editor.config.onchange = (html) => {
		this.$emit("change", html);
	};
}

截图

创建影评页面

搜索影视信息

插入影视信息卡