销售话术页面

klp-ui/src/components/VditorEditor.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="vditor" style="min-height: 192px;"></div>
+</template>
+
+<script>
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
+
+export default {
+  name: 'VditorEditor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      vditor: null
+    }
+  },
+  mounted() {
+    this.vditor = new Vditor('vditor', {
+      value: this.value,
+      height: 360,
+      toolbarConfig: {
+        pin: true,
+      },
+      cache: {
+        enable: false,
+      },
+      after: () => {
+        this.vditor.setValue(this.value || '')
+      },
+      input: (val) => {
+        this.$emit('input', val)
+      }
+    })
+  },
+  watch: {
+    value(val) {
+      if (this.vditor && val !== this.vditor.getValue()) {
+        this.vditor.setValue(val || '')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#vditor {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+</style>