vue2 mixin的方式 大屏适配(缩放居中的方式)

使用要求:指定容器的 id 为 bigScreenContainer

一、效果图

不管你的屏幕多大都会根据设计稿 1920*1080 进行缩放

图一:缩小的效果

图二:放大的效果

二、使用方式
<template>
  <div id="bigScreenContainer" ref="bigScreenContainer">
    // 内容
  </div>
</template>



<script>
// import { bigScreenAdapterMixin } from "snows-utils";
import bigScreenAdapterMixin from "@/utils/bigAdapterMixin";
export default {
  name:'',
  mixins: [bigScreenDdapterMixin],
</script>

三、实现代码
/*
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2023-11-16 09:35:24
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2023-11-16 10:47:15
 * @FilePath: /source-snows-utils/utils/bigAdapterMixin.js
 */
// 屏幕适配 mixin 函数

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

// * 设计稿尺寸(px)
const baseWidth = 1920;
const baseHeight = 1080;

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

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null
    };
  },
  mounted() {
    this.calcRate();
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    calcRate() {
      const style = {
        width: '1920px',
        height: '1080px',
        position: 'absolute',
        top: '50%',
        left: '50%',
        transformOrigin: 'left top'
      };
      const bigScreenContainer = document.getElementById('bigScreenContainer');
      if (!bigScreenContainer) return;

      // 设置必要样式(上下左右居中)
      bigScreenContainer.style.width = style.width;
      bigScreenContainer.style.height = style.height;
      bigScreenContainer.style.position = style.position;
      bigScreenContainer.style.top = style.top;
      bigScreenContainer.style.left = style.left;
      bigScreenContainer.style.transformOrigin = style.transformOrigin;

      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
      if (bigScreenContainer) {
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
          scale.height = (window.innerHeight / baseHeight).toFixed(5);
          bigScreenContainer.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);
          bigScreenContainer.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    resize() {
      clearTimeout(this.drawTiming);
      this.drawTiming = setTimeout(() => {
        this.calcRate();
      }, 200);
    }
  }
};

四:也可以直接安装 snows-utils 工具直接在里面引用

        snows-utils 中包含了很多使用的方法

一些常用的工具函数(snows-utils),已发npm,会陆续更新-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/snows_l/article/details/131384116?spm=1001.2014.3001.5501

<template>
  <div id="bigScreenContainer" ref="bigScreenContainer">
    // 内容
  </div>
</template>



<script>
import { bigScreenAdapterMixin } from "snows-utils";
// import bigScreenAdapterMixin from "@/utils/bigadapterMixin";
export default {
  name:'',
  mixins: [bigScreenAdapterMixin],
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/155879.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Proteus仿真】【Arduino单片机】HC05蓝牙通信

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶、HC05蓝牙传感器等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示蓝牙接收数据。 二、软件设计 /* 作者…

axios升级依赖版本后报错SyntaxError: Cannot use import statement outside a module

Axios构建为ES模块&#xff0c;而不是在Node中运行时的CommonJs。Jest的问题是它在Node中运行代码。这就是为什么告诉Jest转换Axios有效的原因。 Axios SDK附带了一个用于Node env的内置CommonJs文件。因此&#xff0c;我们可以通过将以下内容添加到您的package.json来修复它&a…

微服务架构之路7,Nacos配置中心的Pull原理,附源码

目录 一、本地配置二、配置中心1、以Nacos为例&#xff1a;2、Pull模式3、也可以通过Nacos实现注册中心 三、配置中心提供了哪些功能四、如何操作配置中心1、配置注册2、配置反注册3、配置查看4、配置变更订阅 五、主流的微服务注册中心有哪些&#xff0c;如何选择&#xff1f;…

C# 图解教程 第5版 —— 第15章 事件

文章目录 15.1 发布者和订阅者15.2 源代码组件概览15.3 声明事件15.4 订阅事件15.5 触发事件15.6 标准事件的用法15.6.1 通过扩展 EventArgs 来传递数据15.6.2 移除事件处理程序 15.7 事件访问器 15.1 发布者和订阅者 ​ 发布者 / 订阅者模式&#xff1a;发布者定义了一系列事…

Transformer

1. 整体架构 2. Encoder 1&#xff09;输入部分&#xff1a;Embeding 位置编码 位置编码没搞懂

小程序转换工具—Antmove 使用教学

自从微信小程序问世以后&#xff0c;字节、阿里、百度巨头们都各自搞各自的小程序平台&#xff0c;各有各的技术标准。基础技术都大差不差&#xff0c;但就是没法统一。搞得我们这些对接各平台的程序猿们苦不堪言。 虽说uniapp、Taro、Mpvue、Weex、Flutter都支持跨平台小程序…

LeetCode | 232. 用栈实现队列

​ LeetCode | 232. 用栈实现队列 OJ链接 解题思路&#xff1a; 此题可以用两个栈实现&#xff0c;一个栈进行入队操作&#xff0c;另一个栈进行出队操作出队操作&#xff1a; 当出队的栈不为空是&#xff0c;直接进行出栈操作&#xff0c;如果为空&#xff0c;需要把入队的…

HarmonyOS 实战项目

引言 本章将介绍如何在 HarmonyOS 上进行实际项目开发。我们将从项目需求分析开始&#xff0c;逐步完成项目的设计、开发、测试和上线过程。 目录 项目需求分析项目设计项目开发项目测试项目上线总结 1. 项目需求分析 项目需求分析是项目开发的关键阶段之一&#xff0c;它…

C#,数值计算——插值和外推,Base_interp的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Abstract base class used by all interpolation routines in this chapter. /// Only the routine interp is called directly by the user. /// </summary> pu…

Digicert证书:您的网络安全守护神

在当今数字化的世界中&#xff0c;网络安全已经成为每一个企业和个人必须面对的问题。而Digicert品牌证书&#xff0c;就是您网络安全的最佳选择。它不仅具有强大的安全性和稳定性&#xff0c;还能广泛应用于各种场景&#xff0c;为您提供全方位的保护。 首先&#xff0c;我们要…

Paypal发布公开信,三月已过,PYUSD发展如何?

2023年8月8日&#xff0c;美国支付巨头Paypal正式宣布推出其稳定币PYUSD&#xff0c;成为美国传统大型金融机构发行稳定币的首家企业。 当时&#xff0c;正值美国SEC与加密交易所Coinbase、Binance的诉讼白热化&#xff0c;Paxos被迫停止发行BUSD的阶段&#xff0c;在此背景下&…

计算机网络———ipv6简解

文章目录 1.前言&#xff1a;2. ipv6简单分析&#xff1a;2.1.地址长度对比2.2. ipv6包头分析2.3. ipv6地址的压缩表示&#xff1a;2.3. NDP&#xff1a;2.4. ipv6地址动态分配&#xff1a; 1.前言&#xff1a; 因特网地址分配组织)宣布将其最2011年2月3日&#xff0c;IANA (In…

从0开始学习JavaScript--JavaScript 循环与迭代详解

JavaScript中的循环和迭代是编写高效和灵活代码的关键。循环用于重复执行一段代码&#xff0c;而迭代则用于遍历数据结构。本文将深入研究JavaScript中常见的循环结构和迭代方法&#xff0c;并通过丰富的示例代码来帮助读者更好地理解和运用这些概念。 基本的for循环 for循环…

【微软技术栈】C#.NET 内存映射文件

本文内容 进程、视图和管理内存使用内存映射文件编程示例 内存映射文件包含虚拟内存中文件的内容。 借助文件和内存空间之间的这种映射&#xff0c;应用&#xff08;包括多个进程&#xff09;可以直接对内存执行读取和写入操作&#xff0c;从而修改文件。 可以使用托管代码访…

前端404页面的制作

1、背景 前端开发经常遇到输入路径不存在的问题&#xff0c;为此&#xff0c;把之前项目的404拿出来供大家参考。代码很简单&#xff0c;适合新手入手&#xff0c;效果如下&#xff1a; 2、代码引用的是element-plus框架 <template><div><el-result icon"…

String字符串性能优化的几种方案

原创/朱季谦 String字符串是系统里最常用的类型之一&#xff0c;在系统中占据了很大的内存&#xff0c;因此&#xff0c;高效地使用字符串&#xff0c;对系统的性能有较好的提升。 针对字符串的优化&#xff0c;我在工作与学习过程总结了以下三种方案作分享&#xff1a; 一.优…

linux虚拟机环境快速搭建redis5.x版本的主从集群总结

原创/朱季谦 我在阿里云服务器上曾参与过公司redis集群的搭建&#xff0c;但时间久了&#xff0c;都快忘记当时的搭建过程了&#xff0c;故而决定在虚拟机centOS 7的环境&#xff0c;自行搭建一套redis5.x版本的集群&#xff0c;该版本集群的搭建比较方便&#xff0c;不用再像…

上海亚商投顾:沪指低开低走 抖音概念股逆势爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡调整&#xff0c;深成指跌超1%&#xff0c;创业板指跌超1.8%。抖音概念股逆势爆发&#xff0c;佳…

Codewhisperer 使用评价

最近亚⻢逊推出了一款基于机器学习的 AI 编程助手 Amazon CodeWhisperer&#xff0c;可以实时提供代码建议。在编写代码时&#xff0c;它会自动根据现有的代码和注释给出建议。Amazon CodeWhisperer 与GitHub Copilot类似&#xff0c;主要的功能有: 代码补全注释和文档补全代码…

asp.net网上书店管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目

一、源码特点 asp.net网上书店管理系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 asp.net网上书店系统1 二、功能介绍 本系统使用Microsoft Visual Studio 2019为开发工具&#xff0c;SQL Server为…