1. 程式人生 > 實用技巧 >vue標籤頁tabs和codemirror一起使用

vue標籤頁tabs和codemirror一起使用

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>