vue標籤頁tabs和codemirror一起使用
阿新 • • 發佈:2020-12-17
vue標籤頁tabs和codemirror一起使用時,codemirror 會變形
要注意tab切換時,codemirror必須重新整理配置
<el-tabs v-model="configupload.upload_active" type="card" @tab-click="handleChangeImport"> <el-tab-pane label="上傳匯入" name="upload"> <el-upload class="upload-k8sconfig" ref="upload" action="string" :before-upload="beforeConfigUpload" :http-request="UploadConfig" > <el-button size="small" type="primary">點選上傳</el-button> <div slot="tip" class="el-upload__tip">匯入/etc/kubernetes/admin.conf檔案</div> </el-upload> </el-tab-pane> <el-tab-pane label="輸入匯入" name="input"> <codemirror ref="import_codemirror" v-model="configupload.config" :options="cmOptions" class="sourcecode"/> </el-tab-pane> </el-tabs> ...... <script> ... handleChangeImport(tab){ if (tab.name === 'input') { this.$nextTick(() => { this.$refs.import_codemirror.codemirror.refresh(); }) } }, ... </script>