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>