vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue大屏适配和局部适配

Vue中大屏适配和局部适配的方案总结

作者:码农Davi

这篇文章主要为大家详细介绍了如何通过Vue.js的Mixins功能结合JavaScript实现页面内容的自适应缩放,以适应不同比例的屏幕,需要的小伙伴可以参考下

1.使用Mixins混入的方式解决自适应适配功能

通用的 css3:scale 缩放方案,通过 ref 指向页面,屏幕改变时缩放内容。项目的基准尺寸是 1920px*1080px,所以支持同比例屏幕 100%填充,如果非同比例则会自动计算比例居中填充,不足的部分则留白。

实现代码 screenmixin.js

// * 默认缩放值
const scale = {
  width: '1',
  height: '1',
};

// * 设计稿尺寸(px)
// const baseWidth = document.body.clientWidth;
// const baseHeight = document.body.clientHeight;
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例(默认1.77778)
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.calcRate();
    }, 200);
    window.addEventListener('resize', this.resize);
  },
  created() {},
  beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    calcRate() {
      const appRef = this.$refs['appRef'];
      if (!appRef) return;
      // 当前宽高比
      const currentRate = parseFloat(
        (window.innerWidth / window.innerHeight).toFixed(5),
      );
      if (appRef) {
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = (
            (window.innerHeight * baseProportion) /
            baseWidth
          ).toFixed(5);
          scale.height = (window.innerHeight / baseHeight).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        } else {
          // 表示更高
          scale.height = (
            window.innerWidth /
            baseProportion /
            baseHeight
          ).toFixed(5);
          scale.width = (window.innerWidth / baseWidth).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    resize() {
      clearTimeout(this.drawTiming);
      this.drawTiming = setTimeout(() => {
        this.calcRate();
      }, 200);
    },
  },
};

页面使用

<template>
  <div ref="appRef" class="wrapper">
    <div class="home-canvas">
   		内容
    </div>
  </div>
</template>

<script>
import screenMinxi from '@/utils/screenmixin';
export default {
  mixins: [screenMinxi],
};
</script>

<style lang="scss" scoped>
// 必需写宽高,如有单位转换在style中写
.wrapper{
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top; /* 缩放基点为左上角 */
  overflow: hidden;
}
</style>

2.局部适配方案 mixins.js

export const scaleMixin = {
  methods: {
    // 计算缩放比例
    getScaleRatio() {
      const baseWidth = 1920; // 基准宽度
      const baseHeight = 1080; // 基准高度
      const screenWidth = window.innerWidth; // 屏幕宽度
      const screenHeight = window.innerHeight; // 屏幕高度
      const ratioX = screenWidth / baseWidth;
      const ratioY = screenHeight / baseHeight;
      return Math.min(ratioX, ratioY); // 取最小比例作为缩放比例
    },
  },
  mounted() {
    // 监听窗口变化,重新计算缩放比例
    window.addEventListener('resize', () => {
      const scaleRatio = this.getScaleRatio();
      this.$refs.wrapper.style.transform = `scale(${scaleRatio})`;
    });
    // 初始化缩放比例
    const scaleRatio = this.getScaleRatio();
    this.$refs.wrapper.style.transform = `scale(${scaleRatio})`;
  },
};

引入使用

import { scaleMixin } from './mixins';
mixins: [scaleMixin],
 <div class="canvas-wrapper wrapper" style="width:1600px;heibht:890px;" ref="wrapper" >
      <div class="">内容</div>
 </div>

样式style

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: left top; /* 缩放基点为左上角 */
  transform: scale(1); /* 初始化缩放比例 */
}

到此这篇关于Vue中大屏适配和局部适配的方案总结的文章就介绍到这了,更多相关Vue大屏适配和局部适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文