说明

基于element-ui。

动态页签

步骤1：初始化bindEditors

data() {
    return {
    editorsInstance: undefined,
    bindEditors: [],
    ...
    }
}


created() {
this.editorsInstance = new ThinkEditorInstance(this.instanceId);
this.bindEditors = this.editorsInstance.editors;
...
}

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

<el-tab-pane style="width: 100%; height: 100%" :label="item.showName" :name="item.docName" :key="item.docName" v-for="(item, index) in this.bindEditors">
    <ThinkEditorView :thinkEditor="item" @dispatchEditorViewEvent="OnEditorViewEvent" />
</el-tab-pane>

步骤3：监听ThinkEditorInstance的instanceChange事件

created() {
    ...
    this.editorsInstance.addEventListener(E_EVENT_KEY.instanceChange, this.OnInstanceChange);
    ...
}

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

 OnInstanceChange(e) {
      //触发vue2 element-ui tabs组件及时重绘
      this.bindEditors = [];
      this.bindEditors = this.editorsInstance.editors;
    }

动态页签名

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

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

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

`

OnDocModified中修改tab页签名

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

   OnDocModified(e) {
      let thinkEditor = e.data.editor;
      thinkEditor.showName = thinkEditor.docName + '*';
      this.editorsInstance.CreateInstanceChangeEvent(); //or this.OnInstanceChange();
    },