feat: 在留言板组件中引入新组件xzj-readMore，增加展开收起

components/AnswerList/messageBoard.vue

@@ -72,7 +72,8 @@
                     src="/static/common/images/icon_answer.png"
                   ></image>
                   <view class="answer-content">
-                    <view class="answer-text">{{ item.fullAnswer }}</view>
+                    <!-- <view class="answer-text">{{ item.fullAnswer }}</view> -->
+                    <xzj-readMore>{{ item.fullAnswer }}</xzj-readMore>
                   </view>
                 </view>
               </view>
@@ -135,11 +136,13 @@
 <script>
 import AvatarDefault from "@/static/common/images/avatar_default.jpg";
 import UniSwipeAction from "@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue";
+import XzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue";
 
 export default {
   name: "MessageBoard",
   components: {
     UniSwipeAction,
+    XzjReadMore,
   },
   props: {
     answerList: {
@@ -251,7 +254,7 @@ export default {
     align-items: center;
     justify-content: center;
     border-radius: 0 16rpx 16rpx 0;
-    border: 1px solid #fff; /* 防止初始状态下出现红线 */
+    border-left: 1px solid #fff; /* 防止初始状态下出现红线 */
     margin-bottom: 32rpx;
     .right-btn {
       width: 32rpx;
@@ -360,7 +363,6 @@ export default {
       line-height: 40rpx;
       color: #666666;
       flex: 1;
-      position: relative;
 
       .answer-text {
         display: -webkit-box;

components/xzj-readMore/xzj-readMore.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="qaBox">
+		<view class="content-box">
+			<view :class="[{ watchMoreContent: isWatchMore  }, {contentt:isLongContent} ,'xzj']" :style="[zxy]" ><slot></slot></view>
+			<view class="watchMore" v-if="isLongContent" @click="watchMore">{{ isWatchMore ? '收起' : '展开' }}</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			isWatchMore: false,
+			isLongContent: false,
+			zxy:{
+				'-webkit-line-clamp':'', /* 行数*/
+				lineClamp: '', /*行数*/
+			}
+		};
+	},
+	props: {
+		// 默认的显示占位高度，单位为rpx
+		showHeight: { //文本本身高度超出   showHeight  才会显示 查看更多
+			type: [Number, String],
+			default: 120,
+			// 这里是rpx
+		},
+		hideLineNum:{
+			type:[Number,String],
+			default:3,
+			// 3行
+		}
+	},
+	mounted() {
+		this.$nextTick(function() {
+			this.init();
+		});
+	},
+	created(){
+		for (let key in this.zxy) {
+			this.zxy[key]=this.hideLineNum
+		}
+	}
+	,
+	methods: {
+		watchMore() {
+			this.isWatchMore = !this.isWatchMore;
+		},
+		init() {
+			this.getHeight('.xzj').then(res => {
+				// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+				if (res.height > uni.upx2px(this.showHeight)) {
+					this.isLongContent = true;
+				}
+			});
+		},
+		getHeight(selector, all) {
+			return new Promise(resolve => {
+				uni.createSelectorQuery()
+					.in(this)
+					[all ? 'selectAll' : 'select'](selector)
+					.boundingClientRect(rect => {
+						if (all && Array.isArray(rect) && rect.length) {
+							resolve(rect);
+						}
+						if (!all && rect) {
+							resolve(rect);
+						}
+					})
+					.exec();
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.qaBox {
+	text-align: right;
+	font-size: 24rpx;
+	font-weight: 400;
+	color: #4f6aff;
+	display: flex;
+}
+.content-box {
+	width: 100%;
+}
+.contentt {
+	overflow: hidden;
+	text-overflow: ellipsis; /*超出则...代替*/
+	display: -webkit-box;
+	// -webkit-line-clamp: 4; /* 行数*/
+	// line-clamp: 4; /*行数*/
+	-webkit-box-orient: vertical;
+	// line-height: 56rpx;
+}
+.xzj{
+	color: #666666;
+	font-size: 28rpx;
+	// text-align;
+	text-align: left;
+	word-break: break-all;
+}
+.watchMoreContent {
+	display: inline-block ;
+	width: 100%;
+}
+
+.watchMore {
+	margin-top: 10rpx;
+}
+</style>