Explorar o código

富文本信息处理

canghailong hai 7 meses
pai
achega
bd6136a8df
Modificáronse 2 ficheiros con 17 adicións e 6 borrados
  1. 7 4
      src/views/forum/detail.vue
  2. 10 2
      src/views/forum/postinfo/index.vue

+ 7 - 4
src/views/forum/detail.vue

@@ -9,14 +9,14 @@
 				/>
 				<div class="snowy-index-card-left-one-username">
 					<span style="font-weight: 600; margin: 2px; font-size: 18px">{{ detailObj.userNickName }}</span>
-					<span style="color: #6d737b; margin: 2px"
-						>{{ detailObj.typeName }} | {{ formatDateTime(detailObj.lastReplyTime) }}</span
-					>
+					<span style="color: #6d737b; margin: 2px">
+						{{ detailObj.typeName }} | {{ formatDateTime(detailObj.lastReplyTime) }}
+					</span>
 				</div>
 			</div>
 		</div>
 		<div class="forum-list-title">{{ detailObj.postTitle }}</div>
-		<div v-html="detailObj.postContent"></div>
+		<div class="htmlContent" v-html="detailObj.postContent"></div>
 		<div>
 			<span>
 				<a-tooltip title="点赞">
@@ -121,6 +121,9 @@
 </script>
 
 <style scoped>
+	:deep(.htmlContent img) {
+		max-width: 100% !important;
+	}
 	.snowy-index-card-left-one-username {
 		margin-left: 8px;
 		display: flex;

+ 10 - 2
src/views/forum/postinfo/index.vue

@@ -36,7 +36,7 @@
 				<template v-if="column.dataIndex === 'postContent'">
 					<a-tooltip>
 						<template #title>
-							<div style="max-height: 400px; overflow-x: auto" v-html="record.postContent"></div>
+							<div class="htmlContent" v-html="record.postContent"></div>
 						</template>
 						<div class="one-line" v-html="record.postContent"></div>
 					</a-tooltip>
@@ -245,7 +245,15 @@
 		})
 	}
 </script>
-<style scoped>
+<style scoped lang="less">
+	.htmlContent {
+		max-height: 400px;
+		overflow-x: auto;
+		:deep(img) {
+			max-width: 100% !important;
+		}
+	}
+
 	.one-line {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;