Vue完成数据请求后内容超出显示省略号+显示查看全文按钮

需求：

如下图，当Vue完成数据请求后，根据文章内容设置显示方式。10行以内的显示全文，不显示【查看全文】按钮；内容超过指定行数时，超出内容隐藏，末尾显示省略号并显示【查看全文】按钮。

实现

思路

在异步请求数据完成后，判断文章内容所在元素高度。根据元素高度控制元素class和按钮显示。

实践

//给文章内容元素设置ref ；绑定class样式hide_description，当hiddenText为true时有此class样式，false时不添加此class；
<pref="programDescription"v-bind:class="{hide_description: hiddenText}"
>{{ content }}</p>
//判断文章高度超出时显示按钮
<p class="show_all_box" v-if="showAllButtonStatus">//点击显示全文，设置hidden为false，显示全文<span v-if="hiddenText" @click="hiddenText = false" class="show_all"><i class="el-icon-caret-bottom"></i> &nbsp;<span>全文を表示する</span></span>//点击关闭，设置hidden为true，显示部分。<span v-else @click="hiddenText = true" class="show_all"><i class="el-icon-caret-top"></i> &nbsp;<span>閉じる</span></span></p>//在data中添加hiddenText，showAllButtonStatus参数data() {return {hiddenText: true,showAllButtonStatus: false,content : “ ”,};},
//数据请求的回调中给hiddenText赋值.then((response) => {if (response.status === 200) {if (response.data) {that.content = response.data.data;this.$nextTick(() => {//通过ref获取content元素高度，并判断高度let height = that.$refs.programDescription.clientHeight;if (height > 209) {that. hiddenText= true;} else {that. hiddenText= false;}});}}})
//hide_description样式.hide_description {display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 10;word-break: break-all;overflow: hidden;}

这里面用到了ref，操作了dom，感觉不是很妙，若有更好的实现方法，欢迎指教！

Vue完成数据请求后内容超出显示省略号+显示查看全文按钮相关推荐

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
文字内容超出两行时显示省略号
文字内容超出两行时显示省略号 <view class="newsTitle">这里是一条很长很长很长的内容 </view> 设置内容超出两行显示省略号的cs ...
Vue 发送数据请求
这边是将我之前开发的一个项目开发记录进行分享一下吧,可能写的不是很好,毕竟还只是一个在校生.只能说还是一个新手小白的开发记录吧. 有需要的可以借鉴一下,有问题哈哈也欢迎指出,毕竟发现问题才能更好的进 ...
vue之数据请求方式
vue之数据请求方式 1.vue-resource 2.axios 3.fetch-jsonp 一.vue-resource 1. 安装vue-resource 在项目根目录进行安装:cnpm ins ...
CSS文字超出部分省略号显示
文章目录[隐藏] CSS 文字超出部分省略号显示前言 CSS 文字超出部分省略号显示实现方法 CSS 文字超出部分省略号显示实现效果 CSS 文字超出部分省略号显示前言在我们开发过程中,其实有这样的 ...
html span文字超出,HTML5--div、span超出部分省略号显示
CSS省略号代码 *{ margin: 0; padding: 0; } body { padding: 10px; font-family: Arial; } #ididid { position: ...
css实现文本超出宽度省略号显示
2019独角兽企业重金招聘Python工程师标准>>> 单行文本超出宽度省略号显示 .text {width:20px;overflow:hidden;text-overfolw:e ...
文本超出部分省略号显示
uni-app 文本超出部分省略号显示今日在将文本超出部分省略号显示问题上遇到困难,从网上找到解决方法.特此记录便于日后查阅. text {overflow: hidden;text-overflo ...
CSS实现文本超过部分，超出两行，超出部分省略号显示
一行文字超过部分显示为省略号 <style> .p{width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: n ...

Vue完成数据请求后内容超出显示省略号+显示查看全文按钮

需求：

实现

思路

实践

Vue完成数据请求后内容超出显示省略号+显示查看全文按钮相关推荐

最新文章

热门文章