销售话术详情

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);
+          });
+        }
       }
     }
   }