big-screen-frame

Welcome to big-screen-frame 👋

Introduce 介绍

基于vue3.2的大屏可视化开发组件 BigScreenFrame；主要是为了大屏的分辨率不同做适配，有三种适配模式 (scale 满屏适配 / origin 原尺寸适配 / prop 等比例适配)

Installation 安装

• using npm

npm install big-screen-frame --save

• using yarn

yarn add big-screen-frame --save

Quickstart 起步

html

<template>
  <big-screen-frame
    :width="3840" 
    :height="2160" 
    mode="scale"
    bgColor='#000'
  >
  </big-screen-frame>
</template>

• 全局使用 main.js

  import { createApp } from 'vue'
  import App from './App.vue'
  import BigScreenFrame from 'big-screen-frame';
  const app = createApp(App)
  app.use(BigScreenFrame);
  app.mount('#app');

• 动态化配置

  // 设计稿的宽度，默认为1920
  width: 1920,
  // 设计稿的高度，默认为1080
  height: 1080,
  // 适配模式，默认值'scale'
  // 'scale': 满屏适配
  // 'origin': 原尺寸适配
  // 'prop': 等比例适配
  mode: 'scale',
  // 背景色，默认为空
  bgColor: '',
  // 背景图，默认为空
  bgImg:''