当前位置: 首页 > news >正文

【Vue3】实现一个超过高度后可控制显示隐藏的组件

组件效果图

  • 未达到最大高度

在这里插入图片描述

  • 达到设置的最大高度
    在这里插入图片描述
  • 进行展开
    在这里插入图片描述

实现代码

  • 组件代码

备注:通过tailwindcss设置的样式,通过@element-plus/icons-vue设置的图标,可根据情况进行替换

<template><!-- 限制高度组件 --><div ref="restrictionBox" class="relative overflow-hidden bg-blue-300" :class="control.isUnfold ? '' : max"><div ref="restrictionChil"><slot></slot></div><!-- 渐变 --><div v-if="control.isExceed && !control.isUnfold" class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white"></div></div><!-- 控制按钮 --><div v-if="control.isExceed"><div class="flex h-12 cursor-pointer select-none items-center justify-center space-x-1 pb-2 text-blue-500 active:text-blue-400" @click="changeUnfold"><span class="text-sm">{{ control.isUnfold ? '收起' : '展开' }}</span><el-icon><ArrowUp v-if="control.isUnfold" /><ArrowDown v-else /></el-icon></div></div>
</template><script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'// 接收参数
const props = defineProps({// 最大高度 - 收起前max: {type: String,default: 'max-h-48'}
})// 组件控制参数
const control = reactive({boxHeight: 0,chilHeight: 0,isExceed: false, // 是否超出高度isUnfold: false // 是否展开
})// 改变展开方式
const changeUnfold = () => (control.isUnfold = !control.isUnfold)// 获取元素
const restrictionBox = ref(null)
const restrictionChil = ref(null)// 创建高度监听 及监听销毁
let observerBox = null
let observerChil = null// 销毁监听
const destroyedObserver = () => {if (observerBox) {observerBox.disconnect()observerBox = null}if (observerChil) {observerChil.disconnect()observerChil = null}
}// 比较高度的函数
const compareHeights = () => {if (control.boxHeight > 0 && control.chilHeight > 0) {// 高度超出,出现下拉if (control.chilHeight > control.boxHeight) {destroyedObserver()console.log('超出高度')control.isExceed = true}}
}// 页面加载完成
onMounted(() => {// 父级监听observerBox = new ResizeObserver(entries => {entries.forEach(entry => {control.boxHeight = entry.contentRect.heightcompareHeights()})})// 内容监听observerChil = new ResizeObserver(entries => {entries.forEach(entry => {control.chilHeight = entry.contentRect.heightcompareHeights()})})// 开始监听两个元素observerBox.observe(restrictionBox.value)observerChil.observe(restrictionChil.value)
})
onUnmounted(() => {destroyedObserver()
})
</script>

外层引用

<script setup>
import HeightRestriction from '../../components/HeightRestriction/HeightRestriction.vue'const ttt1 = ref(0)
const tttt = () => {ttt1.value++
}
</script><template><HeightRestriction><button @click="tttt">测试</button><div v-for="i in ttt1" :key="i">{{ 'ttt1ttt1ttt1' }}</div></HeightRestriction>
</template>

相关文章:

【Vue3】实现一个超过高度后可控制显示隐藏的组件

组件效果图 未达到最大高度 达到设置的最大高度 进行展开 实现代码 组件代码 备注&#xff1a;通过tailwindcss设置的样式&#xff0c;通过element-plus/icons-vue设置的图标&#xff0c;可根据情况进行替换 <template><!-- 限制高度组件 --><div ref"…...

Spring提供的SPEL表达式

SPEL 1. 概述 SpEL是Spring框架中用于表达式语言的一种方式。它类似于其他编程语言中的表达式语言&#xff0c;用于在运行时计算值或执行特定任务。 SpEL提供了一种简单且强大的方式来访问和操作对象的属性、调用对象的方法&#xff0c;以及实现运算、条件判断等操作。它可以…...

JAVA编程【jvm垃圾回收的差异】

jvm垃圾回收的差异 JVM&#xff08;Java Virtual Machine&#xff09;的垃圾回收&#xff08;GC&#xff09;机制是自动管理内存的一种方式&#xff0c;能够帮助开发者释放不再使用的内存&#xff0c;避免内存泄漏和溢出等问题。不同的垃圾回收器&#xff08;GC&#xff09;有…...

Elasticsearch:“Your trial license is expired”

目录标题 问题原因解决方案 问题 原因 ES的X-pack许可证是提供免费一个月的试用&#xff0c;到期之后就会报这个错误。 解决方案 查看license GET _license 开启试用license POST _xpack/license/start_trial?acknowledgetrue修改为基础license POST _xpack/license/start_…...

fmql之Linux WDT

正点原子第52章。 基础知识 正点原子教程 fmql-dts 代码 APP代码&#xff08;不需要编写驱动代码&#xff09; static int dw_wdt_drv_probe(struct platform_device *pdev) {struct device *dev &pdev->dev;struct watchdog_device *wdd;struct dw_wdt *dw_wdt; …...

【算法学习之路】7.链表算法

链表算法 前言一.原地逆置思路一&#xff1a;头插法思路二&#xff1a;双指针法思路3&#xff1a;递归 例题&#xff1a;1.头插法2.双指针法3&#xff0c;递归 二.双指针快慢指针&#xff1a;一个指针快一个指针慢例题1例题2 前言 我会将一些常用的算法以及对应的题单给写完&am…...

IDEA Commit 模态提交界面关闭VS开启对比

IDEA Commit 模态提交界面关闭VS开启对比 前言开启模态提交界面优点快捷且灵活的选择需要commit文件显示文件修改内容多(主观) 缺点在模态提交界面选择文件&#xff0c;临时关闭模态框重新打开会重置选择的commit文件 关闭模态提交界面优点允许在commit选择文件时查看其它没有修…...

【AI赋能】AI 工具生成视频教材:从创意到成品的全流程指南

AI 工具生成视频教材&#xff1a;从创意到成品的全流程指南 目标 通过本教材&#xff0c;您将学会如何利用 AI 工具&#xff08;Grok、Sora、Speechify 和 CapCut&#xff09;生成一个完整的视频&#xff0c;包括脚本生成、视频片段制作、字幕添加、音频生成以及最终剪辑合成…...

qt 操作多个sqlite文件

qt 操作多个sqlite文件 Chapter1 qt 操作多个sqlite文件1. 引入必要的头文件2. 创建并连接多个SQLite数据库3. 代码说明4. 注意事项 Chapter2 qt 多线程操作sqlite多文件1. 引入必要的头文件2. 创建数据库操作的工作线程类3. 在主线程中创建并启动多个工作线程4. 代码说明5. 运…...

WSL with NVIDIA Container Toolkit

一、wsl 下安装 docker 会提示安装 docekr 桌面版&#xff0c;所以直接安装 docker 桌面版本即可 二、安装 NVIDIA Container Toolkit NVIDIA Container Toolkit仓库 https://github.com/NVIDIA/nvidia-container-toolkit​github.com/NVIDIA/nvidia-container-toolkit 安装…...

Vue 系列之:组件通讯

子组件调用父组件方法 1、直接在子组件中通过 this.$parent.event 来调用父组件的方法 父组件&#xff1a; <template><p><child></child></p> </template> <script>import child from ./child;export default {components: {chi…...

【Linux实践系列】:用c语言实现一个shell外壳程序

&#x1f525;本文专栏&#xff1a;Linux Linux实践项目 &#x1f338;博主主页&#xff1a;努力努力再努力wz 那么今天我们就要进入Linux的实践环节&#xff0c;那么我们之前学习了进程控制相关的几个知识点&#xff0c;比如进程的终止以及进程的等待和进程的替换&#xff0c;…...

STL map 的 lower_bound(x)、upper_bound(x) 等常用函数

【STL map 简介】 ● STL map 是一种关联容器&#xff0c;存储键值对&#xff0c;每个键&#xff08;key value&#xff09;是唯一的&#xff0c;而值&#xff08;mapped value&#xff09;可以重复。构建 STL map 时&#xff0c;无论元素插入顺序如何&#xff0c;STL map 中的…...

【A2DP】SBC 编解码器互操作性要求详解

目录 一、SBC编解码器互操作性概述 二、编解码器特定信息元素(Codec Specific Information Elements) 2.1 采样频率(Sampling Frequency) 2.2 声道模式(Channel Mode) 2.3 块长度(Block Length) 2.4 子带数量(Subbands) 2.5 分配方法(Allocation Method) 2…...

Computational Linguistics期刊全解析:领域顶刊的投稿指南与学术价值

在人工智能与语言学交叉融合的浪潮中&#xff0c;《Computational Linguistics》&#xff08;CL&#xff09;作为该领域的标杆期刊&#xff0c;始终是研究者发表前沿成果的首选平台。本文将从期刊影响力、投稿策略、收稿方向等角度&#xff0c;为学者提供一份全面的指南。 一、…...

【量化科普】Sharpe Ratio,夏普比率

【量化科普】Sharpe Ratio&#xff0c;夏普比率 &#x1f680;量化软件开通 &#x1f680;量化实战教程 在量化投资领域&#xff0c;夏普比率&#xff08;Sharpe Ratio&#xff09;是一个非常重要的风险调整后收益指标。它由诺贝尔经济学奖得主威廉F夏普&#xff08;William…...

运行OpenManus项目(使用Conda)

部署本项目需要具备一定的基础&#xff1a;Linux基础、需要安装好Anaconda/Miniforge&#xff08;Python可以不装好&#xff0c;直接新建虚拟环境的时候装好即可&#xff09;&#xff0c;如果不装Anaconda或者Miniforge&#xff0c;只装过Python&#xff0c;需要确保Python是3.…...

TikTok Shop欧洲市场爆发,欧洲TikTok 运营网络专线成运营关键

TikTok在欧洲的影响力还在持续攀升&#xff0c;日前&#xff0c;TikTok发布了最新的欧盟执行和使用数据报告&#xff0c;报告中提到&#xff1a; 2024年7~12月期间&#xff0c;TikTok在欧盟地区的月活用户达1.591亿&#xff0c;较上一报告期&#xff08;2024年10月发布&#xf…...

基于YOLO11深度学习的电瓶车进电梯检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

计算机毕业设计SpringBoot+Vue.js制造装备物联及生产管理ERP系统(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

PX4仿真环境搭建全流程:解决roslaunch indoor1.launch报错及Gazebo崩溃问题

PX4仿真环境搭建全流程&#xff1a;从零构建到Gazebo调优实战 无人机仿真开发就像在数字世界里搭建一个飞行实验室&#xff0c;而PX4Gazebo的组合无疑是目前最接近真实飞行体验的虚拟试验场。但当你满怀期待地输入roslaunch indoor1.launch后&#xff0c;等待你的可能不是顺利起…...

如何高效使用NumPy结构化数组:处理复杂数据格式的终极指南

如何高效使用NumPy结构化数组&#xff1a;处理复杂数据格式的终极指南 【免费下载链接】numpy numpy/numpy: NumPy 是一个用于 Python 的数值计算库&#xff0c;提供了多种数学函数和工具&#xff0c;可以用于数值计算和科学计算&#xff0c;支持多种数学函数和工具&#xff0c…...

【搭建单双目散斑结构光Demo】

介绍 最近搭了一个用于研究的单目散斑结构光的硬件Demo。发射端使用VCSEL模组投影散斑&#xff0c;接收端使用工业相机采集图像。工业相机曝光时输出同步信号给驱动板&#xff0c;驱动板控制VCSEL发光投射出散斑图案&#xff0c;同步时间精度可以达到十微秒。也可以配两个工业…...

零基础入门:5分钟学会用Ollama运行Granite-4.0-H-350M文本生成

零基础入门&#xff1a;5分钟学会用Ollama运行Granite-4.0-H-350M文本生成 1. 为什么选择Granite-4.0-H-350M Granite-4.0-H-350M是一个轻量级但功能强大的文本生成模型&#xff0c;特别适合初学者和资源有限的用户。它只有3.5亿参数&#xff0c;却能在普通电脑上流畅运行&am…...

如何用Sunshine打造个人游戏串流中心:跨设备畅玩的终极指南

如何用Sunshine打造个人游戏串流中心&#xff1a;跨设备畅玩的终极指南 【免费下载链接】Sunshine Sunshine: Sunshine是一个自托管的游戏流媒体服务器&#xff0c;支持通过Moonlight在各种设备上进行低延迟的游戏串流。 项目地址: https://gitcode.com/GitHub_Trending/su/S…...

告别重复代码:BaseMapperPlus在SpringBoot项目中的5个高级用法

BaseMapperPlus实战&#xff1a;SpringBoot项目中提升开发效率的5个高阶技巧 在SpringBoot项目中使用MyBatis-Plus进行数据持久层开发时&#xff0c;BaseMapperPlus作为社区广泛采用的扩展接口&#xff0c;能显著减少模板代码。本文将分享五个实际业务场景中的高阶用法&#xf…...

利用快马平台AI能力,十分钟搭建你的Copilot式代码生成原型

今天想和大家分享一个快速验证AI编程助手&#xff08;Copilot类工具&#xff09;原型的实践。作为一个经常需要快速验证想法的开发者&#xff0c;我发现用InsCode(快马)平台可以省去很多搭建环境的时间&#xff0c;特别适合做这种概念验证。 明确核心需求 Copilot的核心能力其实…...

嵌入式哈希表实现:无malloc线性探测Hash Map

1. 项目概述 hashmap.c 是一个面向嵌入式系统深度优化的纯 C 语言哈希映射&#xff08;Hash Map&#xff09;实现&#xff0c;不依赖标准库&#xff08;如 stdlib.h 、 string.h &#xff09;&#xff0c;完全可移植于裸机环境、RTOS&#xff08;FreeRTOS、Zephyr、RT-Thr…...

s2-pro快速上手指南:3步完成文本转语音与音色迁移实操手册

s2-pro快速上手指南&#xff1a;3步完成文本转语音与音色迁移实操手册 1. 平台简介 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它能够将文本内容转换为自然流畅的语音&#xff0c;并支持通过参考音频实现音色迁移功能。这意味着你可以上传一段参考音频&…...

从AlexNet到ResNet:图解十大经典CV网络模型,帮你快速选对项目‘骨架’

从AlexNet到ResNet&#xff1a;十大经典CV网络模型实战选型指南 当你第一次面对ImageNet数据集时&#xff0c;可能会被各种网络架构的选择弄得眼花缭乱。VGG的深度堆叠、GoogLeNet的并行结构、ResNet的短路连接——这些设计理念背后&#xff0c;是计算机视觉领域十年来的智慧结…...