bug

src/components/markdown-preview/markdown-preview.vue

@@ -5,11 +5,18 @@
 </template>
 
 <script>
+	// import {Marked} from 'marked';
+	import MarkdownIt from 'markdown-it';
 	export default {
 		name:"markdown-preview",
 		props: {
 			mdString: {
-				default:`在客服交流中使用标准术语是提高专业形象和服务质量的重要手段。以下是一些常见的客服标准用语及其适用场景：
+				default:`## 我是二级标题
+### 我是三级标题
+| 我是表头 | 表头 2 |
+| :----------- | :----------- |
+|1|2|
+				在客服交流中使用标准术语是提高专业形象和服务质量的重要手段。以下是一些常见的客服标准用语及其适用场景：
 
 1. **问候与介绍：**
    - “您好，欢迎来到[公司名称]，我是您的客服代表[姓名]，很高兴为您服务。”
@@ -41,20 +48,34 @@
 		},
 		data() {
 			return {
-				contentHtml:''
+				contentHtml:'',
+				mdObj:null
 			};
 		},
 		watch:{
 			mdString: {
 				handler(val){
-					
+					this.contentHtml = this.parseContent(val)
 				},
 				deep: true,
 				immediate: true
 			}
 		},
 		methods:{
-			
+			parseContent(text){
+				if(this.mdObj){
+					return this.mdObj.render(text)
+				}else{
+					setTimeout(()=>{
+						return this.parseContent(text)
+					},500)
+				}
+			}
+		},
+		mounted(){
+			this.mdObj = new MarkdownIt()
+			this.contentHtml = this.parseContent(this.mdString)
+				console.log(this.contentHtml)
 		}
 	}
 </script>