意见反馈（优化富文本框校验问题）

src/components/Tinymce/index.vue

 <template>
-  <div class="quill-editor">
+  <div :class="color">
     <!-- 图片上传组件辅助-->
     <el-upload
       class="avatar-uploader"
@@ -13,7 +13,7 @@
     >
     </el-upload>
     <!--富文本编辑器组件-->
-    <quill-editor ref="QuillEditor" v-model="content" :content="content" :options="editorOption" @change="contentChange" />
+    <quill-editor ref="QuillEditor" v-model="content" :content="content" :options="editorOption" @blur="contentBlur" @change="contentChange" />
     <!--    <div v-html="content" />-->
   </div>
 </template>
@@ -57,6 +57,7 @@ export default {
   },
   data() {
     return {
+      color: 'quill-editor',
       accept: '.jpg, .png, .jpeg, .JPEG.JPG, .PNG,.bmp,.DMP',
       form: {
         img: ''
@@ -109,12 +110,20 @@ export default {
     }
   },
   methods: {
+    /** 获取边框颜色*/
+    getClass(color) {
+      this.color = color
+    },
     /** change事件*/
     contentChange() {
       if (this.content === '') {
         this.content = '<p></p>'
       }
     },
+    /** 失焦时调用父组件校验方法父组件 */
+    contentBlur() {
+      this.$emit('checkForm')
+    },
     /** 上传接口*/
     uploadStart(file) {
       const formData = new FormData()
@@ -150,12 +159,27 @@ export default {
 /*.quill-editor {*/
 /*  width: 880px;*/
 /*}*/
-
-.ql-toolbar.ql-snow {
+.quill-editor {
+  .ql-toolbar.ql-snow {
     border-radius: 8px 8px 0 0;
+    border: 1px solid #E0E0E0;
+  }
+
+  .ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-radius: 0 0 8px 8px;
+    border: 1px solid #E0E0E0;
+  }
 }
+.quill-editor-red {
+  .ql-toolbar.ql-snow {
+    border-radius: 8px 8px 0 0;
+    border: 1px solid #F57b7b;
+  }
 
-.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  .ql-toolbar.ql-snow + .ql-container.ql-snow {
     border-radius: 0 0 8px 8px;
+    border: 1px solid #F57b7b;
+  }
 }
+
 </style>

src/views/Feedback/index.vue

@@ -34,7 +34,7 @@
               <el-input placeholder="请输入建议标题，50个字以内" maxlength="50"  v-model="form.title" />
             </el-form-item>
             <el-form-item label="详情描述：" prop="detail">
-              <tinymce ref="richEditor" v-model="form.detail" @input="setContent"/>
+              <tinymce ref="richEditor" v-model="form.detail" @checkForm="checkForm" @input="setContent"/>
             </el-form-item>
             <el-form-item label="上传附件：">
               <el-upload
@@ -183,6 +183,16 @@ export default {
       }
       this.getFeedBackType()
     },
+    // 失焦时校验富文本框
+    checkForm() {
+      this.$refs['form'].validateField('detail', (vaild) => {
+        if (!vaild) {
+          this.$refs.richEditor.getClass('quill-editor')
+        } else if (vaild) {
+          this.$refs.richEditor.getClass('quill-editor-red')
+        }
+      })
+    },
     /** 提交建议*/
     onSubmit() {
       this.$refs['form'].validate(valid => {
@@ -202,6 +212,8 @@ export default {
               this.$message.error(res.message)
             }
           })
+        } else {
+          this.checkForm()
         }
       })
     },