vue 如何制作一个跟随窗口大小变化而变化的组件

vue 如何制作一个跟随窗口大小变化而变化的组件

像下图中展示的那些统计数件就是跟随窗口变化而变化的,而且是几乎等比缩放的。

在这里插入图片描述

实现原理

只简略说一下原理。

  1. pinia 中记录一个窗口变化的高度值
  2. 给要变化的组件添加一个高度值
  3. 组件内部所有关于长度距离的值都通过这个传递的值生成

比如下面这个例子中的所有长度值都通过传递的唯一长度值 props.height 来生成

<template><div :class="['home-count-up', type, {'shadow': hasShadow}]" @click="routeToPath":style="`width: ${props.height * 2.5}px;padding: ${props.height * 5/ 50}px ${props.height * 13/ 50}px;border-radius: ${props.height * 6 / 50}px`"><div class="icon"><el-icon :size="props.height * 4 / 10" fill="black"><component :is="icon"/></el-icon></div><div class="content"><div class="label" :style="`font-size: ${props.height * 7 / 50}px`">{{label}}</div><CountUp class="value" :font-size="props.height * 15 / 50" :endVal="value"/></div></div>
</template>

这里有一个技巧:

当多个组件都需要跟 window.onresize 进行绑定时,可以这样写,就会同时触发多个:

window.addEventListener('resize', () => {this.width = this.widthInitthis.height = this.heightInitthis.$nextTick(()=>{this.resize()})
})

下面这样就只能触发一个

window.onresize = () => {this.width = this.widthInitthis.height = this.heightInitthis.$nextTick(()=>{this.resize()})
}

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

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

相关文章

【启明智显彩屏应用】Model3A 7寸触摸屏在真空包装机上的应用解决方案

一、项目背景与需求 随着工业自动化水平的提升&#xff0c;对真空包装机的操作界面和控制精度要求也越来越高。为满足这一需求&#xff0c;我们提出了基于Model3A工业级HMI&#xff08;人机界面&#xff09;芯片方案的7寸触摸屏解决方案&#xff0c;旨在提高真空包装机的操作便…

联邦学习在non-iid数据集上的划分和训练——从零开始实现

虽然网上已经有了很多关于Dirichlet分布进行数据划分的原理和方法介绍&#xff0c;但是整个完整的联邦学习过程还是少有人分享。今天就从零开始实现 加载FashionMNIST数据集 import torch from torchvision import datasets, transforms# 定义数据转换 transform transforms…

Nvidia/算能 +FPGA+AI大算力边缘计算盒子:医疗健康智能服务

北京天星医疗股份有限公司(简称“天星医疗”)作为国产运动医学的领导者&#xff0c;致力于提供运动医学的整体临床解决方案&#xff0c;公司坐落于北京经济技术开发区。应用于肩关节、膝关节、足/踝关节、髋关节、肘关节、手/腕关节的运动医学设备、植入物和手术器械共计300多个…

微信小程序长图片自适应

/*wxss中的代码*/ .image-container { display:flex;width: 100%; /* 或其他需要的宽度 */ /* margin-bottom: 10px; //图片之间的间距 */height: auto; } 核心&#xff1a;要真正自适应&#xff0c;就要在wxml中加入固定宽度style“width:750rpx” /*wxml中的代码*/ &l…

Python Flask 入门开发

Python基础学习&#xff1a; Pyhton 语法基础Python 变量Python控制流Python 函数与类Python Exception处理Python 文件操作Python 日期与时间Python Socket的使用Python 模块Python 魔法方法与属性 Flask基础学习&#xff1a; Python中如何选择Web开发框架&#xff1f;Pyth…

Deap因子挖掘基础框架完成|量化私募投研的典型工作流程

原创文章第551篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 继续因子挖掘&#xff1a; 因子挖掘&#xff0c;其实是一个“开放式的”&#xff0c;有很多tricks的工作&#xff0c;其实遗传算法不复杂。 说白了&#xff0c;根据你给定的“符号…

wordpress主题建站的步骤和流程

WordPress建站是一个涉及多个步骤的过程&#xff0c;包括选择主机、安装WordPress、选择和安装主题等。以下是详细的建站流程&#xff1a; 前期准备&#xff1a; 确定网站定位与目标受众&#xff1a;在开始建站之前&#xff0c;首先要明确你的网站定位和目标受众&#xff0c;…

个人笔记-python生成gif

使用文件的修改时间戳进行排序 import os import re import imageio# 设置图片所在的文件夹路径 folder_path /home/czy/ACode/AMAW_20240219/9.3.x(Discrete_time_marching&#xff09;/9.3.17.11.1(Disc_concessive_CH_ZJ)/current_figures # 文件夹路径&#xff1b;linux…

laravel开发新模块案例ChatGPT

laravel开发新模块案例 ChatGPT 2024年06月03日 10时13分Token: 1528 好的&#xff0c;以下是一个关于如何在Laravel应用中开发一个新模块的案例。这个示例将演示如何创建一个简单的博客模块&#xff0c;包括创建与管理文章的基本功能。 首先&#xff0c;确保你已经安装Larave…

电商核心技术系列58:电商平台的智能数据分析与业务洞察

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘相关系列文章合集&#xff08;3&#xff09; 电商核心技术揭秘56&#xff1a;客户关系管理与忠诚度提升 电商核心技术揭秘57:数…

Python语法构成:深度解析与实际应用

Python语法构成&#xff1a;深度解析与实际应用 Python&#xff0c;作为一种简洁、易读且功能强大的编程语言&#xff0c;其语法构成是其核心魅力之一。然而&#xff0c;对于初学者来说&#xff0c;Python的语法结构可能既具有吸引力又充满挑战。本文将从四个方面、五个方面、…

【Python系列】Python 方法变量参数详解

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

白酒:茅台镇白酒的醇厚口感与细腻层次

茅台镇&#xff0c;中国白酒的璀璨明珠&#xff0c;以其与众不同的自然环境和杰出的酿造技艺&#xff0c;孕育出了无数上好白酒。云仓酒庄豪迈白酒作为茅台镇的杰出品牌&#xff0c;以其醇厚口感和细腻层次&#xff0c;赢得了无数消费者的喜爱。 茅台镇地处赤水河畔&#xff0c…

训练集和测试集的分布一致性分析

规律一致性分析的实际作用   在实际建模过程中&#xff0c;规律一致性分析是非常重要但又经常容易被忽视的一个环节。通过规律一致性分析&#xff0c;我们可以得出非常多的可用于后续指导后续建模的关键性意见。通常我们可以根据规律一致性分析得出以下基本结论&#xff1a; …

ai写作神器app有哪些?好用的智能写作APP推荐

ai写作神器app有哪些&#xff1f;AI写作神器app在现代写作领域正迅速崭露头角&#xff0c;它们不仅极大提升了创作效率&#xff0c;而且通过集成前沿的人工智能技术&#xff0c;为创作者们提供了前所未有的便利。这些app能够智能分析写作需求&#xff0c;快速生成高质量的内容&…

十五、【源码】动态Sql

源码地址&#xff1a;https://github.com/mybatis/mybatis-3/ 仓库地址&#xff1a;https://gitcode.net/qq_42665745/mybatis/-/tree/15-dynamic-sql 动态Sql 解析动态Sql分为两部分 1.解析XML中Sql的时候&#xff0c;要将其解析成不同的SqlNode节点&#xff0c;但是不进行…

Jenkins的jdk和maven配置

目录 传送门前言一、概念二、JDK的配置三、Maven配置四、环境变量配置五、坑 传送门 SpringMVC的源码解析&#xff08;精品&#xff09; Spring6的源码解析&#xff08;精品&#xff09; SpringBoot3框架&#xff08;精品&#xff09; MyBatis框架&#xff08;精品&#xff09…

Python编程入门EPUB:探索编程世界的奇幻之旅

Python编程入门EPUB&#xff1a;探索编程世界的奇幻之旅 在数字化时代的浪潮中&#xff0c;编程已成为一项不可或缺的技能。而Python&#xff0c;作为一门简洁易懂且功能强大的编程语言&#xff0c;正逐渐成为初学者们的首选。那么&#xff0c;如何踏上Python编程的奇幻之旅呢…

「51媒体」媒体发布会如何做媒体邀约

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体发布会的媒体邀约是一个需要精心策划和准备的过程。 策划与准备阶段&#xff1a; 明确目标&#xff1a;明确发布会的目标、核心议题、举办日期、时间和地点。 准备资料&#xff1a…

体验式营销+旅行文化:品牌海外推广的创新之路

在全球化的时代背景下&#xff0c;体验式营销作为一种新兴的营销方式&#xff0c;以其独特的参与性、互动性和情感共鸣&#xff0c;成为品牌与消费者建立深层次联系的有效手段。而将体验式营销与旅行文化相结合&#xff0c;能够为海外消费者提供独特的品牌体验。本文Nox聚星将和…