细节复盘3 （文本折叠、文本尾行缩进截断）2020-8-2

今天被一个问题搞的很惨，用了很多时间，查了很多资料，都没啥特别好的放法，无语下，按自己的逻辑写了一下。

所要实现的功能如下图：一是文本切换折叠；二是折叠状态下，尾行文本不显示全行。

HTML结构：

<!-- 作品介绍 vue -->
<div :class="bool?'readingBriefIntro':'introCut'"><p>{{bool?introDetail.intro:introDetail.intro.substr(0,44)+'...'}}</p><p>{{introDetail.author}}</p><!-- 标签，elementui Popover 弹出框 --><el-popover   v-for="(item,index) in introDetail.talk" :key="index" placement="top" title="" width="200" trigger="click" :content="item.value"><el-button slot="reference">{{item.name}}</el-button></el-popover><!--上下折叠按钮 --><button :class="bool?'detailOpen':'detailClose'" @click="openclose()"></button>
</div>

逻辑处理：
通过一个变量进行控制

每次点击右下角折叠按钮，触发点击事件，切换bool的值

每次bool的值变化，折叠按钮的样式（反转方向）就会进行更改；同样，容器的样式（高度高低）也会修改

同时，容器里的第一个元素，因为是要展示出来的，随着容器高度的变化，我们也是通过判断bool的值来动态更改显示的内容。如下，在收缩时，从后台获取到的字符串就被截取一定的字数，然后加上“…”。

题外话：
1、我使用了计算属性里的一个方法，我给它命名为introDetail，来获取vuex中的数据（数据请求通过vuex的actions来处理，然后通过mutations来赋值给state里的变量comicMainData）

2、相关的css样式：

/* 作品介绍 */
.readingBriefIntro {box-sizing: border-box;margin-top: .6rem;padding: 0 .15rem;width: 100%;height: 3.34rem;/* background: gold; */color: #5a5a5a;font-size: .14rem;line-height: 1.5;text-align: justify;position: relative;
}
.introCut{box-sizing: border-box;margin-top: .6rem;padding: 0 .15rem;width: 100%;height: .4rem;color: #5a5a5a;font-size: .14rem;line-height: 1.5;text-align: justify;position: relative;overflow: hidden;/* 本来想用多行省略号的，但发现需求的尾行效果是不全显示，就不能这样写了display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all; */
}.readingBriefIntro p:nth-child(2) {margin: .1rem 0;
}.readingBriefIntro button {/* display: inline-block; */height: .27rem;line-height: .27rem;padding: 0 .129rem;border: .01rem solid #d3d3d3;border-radius: .3rem;text-align: center;white-space: nowrap;margin-right: .1rem;
}.readingBriefIntro .detailOpen {background: url(http://m.migudm.cn/images/detail/arrow.png) no-repeat left center;width: .14rem;height: .14rem;background-size: contain;padding: 0;border: 0;position: absolute;bottom: .2rem;right: 0.15rem;transform: rotateZ(180deg);
}.detailClose {background: url(http://m.migudm.cn/images/detail/arrow.png) no-repeat left center;width: .14rem;height: .14rem;background-size: contain;padding: 0;border: 0;position: absolute;right: 0.15rem;top: .22rem;
}

细节复盘3 （文本折叠、文本尾行缩进截断）2020-8-2相关推荐

【Linux脚本-sed命令在文本首行和尾行插入空行】
@[TOC]Linux脚本-sed命令在文本首行和尾行插入空行 Linux脚本-sed命令在文本首行和尾行插入空行演示如下: 首先创建需要操作的文本文件 //create a file contai ...
首行缩进2字符，CSS文本外观之文本缩进
text-indent属性 text-indent: 20px; --缩进20px text-indent: 2em; --2em 则是缩进当前元素 2个文字大小的距离代码: <!DOCTYP ...
首行缩进和悬挂缩进的区别
首行缩进和悬挂缩进是常见的段落缩进方式,用于调整段落的排版样式.它们可以在文本处理软件中应用于段落或选定的文本部分. 首行缩进:首行缩进是指将段落的第一行向内缩进一定的距离,以使段落的其余行保持靠近页 ...
android webservices 返回多行多列数据,Pandas: 如何将一列中的文本拆分为多行？
本文和大家分享的主要是使用 Pandas 将一列中的文本拆分为多行相关内容,一起来看看吧,希望对大家学习 Pandas 有所帮助. 在数据处理过程中,经常会遇到以下类型的数据: 在同一列中,本该分别 ...
《Linux指令从入门到精通》——4.3　Linux下全屏幕文本编辑器的命令行方式
本节书摘来自异步社区<Linux指令从入门到精通>一书中的第4章,第4.3节,作者:宋磊 , 宋馥莉 , 雷文利著,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
html代码文本框首行缩进,如何将HTML页面中的文本设置首行缩进
text-indent属性介绍属性值单位描述 em 比如:1em 就代表缩进1个字,2em缩进2个字...... 由于简单我就不过多的介绍了直接上代码了哦,注意:text-indent属性的值支持 ...
iOS 9应用开发教程之多行读写文本ios9文本视图
iOS 9应用开发教程之多行读写文本ios9文本视图多行读写文本--ios9文本视图文本视图也是输入控件,与文本框不同的是,文本视图可以让用户输入多行,如图2.23所示.在此图中字符串" ...
【数据平台】pandas将一列中的文本拆分成多行
1.场景:如下图,要将cont中的字符串分割出词汇并单独成一行 2.一列中的文本拆分成多行的效果: 3.实现方法: 方法一: df=df.drop('cont', axis=1).join(df['c ...
文本编辑器中命令行参数的应用
文章目录 1 文本编辑器中命令行参数的应用 1 文本编辑器中命令行参数的应用我们要知道对于每一个应用程序我们都能够接收命令行参数,那么对于GUI系统中命令行参数如何传递到应用程序呢? 主要有如下两种 ...
shell 删除文本中的重复行(sort+uniq/awk/sed) (方法=效率啊)
From: http://churuimin425.blog.163.com/blog/static/341298772012230112956712/ 删除文本中的重复行(sort+uniq/awk ...

细节复盘3 （文本折叠、文本尾行缩进截断）2020-8-2

细节复盘3 （文本折叠、文本尾行缩进截断）2020-8-2相关推荐

最新文章

热门文章