创建消息

package.json

@@ -57,6 +57,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/main.js

@@ -38,6 +38,17 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+
+import VueQuillEditor from 'vue-quill-editor'
+ 
+// 引入样式
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+ 
+Vue.use(VueQuillEditor, /* { 默认全局 } */)
+
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/views/message/addMessage.vue

@@ -1,7 +1,144 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" >添加消息</div>
+  <div class="message-add" :style="{height:height,width:width}"  >
+    
+    <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
+    <div class="message-add-box">
+      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="消息标题:" prop="messageTitle">
+          <el-input v-model="message.messageTitle" placeholder="请输入消息标题"></el-input>
+        </el-form-item> 
+      
+        <el-form-item label="发布时间:" required>
+          <el-col :span="11">
+            <el-form-item prop="dateTime">
+              <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="接受用户:" prop="receivedUsers">
+          <el-input type="textarea" :rows="2" placeholder="请导入用户" autosize v-model="message.receivedUsers"></el-input>
+        </el-form-item>  
+
+        <el-form-item label="消息内容:" prop="messageContent">
+          <quill-editor 
+            class="ql-editor"
+            v-model="content" 
+            ref="myQuillEditor" 
+            :options="editorOption" 
+            >
+          </quill-editor>
+        </el-form-item>
+
+        <!-- <el-form-item>
+          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
+        </el-form-item> -->
+      </el-form>
+    </div>     
+  </div>
 </template>
 
 <script>
+import Quill from 'quill' // 引入编辑器
+// 自定义字体大小
+const Size = Quill.import('attributors/style/size')
+Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
+Quill.register(Size, true)
+
+// 自定义字体类型
+var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
+var Font = Quill.import('formats/font')
+Font.whitelist = fonts
+Quill.register(Font, true)
 
+ export default {
+    data() {
+      return {
+        message: {
+          messageTitle: '',
+          dateTime: '',
+          receivedUsers: '',
+          messageContent: '',
+        },
+        rules: {
+          messageTitle: [
+            { required: true, message: '请输入消息标题', trigger: 'blur' }
+          ],
+          dateTime: [
+            { type: 'date', required: true, message: '选择时间', trigger: 'change' }
+          ],
+          receivedUsers: [
+            { required: true, message: '请导入用户', trigger: 'blur' }
+          ],
+          messageContent: [
+            { required: true, trigger: 'blur' }
+          ]
+        },
+        content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
+        // 富文本编辑器配置
+        editorOption: {
+          modules: {
+              toolbar: [
+                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+                ['blockquote', 'code-block'], // 引用  代码块
+                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+                  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+                  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+                  [{ indent: '-1' }, { indent: '+1' }], // 缩进
+                  [{ direction: 'rtl' }], // 文本方向
+                  [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
+                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+                  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
+                  [{ align: [] }], // 对齐方式
+                  ['clean'], // 清除文本格式
+                  ['link', 'image', 'video'] // 链接、图片、视频
+          ],
+            placeholder: '请输入正文'
+          }
+      }
+    }
+  }
+}
 </script>
+
+<style>
+.message-add{
+  width: 700px;
+  height: 100%;
+  position: absolute;
+  top: 30px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border: 1px solid #ccc;
+}
+.message-add-box{
+  padding: 40px;
+}
+/* .users-input-box{
+  color:aqua;
+} */
+
+.quill-editor /deep/ .ql-container {
+    min-height: 220px;
+  }
+
+  .ql-container {
+    min-height: 230px;
+  }
+
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
+  width: 450px;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-top: 0px;
+    width: 450px;
+}
+</style>