Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開收起的處理的實(shí)現(xiàn)方法
文字比較難解釋,直接看圖應(yīng)該就懂是要做什么了。
需求
工作中遇到的,需求就是超過四行得有個展開按鈕,點(diǎn)擊展開顯示所有內(nèi)容,不超過四行的話就不需要這個按鈕并顯示所有內(nèi)容。
思路首先得判斷文本自否超過四行,因?yàn)檫@些一般都是是前端異步請求然后后端發(fā)送過來,在組長的指導(dǎo)下,使用了 Vue 中的 nextTick 來監(jiān)聽 DOM 中是數(shù)據(jù)變化。接下來主要是 css 上的思路,其實(shí)上圖可以分為兩部分,如下圖,標(biāo)號1的部分展示前面三行,標(biāo)號為2的部分會根據(jù)1的行數(shù)判斷縮進(jìn)的大小,然后展示第四行。最后通過背景色的控制讓兩者看上去是一段文字。
代碼
核心代碼是中間那部分,其他的不用關(guān)注
<template> <div> <div style="text-align: center">{{title}}</div> <div class="top-prove">為了證明樓下的那貨不會對我造成影響</div> <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :title="introduce" ref="desc"> <span class="merchant-desc" v-if="introduce"> {{introduce}} </span> <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton"> <p>{{exchangeButton ? '展開' : '收起'}}</p> </div> </div> </div> <div class="bottom-prove">為了證明樓上的那貨不會對我造成影響</div> <div class="change-buttom"> <div class="long" @click="tryLong">點(diǎn)這試試一段比較長的文字</div> <div class="short" @click="tryShort">點(diǎn)這試試一段比較短的文字</div> </div> </div> </template> <script> export default { name: 'Spread', data () { return { title: '演示展開收起', introduce: '', // 是否展示所有文本內(nèi)容 showTotal: true, // 顯示展開還是收起 exchangeButton: true, // 是否顯示展開收起按鈕 showExchangeButton: false, rem: '' }; }, mounted () { this.init(); }, methods: { showTotalIntro () { console.log(this.showTotal); this.showTotal = !this.showTotal; this.exchangeButton = !this.exchangeButton; }, getRem () { console.log('getRem'); const defaultRem = 16; let winWidth = window.innerWidth; console.log('winWidth:' + winWidth); let rem = winWidth / 375 * defaultRem; return rem; }, init () { this.introduce = '擁有財(cái)富、名聲、權(quán)力,這世界上的一切的男人--哥爾·D·羅杰,在被行刑受死之前說了一句話,讓全世界的人都涌向了大海?!跋胍业膶毑貑??如果想要的話,那就到海上去找吧,我全部都放在那里?!保澜玳_始迎接“大海賊時(shí)代”的來臨。擁有財(cái)富、名聲、權(quán)力,這世界上的一切的男人 “海賊王”哥爾·D·羅杰,在被行刑受死之前說了一句話,讓全世界的人都涌向了大海?!跋胍业膶毑貑??如果想要的話,那就到海上去找吧,我全部都放在那里。”,世界開始迎接“大海賊時(shí)代”的來臨。'; }, tryLong () { let longIntroduce = 'Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí),Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。Vue (讀音 /vjuː/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是,Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí),Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。'; if (this.introduce !== longIntroduce) { this.showExchangeButton = false; this.showTotal = true; this.introduce = longIntroduce; } }, tryShort () { let shortIntroduce = 'Vue (讀音 /vjuː/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。'; if (this.introduce !== shortIntroduce) { this.showExchangeButton = false; this.showTotal = true; this.introduce = shortIntroduce; } } }, watch: { 'introduce': function () { this.$nextTick(function () { console.log('nextTick'); // 判斷介紹是否超過四行 let rem = parseFloat(this.getRem()); console.log('watch 中的rem', rem); if (!this.$refs.desc) { console.log('desc null'); return; } let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', ''); console.log('descHeight:' + descHeight); console.log('如果 descHeight 超過' + (5.25 * rem) + '就要顯示展開按鈕'); if (descHeight > 5.25 * rem) { console.log('超過了四行'); // 顯示展開收起按鈕 this.showExchangeButton = true; this.exchangeButton = true; // 不是顯示所有 this.showTotal = false; } else { // 不顯示展開收起按鈕 this.showExchangeButton = false; // 沒有超過四行就顯示所有 this.showTotal = true; console.log('showExchangeButton', this.showExchangeButton); console.log('showTotal', this.showTotal); } }.bind(this)); } } }; </script> <style lang="less" scoped rel="stylesheet/less"> .top-prove { height: 100px; width: 100%; background: #dddddd; text-align: center; line-height: 100px; } .total-introduce { height: auto; overflow: hidden; font-size: 14px; color: #434343; margin: 10px; .intro-content { .merchant-desc { width: 100%; line-height: 21px; } } .unfold { display: block; z-index: 11; float: right; width: 40px; height: 21px; p { margin: 0; line-height: 21px; color: #7fbe87; } } } .detailed-introduce { font-size: 14px; color: #434343; position: relative; overflow: hidden; margin: 10px; .intro-content { // 最大高度設(shè)為4倍的行間距 max-height: 84px; line-height: 21px; word-wrap: break-word; /*強(qiáng)制打散字符*/ word-break: break-all; background: #ffffff; /*同背景色*/ color: #ffffff; overflow: hidden; .merchant-desc { width: 100%; line-height: 21px; } &:after, // 這是展開前實(shí)際顯示的內(nèi)容 &:before { content: attr(title); position: absolute; left: 0; top: 0; width: 100%; color: #434343 // overflow: hidden; } // 把最后最后一行自身的上面三行遮住 &:before { display: block; overflow: hidden; z-index: 1; max-height: 63px; background: #ffffff; } &:after { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; height: 81px; /*截取行數(shù)*/ -webkit-line-clamp: 4; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; /*行首縮進(jìn)字符數(shù),值為[(截取行數(shù)-1)*尾部留空字符數(shù)]*/ text-indent: -12em; /*尾部留空字符數(shù)*/ padding-right: 4em; } .unfold { z-index: 11; width: 40px; height: 21px; outline: 0; position: absolute; right: 0; bottom: 0; p { margin: 0; line-height: 21px; color: #7fbe87; } } } } .bottom-prove { height: 100px; width: 100%; background: #dddddd; text-align: center; line-height: 100px; } .change-buttom { font-size: 14px; color: #2371be; .long { text-align: 21px; text-align: center; height: 21px; } .short { text-align: 21px; text-align: center; height: 20px; } } </style>
演示動畫
另一種思路
簡書中i_May的方法,思路有些不同,也可以參考下。
問題工作中該頁面打包到測試環(huán)境在微信中打開后,三個省略號消失了,問題還在找,找到了會及時(shí)更新。因?yàn)榉柨赡軙谛形渤霈F(xiàn)點(diǎn)顯示問題,暫時(shí)還沒找到解決辦法,但出現(xiàn)概率較小,出現(xiàn)了也不影響。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實(shí)例)
最近了解到mqtt這樣一個協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02vue實(shí)現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應(yīng)的打包命令)
這篇文章主要介紹了vue實(shí)現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應(yīng)的打包命令),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06vue?內(nèi)置組件?component?的用法示例詳解
這篇文章主要介紹了vue內(nèi)置組件component的用法,本文給大家介紹了component內(nèi)置組件切換方法,通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法
走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03