销售话术详情

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>

klp-ui/src/components/VditorEditor.vue

@@ -12,6 +12,10 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -20,27 +24,40 @@ export default {
     }
   },
   mounted() {
-    this.vditor = new Vditor('vditor', {
+    const config = {
       value: this.value,
       height: 360,
-      toolbarConfig: {
-        pin: true,
-      },
-      cache: {
-        enable: false,
-      },
+      cache: { enable: false },
       after: () => {
         this.vditor.setValue(this.value || '')
       },
       input: (val) => {
         this.$emit('input', val)
       }
-    })
+    };
+    if (this.readonly) {
+      config.toolbar = []; // 不显示工具栏
+      config.editable = false;
+    } else {
+      config.toolbarConfig = { pin: true };
+      config.editable = true;
+    }
+    this.vditor = new Vditor('vditor', config);
+    if (this.readonly) {
+      console.log(this.vditor)
+      this.vditor.vditor.disabled()
+    }
   },
   watch: {
     value(val) {
       if (this.vditor && val !== this.vditor.getValue()) {
         this.vditor.setValue(val || '')
+        // 只读模式下内容变化时重新渲染mermaid
+        if (this.readonly && window.VditorPreview && typeof window.VditorPreview.mermaidRender === 'function') {
+          this.$nextTick(() => {
+            window.VditorPreview.mermaidRender(document);
+          });
+        }
       }
     }
   }