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

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

http://www.lryc.cn/news/39679.html

相关文章:

  • SpringBoot:SpringBoot 的底层运行原理解析
  • 哪些场景会产生OOM?怎么解决?
  • 金三银四、金九银十 面试宝典 Spring、MyBatis、SpringMVC面试题 超级无敌全的面试题汇总(超万字的面试题,让你的SSM框架无可挑剔)
  • JAVA开发(Spring框架详解)
  • 自学大数据第八天~HDFS命令(二)
  • 贪心算法(几种常规样例)
  • 【数据结构】基础知识总结
  • 宣布推出 .NET 社区工具包 8.1!
  • ChatGPT解开了我一直以来对自动化测试的疑惑
  • 十大经典排序算法(上)
  • 如何从 MySQL 读取 100w 数据进行处理
  • 【数据降维-第2篇】核主成分分析(KPCA)快速理解,及MATLAB实现
  • Python+ChatGPT实战之进行游戏运营数据分析
  • Java每日一练(20230313)
  • 国内ChatGPT日趋成熟后,可以优先解决的几个日常小问题
  • 业内人士真心话,软件测试是没有前途的,我慌了......
  • 哈佛与冯诺依曼结构
  • 传输安全HTTPS
  • Docker--(六)--Docker资源限制
  • 消息队列总结及案例
  • 通过WiFi连接adb调试
  • 【蓝桥杯-筑基篇】常用API 运用(1)
  • 想要成为高级网络工程师,只需要具备这几点
  • c++ 每日十问3-处理数据
  • 【MySQL】实验一 数据定义
  • 17.电话号码的字母组合(深度递归遍历解决经典老题)
  • Python 基础教程【1】:Python介绍、变量和数据类型、输入输出、运算符
  • 【RPC】Apache Thrift系列详解 - 概述与入门
  • class03:MVVM模型与响应式原理
  • [Spring学习]08 @Resource和@Autowired注解的区别