说明

基于element-plus。

动态页签

步骤1：初始化bindEditors

const editorsInstance = new ThinkEditorInstance('实例1') //instanceId='实例1' 管理多个ThinkEditor对应Tabs多页签
const bindEditors = ref(editorsInstance.editors)

步骤2：使用v-for=”(item, index) in this.bindEditors

<el-tab-pane
    style="width: 100%; height: 900px"
    :label="item.showName"
    :name="item.docName"
    :key="item.docName"
    v-for="item in bindEditors">
    <component :is="ThinkEditorView" :thinkEditor="item" />
    </el-tab-pane>

步骤3：监听ThinkEditorInstance的instanceChange事件

editorsInstance.addEventListener(E_EVENT_KEY.instanceChange, OnInstanceChange)

步骤4：触发element-plus tabs组件及时重绘

const OnInstanceChange = (evt: Event) => {
  //触发vue3 element-plus tabs组件及时重绘
  triggerRef(bindEditors)
}

动态页签名

• 基于动态页签适配的基础上，做如下修改

监听ThinkEditorInstance转发ThinkEditor的docModified事件，或直接监听ThinkEditor的docModified事件

  editorsInstance.addEventListener(E_EVENT_KEY.docModified, OnDocModified);
或
  thinkEditor.addEventListener(E_EVENT_KEY.docModified, this.OnDocModified);

`

OnDocModified中修改tab页签名

• 重点：需额外触发UI动态更新

const OnDocModified = (evt: Event) => {
  let e = evt as ThinkEditorEvent
  let thinkEditor = e.data.editor!
  thinkEditor.showName = thinkEditor.docName + '*'
  editorsInstance.CreateInstanceChangeEvent() //or this.OnInstanceChange();
}