Vue 组件的 mixin 函数,用于屏幕适配

// 屏幕适配 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,}},computed: {isScale(){return this.$store.state.setting.isScale}},mounted () {if(!this.isScale){return}this.calcRate()window.addEventListener('resize', this.resize)},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 () {if(!this.isScale){return}clearTimeout(this.drawTiming)this.drawTiming = setTimeout(() => {this.calcRate()}, 200)}},
}

这段代码是一个 Vue 组件的 mixin 函数,主要用于屏幕适配。下面是对代码的详细解释:

  1. 常量定义:

    • scale: 一个对象,用于存储宽度和高度的缩放值。
    • baseWidth 和 baseHeight: 设计稿的尺寸,单位是像素。
    • baseProportion: 设计稿的宽高比,通过 baseWidth 除以 baseHeight 计算得出。
  2. data:

    • drawTiming: 一个定时器的引用,用于在窗口大小改变时延迟执行 calcRate 方法,以避免频繁的计算。
  3. computed:

    • isScale: 一个计算属性,从 Vuex 的 setting 模块中读取 isScale 的值,用于判断是否需要进行屏幕适配。
  4. mounted:

    • 在组件挂载后,如果 isScale 为真,则调用 calcRate 方法进行初始的屏幕适配,并给 window 对象添加 resize 事件监听器,以便在窗口大小改变时执行 resize 方法。
  5. beforeDestroy:

    • 在组件销毁前,移除之前添加到 window 对象上的 resize 事件监听器,避免内存泄漏。
  6. methods:

    • calcRate:
      • 获取当前窗口的宽高比。
      • 根据当前宽高比与设计稿宽高比的比较,决定是宽度更宽还是高度更高。
      • 根据比较结果,计算新的缩放值,并应用到组件的 transform 样式上,实现屏幕的适配。
    • resize:
      • 当窗口大小改变时,清除之前的定时器(如果有的话),然后设置一个新的定时器,延迟执行 calcRate 方法。这是为了避免在窗口大小改变时频繁地进行屏幕适配计算。

总结:这段代码的主要功能是,在组件挂载后,根据当前窗口的宽高比与设计稿的宽高比进行比较,然后动态地调整组件的缩放值,以实现屏幕适配。同时,它还考虑了窗口大小改变的情况,并在窗口大小改变时重新进行屏幕适配。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 开发工具包_JDK 各个版本 下载

Java 开发工具包_JDK 各个版本 下载: jdk.java.net http://jdk.java.net/ Oracle 官网: https://www.oracle.com/java/technologies/javase-downloads.html JDK-7 下载: http://jdk.java.net/java-se-ri/7 JDK-8 下载: https:/…

Unity性能优化篇(十四) 其他优化细节以及UPR优化分析器

代码优化: 1. 使用AssetBundle作为资源加载方案。 而且经常一起使用的资源可以打在同一个AssetBundle包中。尽量避免同一个资源被打包进多个AB包中。压缩方式尽量使用LZ4,少用或不要用LZMA的压缩方式。如果确定后续开发不会升级Unity版本,则可…

MySql并发事务问题

事务 事务概念: 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败。 事务的特性:ACID: 小…

鸿蒙实战开发-如何使用Stage模型卡片

介绍 本示例展示了Stage模型卡片提供方的创建与使用。 用到了卡片扩展模块接口,ohos.app.form.FormExtensionAbility 。 卡片信息和状态等相关类型和枚举接口,ohos.app.form.formInfo 。 卡片提供方相关接口的能力接口,ohos.app.form.for…

开源流程图表库(04):mxGraph,都是可视化编辑,导出使用。

mxGraph是一个用于创建和展示图形的JavaScript库。它提供了丰富的功能和工具,可以用于构建各种类型的图形应用程序,包括流程图、组织结构图、网络拓扑图等。 mxGraph的编辑器 一、mxGraph的特点和功能 以下是一些mxGraph的特点和功能: 强大…

FPGA的串口的收发程序设计

module uart_tx(input clk,input rst,input start,input [7:0] data,output reg tx_done,output reg tx_out );// 定义状态机的状态typedef enum logic [2:0] {IDLE, START, DATA, STOP} state_t;reg [10:0] count; // 用于计数发送的位数reg [2:0] state; // 用于记录…

耐腐蚀耐高温实验室塑料烧杯进口高纯PFA材质反应器特氟龙烧杯

PFA烧杯在实验过程中可作为储酸容器或涉及强酸强碱类实验的反应容器,用于盛放样品、试剂,可搭配电热板加热、蒸煮、赶酸用。 外壁均有凸起刻度,直筒设计,带翻边,便于夹持和移动,边沿有嘴,便于倾…

数学矩阵GCD和lCM(详解)

矩阵乘法 知阵乘法是《线性代数》中的基础内容,但在考察数学的算法题中也会出现。 本节我们学习基础的矩阵乘法规则。 每个矩阵会有一个行数和一个列数,只有当相乘的两个矩阵的左矩阵的列数等于右矩阵的行数 时,才能相乘,否则不允…

做网站搭建程序员时,客户诉求及解决方案分享

今天总结在给客户搭建电商独立站时,经常遇到的客户诉求及解决方案。 客户在搭建电商网站时经常提出的诉求和相应的解决方案如下: 1. **网站设计和用户体验**: - 诉求:希望有吸引力、易用性强的网站设计,提升用户体…

设计模式(17):中介者模式

核心: 如果一个系统中对象之间的联系呈现网状结构,对象之间存在大量多对多关系,导致关系及其复杂,这些对象称为“同事对象”。我们可以引入一个中介者对象,使各个同事对象只跟中介者对象打交道,将复杂的网…

【解决Jetson Nano 内存不足问题】纯命令行将 Conda 环境迁移到 SD 卡

前言 Jetson Nano 板载只有 16GB 的存储空间,在安装完 Ubuntu 和 Conda 环境后,剩余空间就捉襟见肘了,无法满足安装 PyTorch 等大型包的需求。此时如果你有一张SD卡,那么可以考虑将 Conda 环境迁移到 SD 卡上。 但网上的教程基本…

搭建电商购物独立站抓取主流电商产品数据的方法:工具+电商数据采集API接口

分享一个抓取数据产品的方法,也是别人给我说的。 想做一个联盟产品相关的网站,然后需要采集电商网站的产品。咨询大佬告诉我,大量级电商商品数据的采集可以接入专业的电商数据采集API接口,也可以用webscrsper,于是乎就…

Stable Diffusion WebUI 图片信息(PNG Info)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 大家好,我是水滴~~ 本文主要讲解 Stable Diffusion WebUI 的图片信息功能,主要包括:获取生成参数、将图片发送到其…

web安全学习笔记(6)

记一下第十节课的内容。 一.PHP语言中的if else判断 语法和c语言中非常类似,不再赘述,也可以使用if...elseif...elseif...else 1.True和False 2.,和 一个等号是赋值 两个等号是比较 三个等号是全等(内容相等,数…

2024系统架构师---常见考试概念

软件架构设计---架构4+1视图 逻辑视图:逻辑视图主要支持系统的功能需求,即系统提供给最终用户的服务。一般用类图和对象图描述;开发视图:开发视图也称为模块视图,在UML中被成为实现视图,它主要侧重于软件模块 的组织和管理。该视图可描述源代码,系统文件结构。过程视图:…

redis作为缓存,mysql的数据如何与redis进行同步呢?双写一致性

数据可以保持延迟,但是数据最终也是一致性的 1.采用了异步处理方法,当有数据更新和插入数据库的时候,放入MQ,顶一个任务监听MQ有数据就进行更新redis缓存 2.阿里提供cannal中间件,他是一个个服务,可以伪装一…

使用Docker部署SpringBoot项目(避坑+超级详细版本,Linux运维基础72问

使用Docker部署SpringBoot项目(避坑超级详细版本) 所有文章不设限,我们相遇偶然,相散坦然,互不打扰,各自安好,向阳而生 首先呢,非常感谢我们一起相遇在这个地方,想必此…

设计模式面试题(七)

1.什么时候使用模板方法 模板方法模式是一种行为设计模式,它在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤。 以下是一些使用模板方法模式的常见情况&#xf…

Redis的主从复制、哨兵模式、集群,概述及部署

目录 一、Redis主从复制 1.1.Redis主从复制的概念 1.2.Redis主从复制的作用 1.3. Redis主从复制的流程 1.4.Redis主从复制的搭建 1.4.1.修改Master节点 1.4.2. 修改Slave节点Redis配置文件 1.4.3.验证主从效果 二、Redis 哨兵模式 2.1 哨兵模式的原理 2.2 哨兵模式…

NoSQL概述

NoSQL概述 目录 一、为什么用NoSQL 二、什么是NoSQL 三、经典应用分析 四、N o S Q L 数 据 模 型 简 介 五、NoSQL四大分类 六、CAP BASE 一、为什么用NoSQL 1、单机MySQL的美好年代 在90年代,一个网站的访问量一般不大,用单个数据库完全可以轻松应…