teaching-uniapp/components/detailBlock/detailBlock.vue

<template>
	<view>
		<view class="detailBlock" v-if="!item.isShow" v-for="(i,index) in actItemList" :key="indexa + 'a'">
			<view class="tit fwb-font">教研室详情</view>
			<view class="cont sZw-font">
				会议时间：<text>{{ i.begin_at }}</text>
			</view>
			<view class="cont sZw-font">
				活动形式：<text style="color: #0056a8;">{{ i.acshape }}</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>
						{{i.brief}}
					</view>

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

		<view class="detailBlock" v-else v-for="(i,index) in actItemList" :key="index + 'b'">
			<view class="tit fwb-font">活动详情</view>
			<view class="cont sZw-font">
				会议时间：<text>{{ i.begin_at }}</text>
			</view>
			<view class="cont sZw-font">
				活动形式：<text style="color: #0056a8;">{{ i.acshape }}</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>
						{{i.brief}}
					</view>
					<view ref="btnnn" :class="getClassNames1" @click="qqq">
						<!-- {{isAll ? '收起' : '展开'}} -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "detailBlock",
		props: {
			item: {
				type: Object,
				default () {
					return {
						isshow: 0, //0教研室 1 活动
						info: ''
					}
				}
			},
			actItemList: {
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				isAll: false,
				meunButtonInfo: this.meunButtonInfo, //胶囊高度
			};
		},
		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: 30rpx;

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

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

			text {
				color: #666666;
			}

			.content {
				white-space: normal;
				/*隐藏溢出*/
				/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
				/*规定段落中的文本不进行换行*/
				letter-spacing: 2rpx;
				display: -webkit-box;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
			}

			.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>