GitHub https://github.com/Alfred-Skyblue/v-scale-screen.git
vue2
npm install v-scale-screen
# or
yarn add v-scale-screen
// main.js
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
<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>
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>
<scale-screen
width="1920"
height="1080"
:delay="500"
:fullScreen="false"
:boxStyle="{
background: '#03050C',
overflow: isScale ? 'hidden' : 'auto',
}"
:wrapperStyle="wrapperStyle"
:autoScale="isScale"
>
<div class="content_wrap">
<Headers />
<RouterView />
<MessageContent />
</div>
</scale-screen>