在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 .
使用jquery比较容易实现 , 最开始我想直接根据vuejs的语法来实现效果 , 结果失败 , 还是jq做起来简单
思路是 , 获取当前文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .
展开全文点击后更换文字内容为收起全文
在vuejs中也可以正常使用jquery , 增加一个method
displayAll(){
$(function(){
let obj=$("body").find(".mailMainIntro");
let readMore=$(".readMore");
readMore.hide();
obj.removeClass("mainIntroZhe");
obj.each(function(){
let height=$(this).height();
let text=$(this).text();
console.log(height,text);
if(height>67){
$(this).addClass("mainIntroZhe");
$(this).next().show();
}
});
readMore.unbind("click").click(function(e){
let text=$(this).text();
if(text=="展开全文"){
$(this).text("收起全文");
$(this).prev().removeClass("mainIntroZhe");
}
if(text=="收起全文"){
$(this).text("展开全文");
$(this).prev().addClass("mainIntroZhe");
}
return;
});
});
}
html部分是这样的
<el-row v-for="(item, index) in weiboList" :key="index" class="mainAccountBox">
<el-card :body-style="{ padding: '10px' }">
<el-col :span="3">
<el-avatar :size="60">
<img :src="item.img" class="image">
</el-avatar>
</el-col>
<el-col :span="21">
<div class="mainAccountList">
<div class="title">{{item.name}}</div>
<div class="mailMainIntro" v-html="item.text" >
</div>
<div class="readMore">展开全文</div>
<div class="turnWeibo" v-if="item.weibo!=null&&item.weibo.length!=0">
<div class="title">@{{item.weibo.name}}</div>
<div class="mailMainIntro" v-html="item.weibo.text"></div>
<div class="readMore">展开全文</div>
</div>
<div class="mainTime">
{{item.create_time}}
<span v-html="item.source"></span>
</div>
<div class="bottom">
<el-button type="primary" v-on:click="copySpecialTopicUrl(item.weibo_url)" class="button">复制URL</el-button>
<el-button type="primary" v-on:click="copySpecialTopicUrl('http://t.cn/'+item.short_url)" class="button">复制短URL</el-button>
<el-button type="success" class="button">推至CMS</el-button>
</div>
</div>
</el-col>
<div class="clearfix"></div>
</el-card>
</el-row>
ajax获取完数据后就执行一下displayAll方法
getWeiboList: function () {
let _this = this;
let data={};
if(this.weiboSearch != ""){
data.word=this.weiboSearch;
}
if(this.pickTime != ""){
data.dt=this.pickTime;
}
$.get('index.php?r=media/getdata',data, function (rs) {
let res= JSON.parse(rs);
_this.weiboList=res.result.rows;
_this.displayAll();
}).then(()=>{
this.getTodayNums();
});
},