需要确定父组件高度,防止两个height:100%叠加第二个无效的情况,screen-wrapper类的style不生效,用v-deep修改,宽高用设计稿的宽高需要微调。
<template>
<div class="app-container">
<v-scale-screen width="1680" height="1000" :full-screen="false">
</v-scale-screen>
</div>
</template>
"v-scale-screen": "^1.0.0",
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
<style lang="scss" scoped>
.app-container {
width: 100%;
height: calc(100vh - 86px);
background: #fafafa;
display: flex;
justify-content: center;
flex-direction: column;
::v-deep .screen-box {
background: #fafafa;
}
::v-deep .screen-wrapper {
margin: 0 !important;
// height: auto !important;
}
::v-deep .screen-box {
// width: 100%;
// height: 100%;
}
}
</style>
https://github.com/zhangqh22/v-scale-screen/blob/v3.0/README.md