样式调整

src/components/chatContent.vue

@@ -1,10 +1,17 @@
 <template>
   <section class="chatContent" @scroll="onScroll">
+    <div class="chat-wrapper">
+      <div class="chat-friend">
+        <div class="chat-text">
+          <v-md-preview :text="demo"/>
+        </div>
+      </div>
+    </div>
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
       <div class="chat-friend" v-if="item.uid !== 'me'">
         <div class="chat-text" v-if="item.chatType == 0">
           <icon-copy @click="copy(item.msg, '已复制')"/>
-          <v-md-preview-html :html="item.msg.trim()" preview-class="vuepress-markdown-body"/>
+          <v-md-preview :text="item.msg.trim()"/>
         </div>
         <div class="chat-img" v-if="item.chatType == 1">
           <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
@@ -41,6 +48,22 @@ export default {
   props: {
     list: {default: () => []}
   },
+  data() {
+    return {
+      demo: "要针对一个CSS滚动到元素的最底部，可以使用以下JS代码：\n" +
+          "\n" +
+          "``` javascript\n" +
+          "var element = document.getElementById('yourElementId');\n" +
+          "scrollToBottom(element);\n" +
+          "\n" +
+          "function scrollToBottom(element) {\n" +
+          "  element.scrollTop = element.scrollHeight - element.clientHeight;\n" +
+          "}\n" +
+          "```\n" +
+          "\n" +
+          "这个代码首先获取一个具有给定ID的元素，然后调用名为`scrollToBottom`的函数，该函数将元素滚动到底部。在`scrollToBottom`函数中，`scrollTop`属性设置为`element.scrollHeight - element.clientHeight`的结果，这将把元素滚动到它的最底部。"
+    }
+  },
   methods: {
     onScroll() {
       const scrollDom = this.$el;
@@ -49,6 +72,7 @@ export default {
       const scrollHeight = scrollDom.scrollHeight;
       // 当滚动到底部，设置 isAutoScroll 为 true
       this.isAutoScroll = scrollTop + offsetHeight === scrollHeight;
+      scrollDom.scrollTop = scrollHeight - scrollDom.clientHeight
     },
     copy(msg) {
       if (copyToClipboard(msg)) {
@@ -98,6 +122,7 @@ export default {
       max-width: max(650px, 90%);
       border-radius: 4px;
       background-color: #fff;
+      color: initial;
     }
 
     .chat-img {
@@ -190,8 +215,12 @@ export default {
     }
   }
 
-  :deep(.vuepress-markdown-body) {
+  :deep(.github-markdown-body) {
     padding: 2px 0 !important;
+
+    p {
+      margin-bottom: 0;
+    }
   }
 }
 </style>