Vue中CodeMirror組件設置高度自適應

寫在前面

由於項目中需要使用代碼編輯器插件，於是找到了CodeMirror，這個插件功能十分強大，官網地址：https://codemirror.net/

但是，當把插件集成到項目時，發現編輯器顯示高度是默認的300px，這個高度顯然是不友好的，所以需要將高度改為自適應。

查看官方文檔說是將height設置為auto即可，但是加上知乎發現這個樣式根本不起作用。官網地址如下：https://codemirror.net/2/demo/resize.html

 解決方法

在需要顯示的地方，外層再套上一層div，給元素設置高度，如下所示：

 然后再在此Vue頁面中設置樣式，設置樣式時，注意Style要去除scoped，具體設置高度自適應樣式，可參考如下：

<style lang="scss">
  #sqlCode {
    .CodeMirror {
      overscroll-y: scroll !important;
      height: auto !important;
    }
  }
</style>