vue——评论的展开全文和收起

描述：
对于评论的内容，初始规定行数（或者规定字数举例100字）显示，尾部有个“全文、收起”按钮，可以有收起展开效果；

HTML部分:

 <ul class="expert-coach-explain-wrap"><li v-for="(item, index) in coachExplainList" :key="index"><div class="personal-info-wrap"><img src="../../../static/images/lg/img-expert-head-1.png" class="personal-head" alt="头像" /><div class="personal-info-right"><div class="author-name">{{item.explainerName}}</div><div class="publish-time">2小时前</div></div></div><div class="coach-explain-wrap"><!--  {{item | explainLen}} 通过数据的filter内部判断来控制展示的字数 --><!--   v-show="item.coachExplain.length >= 111" 判断开始评论字数（此时字数界限是111），决定显不显示 “全文、收起”按钮 -->{{item | explainLen}}<a class="btn-pick-up" v-show="item.coachExplain.length >= 111"@click.stop="togglePickUp(item,$event)">{{item.isExpand?'收起':'...全文'}}</a></div><ul class="cocah-discuss-list"><li><div class="discussant-name">张丫丫 : </div><div class="discussant-content">讲的很透彻，通俗易懂。</div></li><li><div class="discussant-name">王小吃 : </div><div class="discussant-content">赞一个！</div></li></ul></li></ul>

JS部分：

<script>export default {data() {return {coachExplainList: [{explainerName: '蒋军成',coachExplain: '专家评论为贯彻落实党的十九大关于深化机构改革的决策部署，2018年3月中共中央印发《深化党和国家机构改革方案》，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局',isExpand: false //false显示收起  true 显示全文},{explainerName: '赵成',publishTime: new Date(),coachExplain: '专家评论为贯彻落实党的十九大关于深化机构改革的决策部署，2018年3月中共中央印发《深化党和国家机构改革方案》，成立负责负责网络安全和信息化委员会会，负责负责负责负责负责国家网信领域重大工作的顶层设计、总体布局总体总体总体总体',isExpand: false}]}},methods: {togglePickUp(item, e) {let target = e.target.parentNode;//点击后获取当前评论item.isExpand = !item.isExpand;//切换状态if (item.isExpand) {//true//当下全文状态target.style.height = "auto";} else {//false// 当下收起状态target.style.height = "3rem";//收起状态的容器高度//收起状态的高度}}},filters: {explainLen: function (item) {if (!item.coachExplain) return;if (item.isExpand) {//当下全文状态return item.coachExplain.substr(0, item.coachExplain.length - 1);//字符串截取} else {// 当下收起状态return item.coachExplain.substr(0, 100);//字符串截取100个字}}}}</script>

vue——评论的展开全文和收起相关推荐

vue 展开全文，收起全文
样式效果 1.展开全文 2.收起全文 html <div class="content_box"><div class="cont_top"& ...
[javascript] 实现展开全文和收起全文效果
在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 . 使用jquery比较容易实现 , 最开始我想直接根据vuejs的语法来实现效果 , 结果失败 ...
vue 点击展开显示更多点击收起部分隐藏
vue 点击展开显示更多点击收起部分隐藏要求: 只展示几条数据,其余的收起.点击显示更多时候,查看全部如下:以百度云的页面为例直接上代码: 1.html部分: <div><d ...
android 文字点击展开,仿微信朋友圈，文字展开全文，全文收起功能
android:id="@+id/tv_expand_or_fold" android:layout_width="wrap_content" android: ...
仿微信朋友圈，文字展开全文，全文收起功能
简单操作4步即可实现文字展开收起功能: 1.布局写2个Textview 一个是内容一个是按钮(收起和全文) <TextView android:layout_marginTop="@ ...
javascript实现评论内容展开、收起（默认收起）
html: <div class="teste">因国际贸易担忧情绪和美国制造业PMI进一步衰退影响,周二黄金出现了近20美元的上涨,并收回了1550美元关口.同时有消 ...
使用Selenium实现微博爬虫：预登录、展开全文、翻页
一.区分动态爬虫和静态爬虫 1.静态网页静态网页是纯粹的HTML,没有后台数据库,不含程序,不可交互,体量较少,加载速度快.静态网页的爬取只需四个步骤:发送请求.获取相应内容.解析内容及保存数据. ...
python 爬取微博展开全文数据 BeautifulSoup
最近,被逼无奈开始自学python爬虫.爬取微博网页版话题下的发布微博内容数据,发现有的微博需要点击展开全文按钮才能获得全文数据,否则只有部分数据.探索了一下发现大多都是selenium+python ...
Android 实现仿微信朋友圈全文、收起的功能
一.测试实现: 二.准备工作 1.RecyclerView的适配器ExpandFoldTextAdapter.java public class ExpandFoldTextAdapter exte ...

vue——评论的展开全文和收起

vue——评论的展开全文和收起相关推荐

最新文章

热门文章