小程序开发制作_vue完成文章内容过长点击阅读全

发布时间:2021-01-11 10:56 作者:jianzhan

摘要: /div div v-if="contentStatus" @click="contentStatus=!contentStatus" 阅读文章全篇 /div css:.bodyFont{.font-dpr(16px);color: #333;text-align: left;lin

     
/div div v-if="contentStatus" @click="contentStatus=!contentStatus" 阅读全文 /div

css:

.bodyFont{
 .font-dpr(16px);
 color: #333;
 text-align: left;
 line-height:58px;
 word-break:break-all;
 word-wrap:break-word;
 padding-bottom: 30px;
 height:auto;
 overflow: hidden;
 max-height: 100%;
 p{margin:16px 0 0 0;}
 .bodyHeight{
 height:5000px;
 .contentToggle{
 height:60px;
 line-height:60px;
 text-align: center;
 color:@red;
 border:1px solid @red;
 border-radius: 5px;
 .font-dpr(14px);
 margin-bottom:30px;
 }

js:

data(){
 return { 
 contentStatus:false, 
 curHeight:0,
 bodyHeight:5000
mounted(){
 setTimeout(()= {
 this.contentToggle();
 },500)
methods:{
 contentToggle(){
 this.curHeight=this.$refs.bodyFont.offsetHeight;
 if(this.curHeight this.bodyHeight){
 this.contentStatus=true;
 }else{
 this.contentStatus=false;
}

效果如图:

实现思路与注意的点:

1、获取内容的高度要等到dom加载完成之后,在mounted里加一个setTimeout函数,保证能真正获取到

2、当内容的高度高于自己设定的要展示的高度的时候,则只限定在自己要展示的高度中,加一个class解决,注意要overflow:hidden;


  • 人力智能化+VR携手并肩5

    它是一个新起信息内容內容技术性性迅速盛行的阶段,5G、人力资源智能化化、物联网网网、云计算技术技术性、VR、绝大部分据……早就渐渐地踏入了千家万家和以及大成县市的每个角

  • 小程序这么火,到底怎么

    近年来来来,手机微信微信小程序越来越越越火,早就变为很多顾客日常生活起垂直居中不能或缺的应用。比如坐车、乘地铁站站、定外卖送餐送餐、购物。因此,越来越越越大的商家

  • 想知道微信小程序怎么制

    其实不是像用于干什么商业服务,挣钱这类的。 有木有那类简单的制作方式。关键是开发设计微信小程序的那边。看官方网网文字文本文档:手机上手机微信对外开放对外开放文字文本

  • 文化教育类线上报考微信

    目前网上文化艺术文化教育快速飙升,大家争相进入到网上文化艺术文化教育生产制造制造行业来挖金,而现如今手机上手机微信手机微信微信小程序的出现也是给文化艺术文化教育生

  • 老百姓日报关心小视频怎

    现阶段,中国现有21家关键互联网视頻服务平台发布了“青少年儿童防迷恋系统软件”,完成统一规范,提高维护幅度。各种小视频服务平台都搭建了寓教于乐的优良內容池,但总产量