vue动态设置vue-codemirror编辑器高度

你可以通过在组件中使用 `ref` 来获取 `vue-codemirror` 实例，然后通过设置实例的 `setSize` 方法来动态设置编辑器的高度。具体代码如下：

<template>
  <div>
    <codemirror ref="editor" :options="editorOptions" v-model="code"></codemirror>
  </div>
</template>

<script>
import Codemirror from 'vue-codemirror'

export default {
  components: {
    Codemirror
  },
  data() {
    return {
      code: '',
      editorOptions: {
        mode: 'text/html',
        lineNumbers: true
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setEditorHeight()
    })
    window.addEventListener('resize', this.setEditorHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setEditorHeight)
  },
  methods: {
    setEditorHeight() {
      const editor = this.$refs.editor.codemirror
      const windowHeight = window.innerHeight
      const editorTop = editor.getWrapperElement().getBoundingClientRect().top
      const newHeight = windowHeight - editorTop - 20 // 20px 是为了留出一些空间
      editor.setSize(null, newHeight)
    }
  }
}
</script>

上面的代码中，我们使用 `mounted` 钩子来确保组件已经挂载完毕后再设置编辑器的高度，并且在组件销毁前移除监听器。然后在 `setEditorHeight` 方法中，我们计算出编辑器距离窗口顶部的距离，然后使用窗口高度减去该距离以及一些预留空间来计算出新的编辑器高度，并调用 `editor.setSize` 方法来设置编辑器的尺寸。