当前位置: 首页 > 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领…...

Win10 LTSC 1809系统下Docker 4.0.0与CVAT 2.31.0的完美搭配:避坑指南与性能优化

Win10 LTSC 1809系统下Docker 4.0.0与CVAT 2.31.0的完美搭配&#xff1a;避坑指南与性能优化 在工业级计算机视觉标注领域&#xff0c;CVAT&#xff08;Computer Vision Annotation Tool&#xff09;凭借其开源特性和强大的标注功能&#xff0c;已成为许多研究团队的首选工具。…...

Unity游戏开发实战:用三阶贝塞尔曲线为你的角色设计一条丝滑的移动路径(附完整C#脚本)

Unity游戏开发实战&#xff1a;三阶贝塞尔曲线打造丝滑角色移动路径 想象一下&#xff0c;你的游戏角色需要完成一个优雅的空中翻转动作&#xff0c;或者赛车需要在弯道实现完美漂移轨迹。这些令人惊叹的运动效果背后&#xff0c;往往隐藏着一条看不见的数学曲线——贝塞尔曲线…...

Qwen2.5-VL-3B视频识别实战:从环境搭建到显存优化的踩坑记录

Qwen2.5-VL-3B视频识别实战&#xff1a;从环境搭建到显存优化的全流程指南 当开发者第一次尝试用Qwen2.5-VL-3B处理视频内容时&#xff0c;往往会遇到各种预料之外的挑战。从依赖包缺失到显存爆炸&#xff0c;从环境配置到参数调试&#xff0c;每一步都可能成为阻碍项目推进的绊…...

Web AR开发全指南:从技术原理到实战应用

Web AR开发全指南&#xff1a;从技术原理到实战应用 【免费下载链接】AR.js Image tracking, Location Based AR, Marker tracking. All on the Web. 项目地址: https://gitcode.com/gh_mirrors/arj/AR.js 随着增强现实技术的发展&#xff0c;Web AR开发已成为前端领域的…...

从“三次握手”到文件落地:用Wireshark抓包带你彻底搞懂C++ Socket文件传输全过程

从“三次握手”到文件落地&#xff1a;用Wireshark抓包带你彻底搞懂C Socket文件传输全过程 当你在浏览器下载文件时&#xff0c;是否好奇过数据是如何跨越网络准确无误地到达你的电脑&#xff1f;本文将带你用C实现一个完整的TCP文件传输程序&#xff0c;并通过Wireshark抓包工…...

OpenClaw浏览器自动化:ollama-QwQ-32B驱动的研究资料收集系统

OpenClaw浏览器自动化&#xff1a;ollama-QwQ-32B驱动的研究资料收集系统 1. 为什么需要自动化研究资料收集 作为一名经常需要查阅大量文献的技术写作者&#xff0c;我长期被资料收集的效率问题困扰。传统工作流程中&#xff0c;我需要手动在Google Scholar、arXiv、知乎等平…...

告别蜗牛速度!优麒麟20.04 LTS换源华为云镜像保姆级教程

优麒麟20.04 LTS提速指南&#xff1a;华为云镜像配置全解析 每次在优麒麟上安装软件时&#xff0c;看着进度条像蜗牛一样缓慢前进&#xff0c;是不是让你感到无比焦虑&#xff1f;特别是当你急需某个工具完成工作时&#xff0c;漫长的等待简直让人抓狂。作为一款基于Ubuntu的国…...

FPGA商用级ISP:动态坏点校正(DPCC)的滑窗架构与并行判决实现

【写在前面&#xff1a;为什么要写这个专栏&#xff1f;】在数字图像处理领域&#xff0c;ISP&#xff08;图像信号处理器&#xff09;的算法原理并不罕见&#xff0c;但真正能够支持 4K60fps 实时处理、并经过商用验证的 Verilog 硬核实现思路 却往往秘和封装在黑盒之中。我手…...

Windows下BERTopic安装避坑指南:解决hdbscan报错(附Python 3.8环境配置)

Windows下BERTopic安装避坑指南&#xff1a;解决hdbscan报错&#xff08;附Python 3.8环境配置&#xff09; 第一次在Windows上安装BERTopic时&#xff0c;那个红色的hdbscan报错信息让我盯着屏幕发了十分钟呆。作为一款强大的主题建模工具&#xff0c;BERTopic的安装本不该如此…...

OpenSpec 生成文件说明

proposal.md —— 为什么做、做什么&#xff08;产品/范围&#xff09; Why&#xff1a;要解决什么问题、机会是什么。What Changes&#xff1a;会新增/改掉/删掉哪些能力&#xff0c;有没有 BREAKING。Capabilities&#xff1a;会动到哪些能力名&#xff08;对应后面 specs/&l…...