大屏自适应容器组件 v-scale-screen

news2024/9/26 1:18:54

在vue中，v-scale-screen可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应。

仓库地址：github
国内地址：gitee

一、安装

npm install v-scale-screen@1.0.0

注意：vue2使用1.0.0版本，vue3使用2.0.0以上版本

二、使用

（1）在vue2中使用插件方式导出，用Vue.use()进行注册

main.js中：

import Vue from "vue";
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

vue页面中：

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

使用时将 body样式设置为overflow: hidden

例如：在home.vue中：

<template>
  <v-scale-screen width="1920" height="1080" class="scale-wrap">
    <div class="bg">
      <div class="host-body">
        <!-- 头部 e-->
        <!-- 内容  s-->
        <router-view></router-view>
      </div>
    </div>
  </v-scale-screen>
</template>

（2）在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>