vue多行显示文字展开
这几天项目里面有一个需求,多行需要进行展开文字,类似实现这种效果

难点就在于页面布局

一开始就跟无头苍蝇似的,到处百度 ,后面发现网上的都不适合自己,最终想到了解决方案
下面是思路:
需求是超过3行,进行显示展开的文字,因为行高是知道的,所以我是知道3行的高度,比如我的项目是114px,
第一件事是获取ul的高度let height = this.$refs.kaimenhong.clientHeight
第二件事是判断 上面的height是否大于114,

大于114,那么就显示展开 ,同时ul的高度设置为114
但是在写的过程中,遇到了一个问题,就是无法获取height,原因是在mounted生命周期的时候,获取this.r e f s ,因为 dom 还未完全加载,所以你是拿不到的,update阶段则是完成了数据更新到 dom 的阶段 ( 对加载回来的数据进行处理 ) ,此时,就可以使用this.$refs,因为dom还未完全加载,所以你是拿不到的, update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理),此时,就可以使用this.$refs,因为dom还未完全加载,所以你是拿不到的, update阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理),此时,就可以使用this.refs了。如果写在methods中,那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用,这样就可以了
最终代码截图如下,我是写在methods中的

over
相关文章:
vue多行显示文字展开
这几天项目里面有一个需求,多行需要进行展开文字,类似实现这种效果 难点就在于页面布局 一开始就跟无头苍蝇似的,到处百度 ,后面发现网上的都不适合自己,最终想到了解决方案 下面是思路: 需求是超过3行&a…...
SpringBoot:SpringBoot 的底层运行原理解析
声明原文出处:狂神说 文章目录1. pom.xml1 . 父依赖2 . 启动器 spring-boot-starter2. 主启动类的注解1. 默认的主启动类2. SpringBootApplication3. ComponentScan4. SpringBootConfiguration5. SpringBootApplication 注解6. spring.factories7. 结论8. 简单图解3…...
哪些场景会产生OOM?怎么解决?
文章目录 堆内存溢出方法区(运行时常量池)和元空间溢出直接内存溢出栈内存溢出什么时候会抛出OutOfMemery异常呢?初看好像挺简单的,其实深究起来考察的是对整个JVM的了解,而这个问题从网上可以翻到一些乱七八糟的答案,其实在总结下来基本上4个场景可以概括下来。 堆内存溢出…...
金三银四、金九银十 面试宝典 Spring、MyBatis、SpringMVC面试题 超级无敌全的面试题汇总(超万字的面试题,让你的SSM框架无可挑剔)
Spring、MyBatis、SpringMVC 框架 - 面试宝典 又到了 金三银四、金九银十 的时候了,是时候收藏一波面试题了,面试题可以不学,但不能没有!🥁🥁🥁 一个合格的 计算机打工人 ,收藏夹里…...
JAVA开发(Spring框架详解)
javaweb项目几乎已经离不开spring框架了,spring 是一个典型的分层架构框架,它包含一系列的功能并被分为多个功能模块,springboot对spring框架又做了一层封装,以至于很多人对原来的spring框架越来越不了解。 要谈Spring的历史&…...
自学大数据第八天~HDFS命令(二)
嗨喽,好久不见,最近抽空复习了一下hadoop,书读百遍,其意自现这句话还真是; 继续学习HDFS常用命令 改变文件 拥有者~chown hdfs dfs -chown -R hadoop /user/hadoop使用 -R 将使改变在目录结构下递归进行。命令的使用者必须是超级用户。 改变文件所属组-chgrp hdfs dfs -chgr…...
贪心算法(几种常规样例)
贪心算法(几种常规样例) 贪心算法,指在对问题进行求解的时候,总是做出当前看来是最好的选择。也就是说不从整体上最优上考虑,算法得到的结果是某种意义上的局部最优解 文章目录贪心算法(几种常规样例&…...
【数据结构】基础知识总结
系列综述: 💞目的:本系列是个人整理为了数据结构复习用的,由于牛客刷题发现数据结构方面和王道数据结构的题目非常像,甚至很多都是王道中的,所以将基础知识进行了整理,后续会将牛客刷题的错题一…...
宣布推出 .NET 社区工具包 8.1!
我们很高兴地宣布 .NET Community Toolkit 8.1 版正式发布!这个新版本包括呼声很高的新功能、bug 修复和对 MVVM 工具包源代码生成器的大量性能改进,使开发人员在使用它们时的用户体验比以往更好! 就像在我们之前的版本中一样,我…...
ChatGPT解开了我一直以来对自动化测试的疑惑
目录 前言 与ChatGPT的对话 什么是自动化测试,我该如何做到自动化测试,或者说需要借助什么工具可以做到自动化测试? 自动化测试如何确保数据的准确性 自动化测试是怎么去验证数据的 如何通过断言验证数据 自动化测试有哪些验证工具可以验证数据 总结 前言…...
十大经典排序算法(上)
目录 1.1冒泡排序 1. 算法步骤 3.什么时候最快 4. 什么时候最慢 5.代码实现 1.2选择排序 1. 算法步骤 2. 动图演示 3.代码实现 1.3 插入排序 1. 算法步骤 2. 动图演示 3. 算法实现 1.4 希尔排序 1. 算法步骤 2. 动图演示 3.代码实现 1.5 归并排序 1. 算法步骤 2…...
如何从 MySQL 读取 100w 数据进行处理
文章目录 场景常规查询流式查询MyBatis 流式查询接口非流式查询和流式查询区别游标查询场景 大数据量操作的场景大致如下: 1、 数据迁移; 2、 数据导出; 3、 批量处理数据; 在实际工作中当指定查询数据过大时,我们一般使用分页查询的方式一页一页的将数据放到内存处理。…...
【数据降维-第2篇】核主成分分析(KPCA)快速理解,及MATLAB实现
一篇介绍了PCA算法的快速理解和应用,本章讲一下KPCA。KPCA方法与PCA方法一样,是有着扎实的理论基础的,相关理论在论文上以及网络上可以找到大量的材料,所以这篇文章还是聚焦在方法的快速理解以及应用上,此外还会对同学…...
Python+ChatGPT实战之进行游戏运营数据分析
文章目录一、数据二、目标三、解决方案1. DAU2. 用户等级分布3. 付费率4. 收入情况5. 付费用户的ARPU最近ChatGPT蛮火的,今天试着让ta写了一篇数据分析实战案例,大家来评价一下!一、数据 您的团队已经为您提供了一些游戏数据,包括…...
Java每日一练(20230313)
目录 1. 字符串统计 ★ 2. 单词反转 ★★ 3. 俄罗斯套娃信封问题 ★★★ 🌟 每日一练刷题专栏 C/C 每日一练 专栏 Python 每日一练 专栏 Java 每日一练 专栏 1. 字符串统计 编写一个程序,对于输入的一段英语文本,可以统计&#…...
国内ChatGPT日趋成熟后,可以优先解决的几个日常小问题
现在ChatGPT的发展可谓如日中天,国内很多大的公司例如百度、京东等也开始拥抱新技术,推出自己的应用场景,但可以想象到的是,他们必定利用这个新技术在巩固自己的现有应用场景,比如某些客服,你都不用想&…...
业内人士真心话,软件测试是没有前途的,我慌了......
我在测试行业爬模滚打7年,从点点点的功能测试到现在成为高级测试,工资也翻了几倍。个人觉得,测试的前景并不差,只要自己肯努力。 我刚出来的时候是在鹅厂做外包的功能测试,天天点点点,很悠闲,点…...
哈佛与冯诺依曼结构
1. 下图是典型的冯诺依曼结构 2. CPU分为三部分:ALU运算单元,CU控制单元,寄存器组。 3. 分析51单片机为何能使用汇编进行编程 51指令集(Instruction Set)是单片机CPU能够执行的所有指令的集合。在编写51单片机程序时&a…...
传输安全HTTPS
为什么要有 HTTPS 为什么要有 HTTPS?简单的回答是:“因为 HTTP 不安全”。HTTP 怎么不安全呢? 通信的消息会被窃取,无法保证机密性(保密性):由于 HTTP 是 “明文” 传输,整个通信过…...
Docker--(六)--Docker资源限制
前言系统压力测试Cpu资源限制Mem资源限制IO 资源限制【扩展】 1.前言 在使用 Docker 运行容器时,一台主机上可能会运行几百个容器,这些容器虽然互相隔离,但是底层却使用着相同的 CPU、内存和磁盘资源。如果不对容器使用的资源进行限制&#x…...
仅剩72小时可获取的2026终极对比手册(含Prompt工程调优参数表、国产信创环境适配补丁包、等保2.0三级适配验证清单):ChatGPT与Gemini,你选错一个就多花237万年运维成本
更多请点击: https://intelliparadigm.com 第一章:ChatGPT与Gemini 2026年全面对比的基准定义与评估范式 为确保跨模型评估的科学性与可复现性,2026年主流AI基准已统一采用**多维动态评估范式(MDEP)**,该范…...
AI创业从模型竞赛到场景落地:2026年生态爆发与实战指南
1. 从HumanX 2026归来:我眼中的AI创业生态爆发图景刚从HumanX 2026的会场回来,整个人还沉浸在那种高速迭代、热气腾腾的氛围里。如果你问我最大的感受是什么,我会毫不犹豫地说:AI创业的“场景化落地”竞赛,已经进入了白…...
别再只会用Matplotlib画基础热力图了!这5个高级定制技巧让你的图表更专业
别再只会用Matplotlib画基础热力图了!这5个高级定制技巧让你的图表更专业 热力图是数据可视化中最直观的展示方式之一,但大多数数据分析师止步于基础用法。当你的图表需要出现在学术论文、商业报告或投资人演示中时,默认参数生成的热力图往往…...
从零构建AI智能体编排平台:TalonOS架构解析与实战指南
1. 项目概述:从零构建一个自主智能体编排平台如果你正在寻找一个能将多个AI智能体像交响乐团一样组织起来,协同完成复杂任务的解决方案,那么你很可能已经接触过或听说过TalonOS。这个项目,或者说这个愿景,代表了一种全…...
洛谷 P1305:新二叉树 ← DFS + 字符索引数组 + map
【题目来源】 https://www.luogu.com.cn/problem/P1305 【题目描述】 输入一串二叉树,输出其前序遍历。 【输入格式】 第一行为二叉树的节点数 n。(1≤n≤26) 后面 n 行,第一个字母为节点,后两个字母分别为其左右儿子。特别地,…...
基于Vue 3与Express的私有化ChatGPT Web客户端部署指南
1. 项目概述与核心价值最近在折腾一个自用的AI对话工具,核心需求很简单:想在一个自己完全掌控的界面上,方便地使用大语言模型,比如ChatGPT的API。市面上虽然有很多现成的网页应用,但要么功能太臃肿,要么部署…...
告别龟速下载!用这个离线驱动包5分钟搞定DBeaver连接所有数据库
5分钟极速配置:DBeaver全量离线驱动包实战指南 每次打开DBeaver准备连接新数据库时,那个转个不停的驱动下载进度条是不是让你抓狂?尤其是在企业内网环境或网络不稳定时,等待驱动下载的过程简直能让人把咖啡喝成凉茶。今天要分享的…...
从仿真到论文图表:手把手教你用FDTD参数扫描和Matlab处理WO3薄膜光学数据
从仿真到论文图表:FDTD参数扫描与Matlab数据可视化全流程解析 在光电材料研究中,WO₃薄膜因其优异的电致变色特性备受关注。当我们需要系统研究薄膜厚度对光学性能的影响时,FDTD Solutions的参数扫描功能配合Matlab的数据处理能力,…...
ReAct不是格式游戏!揭秘让LLM从“文本生成器”变身“决策引擎”的底层逻辑
文章指出,ReAct常被误解为高级Prompt工程,但核心是闭环执行架构。真正的ReAct强调“决策-执行-反馈”循环,而非固定的Thought/Action/Observation格式。工程代码定义流程,模型生成内容,实现真实工具调用与反馈闭环。文…...
CANN/asc-devkit单核形状API文档
SetSingleShape 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言,原生支持C和C标准规范,主要由类库和语言扩展层构成,提供多层级API,满足多维场景算子开发诉求。 项目地址: https://gitcode…...
