vue+elementUI+transition实现鼠标滑过div展开内容,鼠标划出收起内容,加防抖功能
文章目录
- 一、场景
- 二、实现代码
- 1.子组件代码结构
- 2.父组件
一、场景
这两天做项目,此产品提出需求 要求详情页的顶部区域要在鼠标划入后展开里面的内容,鼠标划出要收起部分内容,详情底部的内容高度要自适应,我这里运用了鼠标事件+transition实现,加上lodash debounce进行防抖,下面是具体实现代码
二、实现代码
1.子组件代码结构
代码如下(示例):
<template><divclass="project-header"@mouseenter="enterFun()"@mouseleave="leaveFun()"ref="project-header"><div class="project-header-top">顶部要显示的部分</div><div class="bottom" v-show="showProjectHeaderBottom">顶部要隐藏的部分,鼠标划入显示</div></div>
</template><script>
import { debounce } from 'lodash';//npm install lodash引入
export default {name: '',components: {},props: {},data() {return {showProjectHeaderBottom: false,//控制顶部要隐藏的显隐};},methods: {// 鼠标滑过enterFun:debounce(function(){this.showProjectHeaderBottom = true;this.$emit('getHeight', 'hover');},100),// 鼠标划出leaveFun:debounce(function(){this.showProjectHeaderBottom = false;this.$emit('getHeight', null);},100),},
};
</script>
<style lang="scss" scoped>
.project-header {height: 68px;
}
</style>
2.父组件
代码如下(示例):
<template><div class="project-detail" ref="project-browse" ><Headerref="project-detail-top"class="project-detail-top"@getHeight="getHeight"></Header><div class="tab-content" style="position: relative" ref="tab-content"></div></div>
</template><script>
import Header from './components/detailHeader.vue';
export default {name: '',components: { Header},props: {},data() {},methods: {mountedInit() {this.getHeaderheight();window.addEventListener('resize', this.getHeaderheight);},getHeaderheight(type) {this.$nextTick(() => {let projectHeader = type === 'hover' ? 208 : 60;document.querySelector('.tab-content .el-tabs__content').style.overflow = type === 'hover' ? 'hidden' : 'auto';let height = this.$refs['project-browse']?.offsetHeight - projectHeader;this.$refs['tab-content'].style.height = height + 'px';//自适应this.$refs["project-detail-top"].$el.style.height=projectHeader+ 'px';});},},created() {this.createdInit();},mounted() {this.mountedInit();},
};
</script>
<style lang="scss" scoped>
.project-detail-top {transition: height 0.2s ease-in-out;overflow: hidden;
}
</style>
相关文章:
vue+elementUI+transition实现鼠标滑过div展开内容,鼠标划出收起内容,加防抖功能
文章目录 一、场景二、实现代码1.子组件代码结构2.父组件 一、场景 这两天做项目,此产品提出需求 要求详情页的顶部区域要在鼠标划入后展开里面的内容,鼠标划出要收起部分内容,详情底部的内容高度要自适应,我这里运用了鼠标事件t…...
大模型语料库的构建过程 包括知识图谱构建 垂直知识图谱构建 输入到sql构建 输入到cypher构建 通过智能体管理数据生产组件
以下是大模型语料库的构建过程: 一、文档切分语料库构建 数据来源确定: 首先,需要确定语料库的数据来源。这些来源可以是多种多样的,包括但不限于: 网络资源:利用网络爬虫技术从各种网站(如新闻…...
阿里云ECS服务器域名解析
阿里云ECS服务器域名解析,以前添加两条A记录类型,主机记录分别为www和,这2条记录都解析到服务器IP地址。 1.进入阿里云域名控制台,找到域名 ->“解析设置”->“添加记录” 2.添加一条记录类型为A,主机记录为www,…...
牛客周赛71:A:JAVA
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 \hspace{15pt}对于给定的两个正整数 nnn 和 kkk ,是否能构造出 kkk 对不同的正整数 (x,y)(x,y)(x,y) ,使得 xynxynxyn 。 \hspace{15pt}我们认为两对正整数 (…...
查询产品所涉及的表有(product、product_admin_mapping)
文章目录 1、ProductController2、AdminCommonService3、ProductApiService4、ProductCommonService5、ProductSqlService1. 完整SQL分析可选部分(条件筛选): 2. 涉及的表3. 总结4. 功能概述 查询指定管理员下所有产品所涉及的表?…...
算法基础学习Day5(双指针、动态窗口)
文章目录 1.题目2.题目解答1.四数之和题目及题目解析算法学习代码提交 2.长度最小的子数组题目及题目解析滑动窗口的算法学习方法一:单向双指针(暴力解法)方法二:同向双指针(滑动窗口) 代码提交 1.题目 18. 四数之和 - 力扣(LeetCode&#x…...
docker 部署 mysql 9.0.1
docker 如何部署 mysql 9 ,请看下面步骤: 1. 先看 mysql 官网 先点进去 8 版本的 Reference Manual 。 选择 9.0 版本的。 点到这里来看, 这里有一些基础的安装步骤,可以看一下。 - Basic Steps for MySQL Server Deployment wit…...
关于小标join大表,操作不当会导致笛卡尔积,数据倾斜
以前总是说笛卡尔积,笛卡尔积,没碰到过,今天在跑流程调度时,就碰到笛卡尔积了,本来,就是查询几个编码的信息,然后由于使用的是with tmp as,没使用where in ,所以跑的很慢 现象&#…...
SpringMVC全局异常处理
一、Java中的异常 定义:异常是程序在运行过程中出现的一些错误,使用面向对象思想把这些错误用类来描述,那么一旦产生一个错误,即创建某一个错误的对象,这个对象就是异常对象。 类型: 声明异常࿱…...
出海服务器可以用国内云防护吗
随着企业国际化进程的加速,越来越多的企业选择将业务部署到海外服务器上,以便更贴近国际市场。然而,海外服务器也面临着来自全球各地的安全威胁和网络攻击。当出海服务器遭受攻击时,是否可以借助国内的云服务器来进行有效的防护呢…...
从零开始的使用SpringBoot和WebSocket打造实时共享文档应用
在现代应用中,实时协作已经成为了非常重要的功能,尤其是在文档编辑、聊天系统和在线编程等场景中。通过实时共享文档,多个用户可以同时对同一份文档进行编辑,并能看到其他人的编辑内容。这种功能广泛应用于 Google Docs、Notion 等…...
Ant Design Pro实战--day01
下载nvm https://nvm.uihtm.com/nvm-1.1.12-setup.zip 下载node.js 16.16.0 //非此版本会报错 nvm install 16.16.0 安装Ant Design pro //安装脚手架 npm i ant-design/pro-cli -g //下载项目 pro create myapp //选择版本 simple 安装依赖 npm install 启动umi yarn add u…...
pcl点云库离线版本构建
某天在摸鱼的小邓接到任务需要进行点云数据的去噪,在万能的github中发现如下pcl库非常好使,so有了此, 1.下载vs2017连接如下: ed2k://|file|mu_visual_studio_community_2017_version_15.1_x86_x64_10254689.exe|1037144|12F5C1…...
字节高频算法面试题:小于 n 的最大数
问题描述(感觉n的位数需要大于等于2,因为n的位数1的话会有点问题,“且无重复”是指nums中存在重复,但是最后返回的小于n最大数是可以重复使用nums中的元素的): 思路: 先对nums倒序排序 暴力回…...
ElasticSearch常见面试题汇总
一、ElasticSearch基础: 1、什么是Elasticsearch: Elasticsearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎,每个字段都被索引并可被搜索,可以快速存储、搜索、分析海量的数据。 全文检索是指对每一个词建立一个索引…...
Spring Boot如何实现防盗链
一、什么是盗链 盗链是个什么操作,看一下百度给出的解释:盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务提供商的…...
工作中常用springboot启动后执行的方法
前言: 工作中难免会遇到一些,程序启动之后需要提前执行的需求。 例如: 初始化缓存:在启动时加载必要的缓存数据。定时任务创建或启动:程序启动后创建或启动定时任务。程序启动完成通知:程序启动完成后通…...
力扣-图论-3【算法学习day.53】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程(例如想要掌握基础用法,该刷哪些题?)我的解析也不会做的非常详细,只会提供思路和一些关键点,力扣上的大佬们的题解质量是非…...
Linux上的C语言编程实践
说明: 这是个人对该在Linux平台上的C语言学习网站笨办法学C上的每一个练习章节附加题的解析和回答 ex1: 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后运行它看看发生了什么。 vim ex1.c打开 ex1.c 文件。假如我们删除 return 0…...
芝法酱学习笔记(1.3)——SpringBoot+mybatis plus+atomikos实现多数据源事务
一、前言 1.1 业务需求 之前我们在讲解注册和登录的时候,有一个重要的技术点忽略了过去。那就是多数据源的事务问题。 按照我们的业务需求,monitor服务可能涉及同时对监控中心数据库和企业中心数据库进行操作,而我们希望这样的操作在一个事…...
ClawGuard:为Clawdbot AI智能体打造的安全监控与熔断防护系统
1. 项目概述:ClawGuard 是什么,以及为什么你需要它如果你正在使用或开发基于 Clawdbot 框架的 AI 智能体,那么“安全”和“可控”这两个词,大概率已经在你脑海里盘旋过无数次了。我接触过不少团队,从最初的兴奋于 AI 智…...
Codex入门10-Goal自主任务(进阶必学:设定目标就不管了,AI自己干活到完成)
🎯 本文目标 掌握 /goal 持久化任务系统,让 Codex 自主完成复杂的大型工作。 🤔 /goal 和普通对话有什么区别? 对比 普通对话 /goal 任务 交互方式 一问一答 设定目标后AI自主工作 持久性 关终端就中断 关终端也能继续 适合任务 小任务、即时反馈 大任务、长期执行 计划…...
Python网络爬虫实战:构建自动化招聘信息聚合工具JobClaw
1. 项目概述与核心价值最近在折腾一个挺有意思的开源项目,叫 JobClaw。这名字起得挺形象,“Claw”是爪子的意思,合起来就是“工作抓取器”。简单来说,它是一个帮你从各大招聘网站上自动抓取、聚合和分析职位信息的工具。对于正在找…...
FPGA单粒子翻转(SEU)原理、影响与防护策略全解析
1. 是什么在“骚扰”我的FPGA?——深入解析单粒子翻转作为一名在电子设计领域摸爬滚打了十几年的工程师,我经手过不少高可靠性的项目,从地面通信基站到近地轨道的载荷设备都有涉及。在这些项目中,有一个幽灵般的问题总是如影随形&…...
利用Taotoken的API兼容性将现有基于OpenAI的应用快速迁移上线
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 利用Taotoken的API兼容性将现有基于OpenAI的应用快速迁移上线 对于已经投入开发并依赖OpenAI官方API的应用,切换到新的…...
对比体验Taotoken平台不同大模型在创意生成上的差异
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 对比体验Taotoken平台不同大模型在创意生成上的差异 对于内容创作者而言,大模型是激发灵感、提升效率的得力工具。然而…...
大模型“开源”迷思:小白与程序员必看,收藏这份避坑指南!
大模型“开源”并非简单代码开放,涉及权重、数据、训练方法等多维度。文章详解不同协议(如MIT、Apache-2.0、GPL、AGPL等)对企业商业化的影响,强调理解协议边界至关重要。从开放权重到真正开源,企业需关注协议对商用、…...
【实战篇】Nginx反向代理负载均衡:从轮询到权重的策略演进
1. 反向代理与负载均衡基础认知 第一次接触Nginx的反向代理功能时,我盯着配置文件里的proxy_pass参数看了半天。这行看似简单的配置,背后其实隐藏着现代分布式系统的核心设计思想。想象一下这样的场景:当你在电商网站点击"立即购买"…...
Midjourney咖啡印相落地实操:3步完成色彩校准、5种纸张适配方案与打印机ICC配置清单
更多请点击: https://intelliparadigm.com 第一章:Midjourney Coffee印相技术原理与工艺边界 Midjourney Coffee印相并非官方命名的技术标准,而是社区对一类融合生成式AI图像(如Midjourney输出)与传统咖啡渍显影工艺的…...
ClawRouter:智能流量路由与内容处理工具的设计与实践
1. 项目概述与核心价值 最近在折腾一些网络相关的自动化任务时,发现了一个挺有意思的项目,叫 ClawRouter。乍一看这个名字,可能会联想到“爪子”和“路由器”,感觉像是某种抓取工具和网络设备的结合体。实际上,这个项目…...
