首页 > 其他分享 >vue多行文本显示省略号加展开收起按钮

vue多行文本显示省略号加展开收起按钮

时间:2023-06-02 14:15:29浏览次数:53  
标签:多行 showContent vue 省略号 lineRows value length 按钮 文本

getClientRects()获取文本的行数和宽高等信息,只能获取行内元素的   nextTick(() => {         const lineRows = document.querySelector('.abc').getClientRects();         // 如果行数超出2||行数是2&&最后一行宽度超过dom宽度-展开收起按钮的width就是多了,要显示展开收起的按钮         if(lineRows.length > 2 || (lineRows.length == 2 && lineRows[1].width > document.querySelector('.abc').offsetWidth - 66)) {      // 挨个减少文本字数 然后检测是否超出             showContent.value = showContent.value.substr(0, showContent.value.length - 1)             getText()         }else{             showContent.value = showContent.value + "..."         } })

标签:多行,showContent,vue,省略号,lineRows,value,length,按钮,文本
From: https://www.cnblogs.com/guodadan/p/17451609.html

相关文章

  • Vue中的APP与js的对象字面量
    JavaScript的对象字面量是一种方便创建和初始化对象的语法。它允许您直接在代码中定义对象,而无需使用类或构造函数。对象字面量使用大括号{}括起来,并包含零个或多个键值对。以下是JavaScript对象字面量的常见用法和特点:键值对:对象字面量中的键值对由键和值组成,使用冒号:分隔。键......
  • SpringBoot Vue3 Element Plus 打造分布式存储系统
    SpringBoot+Vue3+ElementPlus打造分布式存储系统download:3w51xuebccom配置IDEA热部署-devtools开发过程中频繁修改代码,每次都需要重新编译,部署,重启服务器,这无疑极大浪费了我们的时间。解决这个问题的方法就是使用热部署技术。本篇文章将介绍如何在IDEA中使用devtools实现热部署......
  • 黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023版
    黑马Vue3+ElementPlus+Pinia小兔鲜电商项目2023版download:3w51xuebccom合式API-watch-基本使用和立即执行合式API是一个用于构建可靠、模块化、灵活的RESTfulAPI的框架。它提供了许多实用的功能,其中包括watch机制。在本篇文章中,我们将介绍合式API的watch机制的基本使用和立......
  • 毕业设计管理系统|基于SSM+VUE实现毕业设计管理系统
    作者主页:编程指南针作者简介:Java领域优质创作者、、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路 关注作者有好处文末获取源码 项目编号:BS-GX-063一,环境介绍语言环境:Java: jdk1.8数据库:Mysql:mys......
  • 蛋糕网上销售系统|基于Springboot+Vue开发实现网上蛋糕系统
    作者主页:编程指南针作者简介:Java领域优质创作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助文末获取源码 项目编号:BS-SC-051前言:伴随着互联网的“低门槛”和人们金钱消费的数字化转变,网络购物奕然已经成为了时代......
  • vue-router 4.1.4版本以上,打开新页面并隐式传参
    情景框架:Vue3+Vite4+VueRouter4.1.6需求:现需要实现点击打开新页面,并把一些数据传过去限制:数据量较大,有一定私密性,不适合用query传递;需要从session中获取token判断访问权限,因此需要用router.resolve携带session打开新页面使用params传参在4.1.4以上版本被抛弃了-->vu......
  • Vue-自定义icon实现
    在项目中引入了element-ui之后,发现其内置的icon有限,无法满足项目的需求,因此需自定义icon来实现需求。在vue项目的components下新建SvgIcon目录,在SvgIcon目录下新建index.vue插入代码:<template><svgclass="svg-icon"aria-hidden="true"><use:xlink:href="ic......
  • vue基础用法-内容渲染指令
    1.指令的概念指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue中的指令按照不同的用途可以分为如下6大类:内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令注意:指令是vue开发中最基础、最常用、最简单的知识......
  • 基于JAVA的springboot+vue财务管理系统,附源码+数据库+论文+PPT
    1、项目介绍随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,财务管理系统就是信息时代变革中的产物之一。任何系统都要遵循系统设计的基......
  • vue系列---【vue 使用decimal.js 解决小数相加合计精确度丢失问题】
    使用npm安装decimal.js库npminstalldecimal.js2.在Vue组件中引入该库importDecimalfrom'decimal.js';3.使用示例footerMethod({columns,data}){letsumArr=[];columns.map((column,columnIndex)=>{if(columnIndex===0){su......