【4】Vite+Vue3左右容器中相同属性的元素内容自动对齐

在当今前端开发的领域里,快速、高效的项目构建工具以及使用最新技术栈是非常关键的。Vite+Vue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。

作为下一代前端构建工具,Vite 在开发中的启动速度和热重载方面具有突出的优势。而Vue3,则以更加简化的API和更高效的响应式系统为开发者带来了更加流畅的开发体验。结合使用Vite和Vue3,你将能够快速搭建稳定、高效的前端项目。

在这个专栏里,我们将通过100+个实战示例,详细介绍Vite+Vue3的各个方面。从项目的创建和配置开始,我们会一步一步地引导你使用Vite搭建项目的基本框架,并深入讲解Vue3的语法和特性。随后,我们将演示如何构建常见的前端组件、路由管理和状态管理,以及与后端API的交互等实际项目开发中常见的场景。

无论你是从零开始学习Vite+Vue3,还是希望进一步提升你的前端开发能力,本专栏都能为你提供实用的知识和实战经验。通过这100+个实战示例的学习,你将能够掌握Vite+Vue3的核心概念和技术,并能够在实际项目中灵活应用。

赶快加入我们吧,开始你的Vite+Vue3项目实战之旅!

一、介绍 ✨ ✨ ✨

这个需求的话相对比较冷门,一般会出现在图文排版,在文章或者网页中,将图片和文字按照某种规则进行对齐,提高排版效果和可读性.其次是做到页面一致性,一致的对齐方式可以使整个界面
看起来更加的统一和协调,从而引导用户的注意力。这个功能的话其实开发永远用得最多,比如我们在git提交代码的时候,会有代码对比功能,很清晰的就能知道我们修改了些什么内容。
如果你有word或者文章进行比对的话,就可以应用次功能,进行段落或者标题的对其,直接提供用户体验。

二、实现思路 ✨ ✨ ✨

我采用的是原生的JavaScript方式去实现,通过最外层的class获取到所有的dom元素,然后进行遍历,获取到特定属性的元素。以内容最多的容器高度为最小高度。也就是说,左右两个div,拥有
同样name或者href属性的(这里根据自己的需求去调整),获取两个容器的高度,取最大的高度设置成两个容器的最小高度(minHeight),这样两个容器的高度就一致了,从而实现左右对齐。
原生的JavaScript方式的好处在于Vue可以兼容,同时还能运用到react项目中以及其他的HTML项目中。当然还有其他的实现方式,比如Vue和React可以应用ref属性进行实现等等。

那为什么不直接设置div的高度呢,如果你有很多div,然后内容都是不可控制的,可能会很短,有可能会很多,这个时候你就没有一个准确的高度设置,就算你设置了一个最小高度,当两边内容都比较少的时候
就会出现很大一片空白,导致页面开起来很凌乱。所以当这类需求我们能够使用脚本去实现的时候尽量不要去写死。

三、完整代码示例 ✨ ✨ ✨

<template><el-button @click="changeTab">切换</el-button><div class="form-item" ><div v-if="show" style="display: flex;justify-content: space-around"><div style="width: 45%"><div name="#div1">我是第一段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div><div name="#div2" style="margin: 50px 0">我是第二段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐<br><br><div name="#div2-1">这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置</div></div><div name="#div3">我是第三段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div></div><div style="width: 45%"><div name="#div1">我是第一段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div><div name="#div2" style="margin: 50px 0">我是第二段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐<br><br><div name="#div2-1">这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置</div></div><div name="#div3">我是第三段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div></div></div><div v-else style="display: flex;justify-content: space-around"><div style="width: 45%"><div name="#div1">我是第一段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div><div name="#div2" style="margin: 50px 0">我是第二段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐<br><br><div name="#div2-1">这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置</div></div><div name="#div3">我是第三段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div></div><div style="width: 45%"><div name="#div1">我是第一段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div><div name="#div2" style="margin: 50px 0">我是第二段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐<br><br><div name="#div2-1">这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置这里是子节点的一个位置</div></div><div name="#div3">我是第三段<br>测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐测试一下是否对齐</div></div></div></div>
</template><script lang="ts">
import {defineComponent, nextTick, onMounted, ref} from "vue";export default defineComponent({setup() {const div1 = ref<HTMLDivElement>()const div2 = ref<HTMLDivElement>()const contrast = () => {nextTick(() => {const data = {}const result = {}const divs = document.querySelector('.form-item')?.querySelectorAll('*');divs.forEach((el: HTMLElement) => {const name = el.getAttribute('name')if (name) {if (data[name] && data[name].length > 0) {data[name].push(el.offsetHeight)} else {data[name] = [el.offsetHeight]}}})Object.keys(data).forEach(key => {const height1 = data[key][0]const height2 = data[key][1]result[key] = Math.max(height1, height2)})divs.forEach((el: HTMLElement) => {const name = el.getAttribute('name')if (name) {el.style.minHeight = (result[name] || 0) + 'px'}})})}onMounted(() => {contrast()})const show = ref<boolean>(false)const changeTab = () => {show.value = !show.valuecontrast()}return {div1,div2,changeTab,show}}
})
</script>

四、核心代码解析  ✨ ✨ ✨

1、这里我给需要左右对齐的div设置同样的name属性,这里的name属性要确保只能出现两次,即左右各一次。

2、在vue中nextTick是在页面加载完成以后的回调。页面加载完成以后遍历form-item下的所有节点。获取name相同的div进行高度取值,取出最大值后,再设置相同div的minHeight。

const contrast = () => {nextTick(() => {const data = {}const result = {}const divs = document.querySelector('.form-item')?.querySelectorAll('*');divs.forEach((el: HTMLElement) => {const name = el.getAttribute('name')if (name) {if (data[name] && data[name].length > 0) {data[name].push(el.offsetHeight)} else {data[name] = [el.offsetHeight]}}})Object.keys(data).forEach(key => {const height1 = data[key][0]const height2 = data[key][1]result[key] = Math.max(height1, height2)})divs.forEach((el: HTMLElement) => {const name = el.getAttribute('name')if (name) {el.style.minHeight = (result[name] || 0) + 'px'}})})
}

这里我们只是简单的实现了左右容器段落自动对齐的功能,后面我们还会实现,左右内容进行对比,差异高亮的功能。

我是Etc.End。每一次进步都值得庆祝,每一次努力都值得赞赏。不要忽视自己的成长,每一步都是向前迈进的力量。如果我的文章对你有所帮助的话,希望能留下你的点赞和收藏。😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

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

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

相关文章

2023年下半年软考高项考试时间及安排

信息系统项目管理师一般情况下分别于上半年5月份和下半年11月份考试&#xff0c;2023年信息系统项目管理师上半年考试时间为2023年5月27日&#xff0c;下半年考试时间为2023年11月4日。 信息系统项目管理师考试报名时间&#xff1a; 下半年8月左右开始&#xff0c;各地区时间不…

接口测试 Fiddler 保存会话 (请求)

目录 前言&#xff1a; 为什么要保存请求&#xff1f; 保存单个请求 打开保存的请求文件 乱码的解决方法 保存所有请求 自动保存请求的猜想 自动保存已实现 前言&#xff1a; 在进行接口测试时&#xff0c;Fiddler是一个非常有用的工具&#xff0c;它可以帮助您捕获和…

微服务sleuth+zipkin——链路追踪

一、链路追踪&#x1f349; 1.什么是链路追踪&#xff1f;&#x1f95d; 在大型系统的微服务化构建中&#xff0c;一个系统被拆分成了许多模块。这些模块负责不同的功能&#xff0c;组合成系统&#xff0c;最终可以提供丰富的功能。在这种架构中&#xff0c;一次请求往往需要…

flutter开发实战-svga播放svgaplayer_flutter直播礼物特效等效果使用

flutter开发实战-svga播放svgaplayer_flutter直播礼物特效等效果使用 最近开发过程中用到了SVGA进行播放动画&#xff0c;这里记录一下svgaplayer_flutter使用过程。svga可以做一些非常精美的动画&#xff0c;包括直播的刷礼物(火箭、跑车特效动画)等等。 效果图如下 一、SVG…

基于51单片机和proteus的电流采集系统

此系统是基于51单片机和proteus的仿真设计&#xff0c;功能如下&#xff1a; 1. LCD1602实时显示获取到电流值及设定值。 2. 按键可调整电流设定值。 3. 电流值过高则蜂鸣器报警。 4. 指示灯指示电流及系统状态。 5. 系统信息可通过串口实时更新。 功能框图如下&#xff1…

【Linux】内存使用相关

free 命令 查看内存大小 free -g :G单位 free -h : 可读性较高较理解 free -m : MB单位 total: 总内存used: 正在运行的进程使用的内存(used total – free – buff/cache)free: 未使用的内存 (free total – used – buff/cache)shared: 多个进程共享的内存buffers: 内存保留…

C语言--程序环境和预处理

翻译环境 C语言的代码是文本信息&#xff0c;对于计算机来说无法直接理解&#xff0c;需要通过翻译环境进行翻译成二进制信息&#xff1b; 我们在写代码的时候&#xff0c;一般都会写在一个源文件中&#xff0c;这时候我们就使用我们的编译器(VS)将其转换为机器代码&#xff0…

数据库应用:MySQL高级语句(一)

目录 一、理论 1.常用查询 2.函数 3.进阶查询 二、实验 1.普通查询 2.函数 3.进阶查询 三、问题 1.MySQL || 运算符不生效 四、总结 一、理论 1.常用查询 常用查询包括&#xff1a;增、删、改、查&#xff1b; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外…

【OC总结- Block】

文章目录 前言2. Block2.1 Block的使用规范2.2 __block修饰符2.3 Block的类型2.4 Block的循环引用及解决循环引用的场景引入解决循环引用Block循环引用场景 2.5 Block的实现及其本质2.5.1 初始化部分2.5.2 调用部分2.5.3 捕获变量 Block本质2.6 Block捕获变量 和 对象2.7 Block…

访问Liunx文件系统

访问Liunx文件系统 识别文件系统和设备 存储管理概念 Linux服务器上文件按文件系统层次结构访问。该文件系统层次结构测试由系统可用的存储设备所提供的文件系统组装而来。每个文件系统都是一个已格式化的存储设备&#xff0c;可用于存储文件。 文件系统和挂载点 要让文件系…

perl输出中文乱码【win10】

perl输出中文乱码 运行的时候输出的内容变成了中文乱码&#xff0c;原因首先来查找一下自己的perl的模块里面是否有Encode-CN。请运行打开你的cmd并输入perldoc -l Encode::CN 如果出现了地址 则就是有&#xff0c;如果没有需要进行该模块的安装。 安装方式有很多种&#xff0…

Unity---Spine动画

目录 1.介绍 2.优点 3.spine导出的unity资源 4.导入 5.导入报错的解决方案 6.使用 7.代码示例 1.加载Spine骨骼动画&#xff1a; 2.控制Spine动画的播放&#xff1a; 3.暂停和恢复动画播放&#xff1a; 4.监听动画事件&#xff1a; 5.切换皮肤&#xff08;换装&…