1.0.3 • Published 1 year ago

v-scale-screen v1.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

v-scale-screen

大屏自适应容器组件,可用于大屏项目开发,实现屏幕自适应,可根据宽度自适应,高度自适应,和宽高等比例自适应,全屏自适应(会存在拉伸问题)

注:vue2请使用1.x版本,vue3请使用2.0以上以上版本

  • 版本变更

    已修复 vue2.7 不兼容功能,现阶段 v-scale-screen@1.0.2 支持vue2.6.x和vue2.7.x所有版本,vue3 请使用 v-scale-screen@2.0.12 版本

  • 仓库地址:github

  • 国内地址:gitee

图例

图例

安装

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

注:vue2请使用1.x版本、vue2请使用1.x版本、vue2请使用1.x版本,重要的事情说三遍

vue2

在vue2中我们使用插件方式导出,故而需要 Vue.use() 进行注册

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

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

Vue3

我们在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>

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

API

属性说明类型默认值
width大屏宽度Number or String1920
height大屏高度Number or String1080
autoScale自适应配置,配置为boolean类型时,为启动或者关闭自适应,配置为对象时,若x为true,x轴产生边距,y为true时,y轴产生边距,启用fullScreen时此配置失效Boolean or {x:boolean,y:boolean}true
delay窗口变化防抖延迟时间Number500
fullScreen全屏自适应,启用此配置项时会存在拉伸效果,同时autoScale失效,非必要情况下不建议开启Booleanfalse
boxStyle修改容器样式,如居中展示时侧边背景色,符合Vue双向绑定style标准格式Objectnull
wrapperStyle修改自适应区域样式,符合Vue双向绑定style标准格式Objectnull
1.0.3

1 year ago

2.2.0

2 years ago

2.1.0

2 years ago

1.0.2

3 years ago

1.0.1

3 years ago

0.1.2

3 years ago

2.0.11

3 years ago

2.0.12

3 years ago

0.1.3

3 years ago

1.0.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago