teaching-uniapp/components/detailBlock/detailBlock.vue

<template>
	<view class="detailBlock">
		<view class="tit fwb-font" v-if="!item.isShow">教研室详情</view>
		<view class="tit fwb-font" v-else>活动详情</view>
		<view class="cont sZw-font">
			会议时间：<text>10月7日上午八点(周日)</text>
		</view>
		<view class="cont sZw-font">
			活动形式：<text style="color: #0056a8;">线上直播</text>
		</view>
		<view class="cont sZw-font">
			<!-- <view id="myElement" class="activeTit">
					教研室概况：查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多
			   </view>
				<text class="zdwz" style="color: #0056a8;float: right;" @click="zdwz">收起</text> -->
			<view class="content">

				<view ref="p" :class="getClassNames">
					<text style="color: #999999;">教研室概况：</text>
					这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
					来。如果需要查看全部内容，可以点击“查看更多按钮，文
				</view>

				<view ref="btnnn" :class="getClassNames1" @click="qqq">
					{{isAll ? '收起' : '展开'}}
				</view>
			</view>
		</view>
	</view>
</template>

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

			}
		}
	}
</script>

<style lang="scss">
	.detailBlock {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 15px 10px;

		.tit {
			font-weight: 600;
			margin-bottom: 10px;
		}

		.cont {
			color: #999999;
			margin-bottom: 10px;
			text {
				color: #666666;
			}

			.content {
				// display: flex;
				// float: left;
			}

			.content .p {
				width: 90%;
				color: #666666;
				// max-width: 100%;
				// display:inline-block;
				display: block;
				// float: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// padding-right: 50rpx;
				/*设置文字溢出时显示省略号*/

			}

			.content .p.is-expanded {
				width: 100%;
				overflow: visible;
				white-space: normal;
				/*文字溢出时不再显示省略号*/
			}

			.btn-more {
				float: right;
				display: inline-block;
				// width: 60px;
				transform: translate(0, -100%);
				color: #0056a8;
			}

			.btn-more.is-zd {
				transform: none;
				// transform: translate(0,0);
			}
		}
	}
</style>