v-screen-adaptation

可视化大屏自适应组件

支持vue3.3+版本

• [x] 支持自定义宽高
• [x] 默认自动进行宽高比计算,支持手动传参,开启手动缩放比例调整
• [ ] 后续的功能需求...

安装

npm install v-screen-adaptation
# or
yarn add v-screen-adaptation

使用

<template>
  <v-screen-adaptation  height="1080" mode="auto" >
    <div>
      <v-item></v-item>
      <v-card></v-card>
      <v-chart></v-chart>
      <v-img></v-img>
      <v-map></v-map>
      ...
    </div>
  </v-screen-adaptation>
</template>
<script setup>
  import 'v-screen-adaptation/dist/v-screen-adaptation.css'
  import VScreenAdaptation from 'v-screen-adaptation'
</script>

参数	类型	默认值	含义
width	number string	undefined	大屏宽度,如果不确定可以不传,不传默认获取屏幕当前宽度作为基本宽度
height	number string	1080	大屏高度
mode	auto freedom	auto	auto 自动根据宽度和高度计算当前屏幕缩放比例 freedom 根据缩放的比例反推当前屏幕的宽高
scale	number	undefined	当 mode的值为freedom时有效,传入需要缩放的比例,自动变更屏幕宽高.