vue2 大屏适配npm install v-scale-screen@1.0.0 --save

最新推荐文章于 2024-08-09 07:04:17 发布

emoji111111

最新推荐文章于 2024-08-09 07:04:17 发布

阅读量503

点赞数 2

文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/emoji111111/article/details/136880932

版权

本文介绍了如何在Vue2和Vue3项目中安装并使用VScaleScreen插件，包括npm安装指令、在main.js中的引入以及模板和样式设置的详细步骤。

摘要由CSDN通过智能技术生成

注意：vue2和vue3安装版本不同

1、vue2安装指令

npm install v-scale-screen@1.0.0 --save

2、引入（main.js）

import VScaleScreen from "v-scale-screen";

Vue.use(VScaleScreen);

3、使用

<template>
  <div>
    <v-scale-screen
      class="page-container"
      width="1920"
      height="1080"
      :full-screen="false"
    >
    //width和height的值根据实际设计图的比例设置即可
    //页面内容
    </v-scale-screen>
  </div>
</template>    


<style scoped>
  .page-container {
      width: 100vw;
      height: 100vh;
      //以下三个值根据自己设计图调整即可
      background: url(../../assets/bg.png) no-repeat !important;
      background-size: cover !important;
      background-color: #030d1e !important;
  }
</style>