非互相复制粘贴的标题党!!!
先贴一下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
作者也是翻阅了很多文章才解决的,深受复制粘贴的荼毒,所以特地写了这篇文章,避免大家走弯路。如果解决了你的问题,请点赞收藏让更多人搜到,这样能对更多人有帮助。