快捷導(dǎo)航

vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開剩余數(shù)據(jù)實(shí)例

更新時(shí)間：2019年05月05日 10:56:58 作者：ygy211715

這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開剩余數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

說(shuō)下我在工作中遇到的這個(gè)需求

1：頁(yè)面上的菜單選項(xiàng)，選項(xiàng)內(nèi)容是后臺(tái)接口返回的數(shù)據(jù)，現(xiàn)在的需求是當(dāng)選項(xiàng)的內(nèi)容超出一行，在這行的右面顯示更多，點(diǎn)擊更多，顯示剩下的選項(xiàng)的內(nèi)容

看下效果圖

這是展開的效果圖

下面先看下我的html部分代碼

<div :class="bussinessType?'show':'hidde'">
					<dl>
						<dt>業(yè)務(wù)類型:</dt>
						<dd ref="bussinessTypeRef">
							<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="" 
							@click="getchildMenu($event)" class="active">全部</a>
							<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :name="item.code" v-for="item in projectType" 
							@click="getchildMenu($event)">{{item.name}}</a>
						</dd>
						<i class="unfold" @click="bussinessType = !bussinessType" 
						v-show="bussinessHeight>40">
			            {{ bussinessType ? '收起' : '更多'}}
			            <Icon :type="bussinessType?'chevron-down':'chevron-up'" ></Icon>
	          </i>
					</dl>
				</div>

說(shuō)下原理show就是展開的時(shí)候使用的樣式名稱，hide是顯示一行是使用的樣式（主要就是控制容器高度）

.show{
        height: auto;
        border-bottom: 1px solid #ebebeb;
    }
    .hidde{
        height: 40px;
        overflow: hidden;
        border-bottom: 1px solid #ebebeb;
    }

這是我展示的菜單的部分，主要的思路是看這部分的高度是不是超出一行的高度，如果是超出一行的高度，則讓dl外的div默認(rèn)使用hide的樣式

那么問(wèn)題來(lái)了，怎么知道展示菜單的dd部分的高度超出一行了呢？

這就需要使用vuejs的watch來(lái)實(shí)現(xiàn)了

首先，watch監(jiān)聽(tīng)ref是bussinessTypeRef的組件的高度（內(nèi)容多的話自然dd容易會(huì)被撐高），這時(shí)候與一行的高度（我這里設(shè)置的是40）作比較，如果超出，就讓更多的文字按鈕顯示出來(lái)。下面是監(jiān)聽(tīng)dd內(nèi)容高度的watch方法

 projectType: function () {
	      this.$nextTick(function(){
	        let cur = this.$refs['bussinessTypeRef'];
	        if(cur){
	        	this.bussinessHeight = cur.clientHeight;
	        }
	      });
	    },

這時(shí)候更多文字按鈕顯示，我們就控制dl外層的div容器，讓該容器使用hide的樣式，點(diǎn)擊更多的時(shí)候，讓控制顯示更多的變量變?yōu)橄喾吹闹?，這樣讓收起顯示出來(lái)，更多消失，同時(shí)讓外層的div容器使用show的樣式。這樣一來(lái)就實(shí)現(xiàn)了文字超出一行顯示更多，點(diǎn)擊收起的交互效果。

下面附上完整的代碼供參考

<div :class="bussinessType?'show':'hidde'">
					<dl>
						<dt>業(yè)務(wù)類型:</dt>
						<dd ref="bussinessTypeRef">
							<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="" 
							@click="getchildMenu($event)" class="active">全部</a>
							<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :name="item.code" v-for="item in projectType" 
							@click="getchildMenu($event)">{{item.name}}</a>
						</dd>
						<i class="unfold" @click="bussinessType = !bussinessType" 
						v-show="bussinessHeight>40">
			            {{ bussinessType ? '收起' : '更多'}}
			            <Icon :type="bussinessType?'chevron-down':'chevron-up'" ></Icon>
	          </i>
					</dl>
				</div>
 
 
  // 行業(yè)
    businessType: function () {
      this.$nextTick(function(){
        let cur = this.$refs['industryRef'];
        if(cur){
        	this.industryHeight = cur.clientHeight;
        }
      });
    },
.show{
		height: auto;
		border-bottom: 1px solid #ebebeb;
	}
	.hidde{
		height: 40px;
		overflow: hidden;
		border-bottom: 1px solid #ebebeb;
	}
	.list-filter {
		position: relative;
		margin-bottom: 20px;
		font-size: 14px;
	}
	
	.list-filter dl {
		overflow: hidden;
	}
	
	.list-filter dt {
		float: left;
		font-weight: 400;
		height: 40px;
		line-height: 40px;
	}
	
	.list-filter dd {
		margin-left: 30px;
		float: left;
		width: 85%;
		line-height: 40px;
		
	}
	.unfold{
		font-size: 14px;
  color: #00A971;
  cursor: pointer;
  font-style: normal;
  vertical-align: middle;
  display: inline-block;
  height: 40px;
  line-height: 40px;
	}
	.list-filter a {
		color: #333;
		display: inline-block;
		margin-right: 20px;
		padding: 0 5px;
		text-decoration: none;
		line-height: 2em;
		z-index: 0;
	}

以上所述是小編給大家介紹的vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開剩余數(shù)據(jù)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: