您现在的位置是：首页 > 网站制作 > vue.js心得vue.js心得

v-scale-screen大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题）

蒙xs2023-08-22【vue.js心得】人已围观

简介大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题）

vue2.6 版本

npm install v-scale-screen
yarn add v-scale-screen

// main.js
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'

Vue.use(VScaleScreen)

Vue3 or Vue2.7 版本

// body 默认样式 overflow: hidden; 我们在 vue3 中以组件方式导出

<template>
<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>
</template>

<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'

export default defineComponent({
name: 'Demo',
components: {
VScaleScreen
}
})
</script>

注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden;

API

属性	说明	类型	默认值
width	大屏宽度	`Number` or `String`	1920
height	大屏高度	`Number` or `String`	1080
autoScale	自适应配置，配置为 boolean 类型时，为启动或者关闭自适应，配置为对象时，若 x 为 true，x 轴产生边距，y 为 true 时，y 轴产生边距，启用 fullScreen 时此配置失效	Boolean or {x:boolean,y:boolean}	true
delay	窗口变化防抖延迟时间	Number	500
fullScreen	全屏自适应，启用此配置项时会存在拉伸效果，同时 autoScale 失效，非必要情况下不建议开启	Boolean	false
boxStyle	修改容器样式，如居中展示时侧边背景色，符合 Vue 双向绑定 style 标准格式	Object	null
wrapperStyle	修改自适应区域样式，符合 Vue 双向绑定 style 标准格式	Object	null
bodyOverflowHidden	启用后body的样式会自动设置为 `overflow: hidden`	Boolean	true