vue大屏适配封装

最新推荐文章于 2024-09-28 12:08:31 发布

江湖行骗老中医

最新推荐文章于 2024-09-28 12:08:31 发布

阅读量384

点赞数

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/liming1016/article/details/125316350

版权

该博客介绍了如何使用 Vue.js 封装一个大屏适配组件，通过动态计算缩放比例实现页面在不同屏幕尺寸下的自适应布局。内容包括组件模板、脚本逻辑和样式定义，以及在实际项目中的使用示例。主要关注前端开发中的响应式设计和适配技术。

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

vue大屏适配封装

<template>
  <div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScreenAdapter',
  data() {
    return {
      style: {
        width: `${this.w}px`,
        height: `${this.h}px`,
        transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中
      },
    };
  },
  props: {
    w: { // 设计图尺寸宽
      type: Number,
      default: 1920,
    },
    h: { // 设计图尺寸高
      type: Number,
      default: 1080,
    },
  },
  mounted() {
    this.setScale();
    this.onresize = this.debounce(() => this.setScale(), 100);
    window.addEventListener('resize', this.onresize);
  },
  methods: {
    // 防抖
    debounce(fn, t) {
      const delay = t || 500;
      let timer;
      // eslint-disable-next-line func-names
      return function () {
        // eslint-disable-next-line prefer-rest-params
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        const context = this;
        timer = setTimeout(() => {
          timer = null;
          fn.apply(context, args);
        }, delay);
      };
    },
    // 获取缩放比例
    getScale() {
      console.log(window.innerHeight, window.innerWidth);
      const w = window.innerWidth / this.w;
      const h = window.innerHeight / this.h;
      return w < h ? w : h;
    },
    // 设置缩放比例
    setScale() {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onresize);
  },
};
</script>

<style lang="scss">
.screen-adapter {
  width: 100vw;
  min-height: 100%;
  max-height: 100vh;
  overflow: hidden;

  .content-wrap {
    transform-origin: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #F0F2F5;
  }
}
</style>

使用：

<template>
  <screen-adapter w="1920" h="1080">
    <div class="dashboard-editor-container">
      <div style="text-align: center;font-size: 20px">
        大屏测试页面
      </div>   
    </div>
  </screen-adapter>
</template>

<script>
  import screenAdapter from "@/views/dp/screenAdapter";
  export default {
    name: 'Index',
    components: {
      screenAdapter
    },
    data() {
      return {}
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>

</style>