可视化大屏vue2,v-scale-screen使用记录
需要确定父组件高度,防止两个height:100%叠加第二个无效的情况,screen-wrapper类的style不生效,用v-deep修改,宽高用设计稿的宽高需要微调。
·
需要确定父组件高度,防止两个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
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)