How to read the full text in vue-JS Tutorial-php.cn

How to read the full text in vue

亚连

Release： 2018-06-14 17:51:42

Original

2930 people have browsed it

Below I will share with you an example of Vue implementing the function of clicking to read the full text of an article that is too long. It has a good reference value and I hope it will be helpful to everyone.

Directly upload the code:

html:

<p class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
  <p v-html="content"></p>
</p>
<p class="contentToggle" v-if="contentStatus" @click="contentStatus=!contentStatus">阅读全文</p>

Copy after login

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;
 }

Copy after login

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;
 }
 },
}

Copy after login

The effect is as shown:

##Implementation ideas and points to note:

1. To obtain the height of the content, you must wait until the dom is loaded and add a setTimeout function to mounted to ensure that the height of the content is truly obtained.

2. When the height of the content is higher than When you set the height to be displayed by yourself, you can only limit it to the height you want to display. Add a class to solve the problem. Pay attention to overflow: hidden;

The above is what I compiled for everyone. I hope it will be used in the future. Helpful to everyone.

How to set the background color for a separate page in Vue-cli

Refresh and tab in vue Switch

Detailed explanation of introducing elementUI components into the vue project

The above is the detailed content of How to read the full text in vue. For more information, please follow other related articles on the PHP Chinese website!