vue 文字模塊實現超出行數展開收縮

vue 是一套用於構建用戶界面的漸進式框架。vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，vue 也完全能夠為復雜的單頁應用提供驅動。vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。'; if (this.introduce !== longIntroduce) { this.showExchangeButton = false; this.showTotal = true; this.introduce = longIntroduce; } }, tryShort () { let shortIntroduce = 'Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。'; 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><stylelang="less"scopedrel="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 {// 最大高度設為4倍的行間距 max-height:84px; line-height:21px; word-wrap:break-word;/*強制打散字符*/ word-break:break-all; background:#ffffff;/*同背景色*/ color:#ffffff; overflow: hidden;.merchant-desc { width:100%; line-height:21px;}&:after,// 這是展開前實際顯示的內容&: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;/*截取行數*/-webkit-line-clamp:4; text-overflow: ellipsis;-webkit-box-sizing: border-box; box-sizing: border-box;/*行首縮進字符數，值為[(截取行數-1)*尾部留空字符數]*/ text-indent:-12em;/*尾部留空字符數*/ 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>