Vue large screen adaptive ultimate solution

v-scale-screen

v-scale-screenIt is a large-screen adaptive component. In actual business, we often use charts for data statistics, data display, data visualization and other intuitive ways to achieve clear data viewing. However, in the process of large-screen development, often due to adaptation I am troubled by different screens, let's use it v-scale-screento solve this problem

Effect

Don't talk nonsense, let's go to the picture first

It can be seen that we have achieved self-adaptation through proportional scaling, and we have also released vuethe component v-scale-screen for this purpose

components

v-scale-screen uses the css attribute transform to achieve the zoom effect, and performs proportional calculations to achieve the effect of proportional scaling. At the same time, we also support adaptive solutions such as full screen, width ratio, height ratio, etc.

use

1. install dependencies

Note: Please use [email protected] version for vue2, please use [email protected] version for vue3

npm install v-scale-screen -save
# or
yarn add v-scale-screen

2. Introduced in main.js

Use plug-in import in vue2, vue3 import with component

• view2

// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

• view 3

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

3. used in the component

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

Link

• v-scale-screen
• v-form-antd