1、安装依赖

npm install v-scale-screen 或 yarn add v-scale-screen

2、vue 引入 vue2中使用插件导入,vue3以组件导入

  • vue2 中引入 
// main.js
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'

Vue.use(VScaleScreen)
<template>
  <v-scale-screen width="1920" height="1080">
    <div></div>
  </v-scale-screen>
</template>
  • vue3 中引入 
<template>
  <v-scale-screen width="1920" height="1080">
    <div></div>
  </v-scale-screen>
</template>

<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'

export default defineComponent({
  name: 'Demo',
  components: {
    VScaleScreen
  }
})
</script>

 v-scale-screen 默认等比例屏幕缩放,当视图不满足比例,上下或左右会有留白(黑框)。如果想要铺满全屏,且对视图拉伸无感,可以配置autoScale,或者将fullScreen设置为true

<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
   <div></div>
</v-scale-screen>

也可以自定义留白颜色

<template>
  <div>
    <v-scale-screen ref="scale-screen" width="1920" height="1080" :boxStyle="boxStyle">
      <div></div>
    </v-scale-screen>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
    VScaleScreen,
  },
  data() {
    return {
      boxStyle: {
        background: 'linear-gradient(to top ,#00257d, #042f55)'
      },
    }
  },

 问题:对element ui 等插件的一下弹出框会有比例失调的问题

v-scale-screen其原理是使用css属性transform实现缩放效果,进行等比例计算,达到等比例缩放的效果。

而我们也可以获取当前的缩放比例,进而对 elementui 组件的样式修改

//获取大屏缩放比例
const val = this.$refs['scale-screen'].$el.children[0].style.transform
this.scale = val
<el-dialog :visible.sync="true" style="{'transform':scale}">
</el-dialog>

Logo

前往低代码交流专区

更多推荐