切换tab codemirror refresh无效

非互相复制粘贴的标题党！！！

先贴一下codemirror官方文档里关于refresh的解释

在resize或者unhide的时候需要用refresh来确保codemirror仍然按预期表现

我是用的element的el-tabs，这里切换tab显然是在unhide一个tab。
但是为什么我在onTabClick方法里refresh仍然无效呢，原因是，要等视图先更新。
refresh特意强调了是unhide。因此加个setTimeout或者await nextTick都可。
下面贴出代码：

<el-tabs v-model="activeName" @tab-click="onTabClick">
  <el-tab-pane label="创建任务" name="create-mission">
    <base-doc v-bind="createMissionConfig" />
  </el-tab-pane>
  <el-tab-pane label="上传题目" name="create-hits">
    <base-doc v-bind="createHitsConfig" />
  </el-tab-pane>
  <el-tab-pane label="拉取标注数据" name="get-labeled">
    <base-doc v-bind="getLabeledConfig" />
  </el-tab-pane>
</el-tabs>

async onTabClick(ref) {
 await this.$nextTick();
  ref.$children[0].editor.refresh();
}

封装的BaseDoc组件内

<textarea :ref="docName"></textarea>

mounted() {
  this.editor = CodeMirror.fromTextArea(this.$refs[this.docName], {
    mode: 'text/x-python',
    // theme: 'ambiance',
    readOnly: true,
    lineWrapping: 'wrap',
  });

  this.editor.setValue(this.script);
  this.editor.setSize('100%', 'auto');
},

最后补充下，高度自适应用的是setSize，不用直接改css

作者也是翻阅了很多文章才解决的，深受复制粘贴的荼毒，所以特地写了这篇文章，避免大家走弯路。如果解决了你的问题，请点赞收藏让更多人搜到，这样能对更多人有帮助。