动态获取屏幕宽度问题

1,971 阅读1分钟

问题产生
弹框需要自适应高度

解决 - clientHeight

<template>
    <modal :style="{maxHeight: modalHeight, overflow: 'auto'}">
</template>

data(){
    return {
        modalHeight: document.body.clientHeight - 200 + 'px',
    }
} 

mounted() {
    window.onresize = () => {
      this.modalHeight = document.body.clientHeight - 200 + 'px'
    }
  },

解决2 - calc / vh

.vue-codemirror {
  height: calc(100vh - 300px)!important;
}
.CodeMirror {
  height: 100% !important;
}

注意: calc(100% - 300px) 可能会无效