teaching-uniapp/components/detailBlock/detailBlock.vue

<template>
	<view class="detailBlock">
		<view class="tit" v-if="!item.isShow">教研室详情</view>
		<view class="tit" v-else>活动详情</view>
		<view class="cont">
			会议时间：<text>10月7日上午八点(周日)</text>
		</view>
		<view class="cont">
			活动形式：<text style="color: #0056a8;">线上直播</text>
		</view>
		<view class="cont">
			  <!-- <view id="myElement" class="activeTit">
					教研室概况：查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多
			   </view>
				<text class="zdwz" style="color: #0056a8;float: right;" @click="zdwz">收起</text> -->
				<view class="content">
					<view ref="p" class="p">
						这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
						来。如果需要查看全部内容，可以点击“查看更多按钮，文字内容就会展开显示了。
					</view>
					<text class="btn-more" @click="qqq">
						{{isAll?'收起':'展开'}}
					</text>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"detailBlock",
		props:{
			item:{
				type:Object,
				default (){
					return{
						isshow:0   //0教研室 1 活动
						
					}
				}
			}
		},
		data() {
			return {
				isAll:false
			};
		},
		methods:{
			zdwz(){
				const query = wx.createSelectorQuery();
				    query.select('#myElement').fields({ computedStyle: ['lineClamp'] }).exec((res) => {
				      const element = res[0];
				      element.style.webkitLineClamp = '4'; // 修改行数限制为 2
				    });
			},
			qqq(){
				this.isAll=!this.isAll
				if(this.isAll){
					this.$refs.p.$el.classList.add('is-expanded')
					console.log(this.$refs.p.$el.classList);
				}else{
					this.$refs.p.$el.classList.remove('is-expanded')
					console.log(this.$refs.p.$el.classList);
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.detailBlock{
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 15px 10px;
		.tit{
			font-weight: bold;
			margin-bottom: 10px;
		}
		.cont{
			color: #999999;
			margin-bottom: 10px;
			.content{
				// display: flex;
			}
			.content .p{
				width: 90%;
				display:block;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				// flex-grow: 1;
				// flex-wrap: wrap;
				// padding-right: 50rpx;
				/*设置文字溢出时显示省略号*/
				
			}
			.content .p.is-expanded{
				overflow:visible;
				white-space:normal;
				/*文字溢出时不再显示省略号*/
			}
		
			.activeTit{
				display: -webkit-box;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;/*设置 需要显示的行数*/
			}
			.btn-more{
				float: right;
				transform: translate(0,-100%);
				color: #0056a8;
			}	
		}
	}
</style>