uniapp中实现文字展开与折叠效果 - vue3

 效果图：

实现代码：

<template>
	<view class="wrap">
		<view class="content" :class="isUnfold ? 'hide' : 'show'">
      我始终相信天生我才必有用。我要继续奋斗，展示自己的才能，
      努力成为新世纪的优秀人才。人生的奋斗目标不要太大，认准了一件事情，投入兴趣与热情坚持去做，你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
      你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。你就会成功。
		</view>
    <view class="footer">
      <view v-if="isUnfold" @click="handleFload">展开</view>
      <view v-if="!isUnfold" @click="handleFload">收起</view>
    </view>
	</view>
</template>
 
<script setup>
import { ref } from 'vue';
const isUnfold =ref(true)

function handleFload(){
  isUnfold.value=!isUnfold.value
}
</script>
 
<style lang="scss">
	.wrap{
		width:90%;
		font-size:32rpx;
		justify-content: space-between;
		margin: 0 auto;
    position: relative;
	}
	.content{
		width:100%;
		height: auto;
    /* 首行缩进2个字符 */
    text-indent:2em; 
		display: -webkit-box; 
    /*  CSS 属性 word-break 指定了怎样在单词内断行。 */
		word-break: break-all;
		-webkit-box-orient: vertical; 
    /* 要显示多少行就改变line-clamp的数据,此处折叠起来显示3行*/
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		background-color:#F5F5F5;
	}
	.hide{
		display: -webkit-box;
	}
	.show{
		display: block;
	}
	.footer{
    position: absolute;
    right: 10rpx;
    bottom: -50rpx;
    color: #80bdf7;
  }

</style>