销售话术详情

klp-ui/src/components/MarkdownPreview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div ref="preview" class="markdown-preview" style="min-height: 192px;"></div>
+</template>
+
+<script>
+import Vditor from 'vditor'
+
+export default {
+  name: 'MarkdownPreview',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    this.renderMarkdown();
+  },
+  watch: {
+    value() {
+      this.renderMarkdown();
+    }
+  },
+  methods: {
+    renderMarkdown() {
+      Vditor.preview(this.$refs.preview, this.value || '', {
+        anchor: 1,
+        hl: true,
+        math: { inlineDigit: true },
+        mermaid: true,
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.markdown-preview {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 8px;
+  background: #fff;
+}
+</style>