兼容渲染markdown格式的内容
This commit is contained in:
		@@ -3,7 +3,7 @@
 | 
			
		||||
    <div class="chat-wrapper" v-for="item in list" :key="item.id">
 | 
			
		||||
      <div class="chat-text" :class="{right:item.userType == '0',system:item.userType == '2'}">
 | 
			
		||||
        <img v-if="item.userType!=2" class="avatar" :src="avatar(item)" alt=""/>
 | 
			
		||||
        <div class="content" v-text="item.content"/>
 | 
			
		||||
        <div class="content" v-html="markdown(item.content)"/>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </el-scrollbar>
 | 
			
		||||
@@ -19,6 +19,11 @@ export default {
 | 
			
		||||
  props: {
 | 
			
		||||
    list: {default: () => []}
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      md: null
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    lastMessage: v => v.list.at(-1)?.content
 | 
			
		||||
  },
 | 
			
		||||
@@ -37,9 +42,24 @@ export default {
 | 
			
		||||
    avatar(item) {
 | 
			
		||||
      return item.avatar || (item.userType == '0' ? 'https://cdn.sinoecare.com/i/2024/06/17/666fdb275be82.png' :
 | 
			
		||||
          'https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png')
 | 
			
		||||
    },
 | 
			
		||||
    markdown(v) {
 | 
			
		||||
      return this.md?.render(v) || v
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    const {hljs, markdownit} = window
 | 
			
		||||
    this.md = markdownit({
 | 
			
		||||
      highlight: function (str, lang) {
 | 
			
		||||
        if (lang && hljs.getLanguage(lang)) {
 | 
			
		||||
          try {
 | 
			
		||||
            return hljs.highlight(str, {language: lang}).value;
 | 
			
		||||
          } catch (__) {
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
        return ''; // use external default escaping
 | 
			
		||||
      }
 | 
			
		||||
    })
 | 
			
		||||
    this.scrollBottom()
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -49,6 +69,21 @@ export default {
 | 
			
		||||
.chatContent {
 | 
			
		||||
  :deep(.el-scrollbar__wrap) {
 | 
			
		||||
    overflow-x: hidden;
 | 
			
		||||
 | 
			
		||||
    .content {
 | 
			
		||||
      pre {
 | 
			
		||||
        background-color: #282c34;
 | 
			
		||||
        color: #abb2bf;
 | 
			
		||||
        font-size: 12px;
 | 
			
		||||
        padding: 4px;
 | 
			
		||||
        line-height: 16px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      code {
 | 
			
		||||
        white-space: pre-wrap;
 | 
			
		||||
        width: 100%;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .chat-text {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user