v-scale-screen v2.2.0

v-scale-screen

English | 简体中文

Large-screen adaptive container component, which can be used for large-screen project development, realizes screen adaptation, and can be adaptive according to width, height, and width and height ratios, and full-screen adaptation

Note: Please use version 1.x for vue 2, and version 2.0 or above for vue 3

Demo

Install

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

Note: Please use version 1.x for vue 2, version 1.x for vue 2, version 1.x for vue 2, and important things to say three times

vue2

In vue2, we use plugin export, so we need Vue.use() to register

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

Note: Please set body style to overflow: hidden; when using

Vue3

We export as components in vue 3

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

API