這里講一下，如何使用vue控制多行文字展開收起（也叫控制文字展開隱藏）。

效果：

這里設置了控制三行，如果超過三行會展示，“顯示更多” 超出文字顯示省略號。

點擊“顯示更多”會展開所有文案，按鈕變成“收起”

（未超出三行的時候）

（展開）

（收起）

代碼實現：

<template><div><p class="m-content overflow-line" id="J_description">{{introduce}}</p><button type="button" class="btn-more" v-if="isShowMore" id="J_btnmore" @click="showmoreDesc($event)">查看更多</button></div> </template> <script>export default {name: 'Spread',data() {return {isShowMore: false,isDescStatus: true,introduce: ""};},props: {mes2: {type: String,default: ""}},methods: {showmoreDesc(e) {let el = e.currentTarget;el.previousElementSibling.classList[!this.isDescStatus ? 'add' : 'remove']('overflow-line');el.classList[this.isDescStatus ? 'add' : 'remove']('more-collapse');el.innerHTML = !this.isDescStatus ? '查看更多' : '收起';this.isDescStatus = !this.isDescStatus;that.isShowMore = true;}},watch: {mes2(val) {this.introduce = val;if (this.introduce.length > 75) {this.isShowMore = true;}}}}; </script><style lang="less" scoped>.m-content {&.overflow-line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}}.btn-more {color: #fff;float: right;color: #5383E7;position: relative;margin-top: rc(5);padding-right: rc(33);&.more-collapse {&::after,&::before {top: 2px;transform: rotate(180deg);}&::before {top: 4px;}}&::after,&::before {width: 0;height: 0;content: '';position: absolute;right: 0;top: 7px;border: rc(12) solid transparent;}&::after {border-top-color: #5383E7;z-index: 1;}&::before {border-top-color: #1c2239;z-index: 2;top: 5px;}} </style>

使用組件

<Spread :mes2="需要傳遞的文字數據"></Spread>

總結

以上是生活随笔為你收集整理的vue控制多行文字展开收起的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。