Vue点击展开全文，展示剩下内容。

发表于 | 分类于
字数统计: 220 | 阅读时长 ≈ 1

效果图如下

template部分

1
2
3
4
5
6
7
8
<div id="content" class="content">
  <div>
	<p>这里假装有很多很多的内容</p>
  </div>
     <div id="get_ct_more" class="get_ct_more" @click="cancel">
         <img src='../../assets/zhankai.png' class="more_bt" id="more_bt">
     </div>
   </div>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.content{
	height:800px;		/*初始要显示的高度*/
	overflow:hidden;	/*关键样式：内容会被修剪，并且其余内容是不可见的。*/
	position:relative;
}
.get_ct_more {
	height:78px;
	position:absolute;
	bottom:0;width:100%;
	background:linear-gradient(to top,#fff,rgba(255,255,255,0) 70%);
	margin:0px;
	margin-right:10px;
}
.more_bt {
	width:30px;
	height:30px;
	margin-left:auto;
	margin-bottom:-10px;
}

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14

methods:{
    cancel(){
      var btn = document.getElementById('get_ct_more');
      var obj = document.getElementById('content');
      var total_height = obj.scrollHeight;//文章总高度
      var show_height  = 800;//定义原始显示高度
      if(total_height>show_height){
        btn.style.display = 'block';
        obj.style.height = total_height + 'px';
        btn.style.display = 'none';
      }
    }
   }