Vue大屏自适应终极解决方案

v-scale-screen

v-scale-screen是一个大屏自适应组件,在实际业务中,我们常用图表来做数据统计,数据展示,数据可视化等比较直观的方式来达到一目了然的数据查看,但在大屏开发过程中,常会因为适配不同屏幕而感到困扰,下面我们使用v-scale-screen来解决一下这个难题

效果

废话不多说,先上图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqmZ3e5O-1665537575071)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fa0c55786f14f43a47a5d1cc821baed~tplv-k3u1fbpfcp-watermark.image?)]

可以看到,我们通过等比例缩放的方式,实现了自适应,同时我们也为此发布了vue组件v-scale-screen

组件

v-scale-screen使用css属性transform实现缩放效果,进行等比例计算,达到等比例缩放的效果,同时我们也支持铺满全屏,宽度等比,高度等比,等自适应方案

使用

  1. 安装依赖

注:vue2请使用v-scale-screen@1.0.0版本,vue3请使用v-scale-screen@2.0.0版本

npm install v-scale-screen -save
# or
yarn add v-scale-screen
  1. 在main.js中引入

vue2中使用插件导入,vue3以组件导入

  • vue2
// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
  • vue3
<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>
<script>
import VScaleScreen from 'v-scale-screen'
export default {
  components:{
    VScaleScreen
  }
}
</script>

  1. 在组件中使用
<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>

链接

  • 11
    点赞
  • 99
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
回答: 在Vue大屏设计中实现自适应的方法有多种。一种方法是通过配置文件设置大屏设计的尺寸,如将宽度设置为1920像素,高度设置为1080像素,并设置缩放比例为20。\[1\]另一种方法是在组件中使用样式来实现自适应。可以使用flex布局来实现垂直居中,并设置各个组件的宽度比例,如左侧组件宽度为410/96rem,中间组件宽度为1060/96rem,右侧组件宽度为450/96rem。\[2\]还可以使用ScaleBox组件来实现自适应,通过设置最小宽度为1200像素,并在ScaleBox组件内部包裹需要自适应的内容,如图片。\[3\]这些方法都可以根据不同的需求来实现Vue大屏自适应效果。 #### 引用[.reference_title] - *1* *2* [Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)](https://blog.csdn.net/u011097323/article/details/105288458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue大屏自适应缩放解决方案 = 使用transform:scale](https://blog.csdn.net/weixin_47663795/article/details/127615424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值