feat(/markdown-editor): 新增markdow-editor页面

src/router/index.js

@@ -20,7 +20,6 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) =>{
-  // console.log(to);
   // 判断是否未登录就进入个人中心
   to.matched.forEach((item, index) => {
     if(item.name == 'personalCenter' && localStorage.getItem('jwt') == undefined){

src/views/markdown-editor/markdown-editor.less

-.margin-top-20{
-    margin-top:20px;
+.editor{
+    width:100%;
+    .margin-top-20{
+        margin-top:20px;
+        .v-note-wrapper{
+            height:60vh;
+        }
+    }
 }
\ No newline at end of file

src/views/markdown-editor/markdown-editor.vue

@@ -4,11 +4,24 @@
 
 
 <template>
-    <div>
+    <div class="editor">
         <Row class="margin-top-20">
-            <Col span="24" >
+            <Col span="4" offset='10' style="text-align:center">
+                <span style="font-size:16px;font-weight:bold"><Icon @click="submitContent" type="ios-cloud-upload-outline" size='24' style="margin-right:20px"/>发布文章</span>
+            </Col>
+            <Col span="24" > 
                   <!-- <p></p> -->
-                  <mavon-editor v-model="markdownContent" @save="getHTMLCode"/>
+                  <mavon-editor v-model = "markdownContent" @save = "getHTMLCode"/>
+            </Col>
+            <Col span="24" style="margin-top:40px">
+                <Form ref="articleForm" :model="articleForm"  :label-width='100' :rules="articleRules">
+                    <FormItem label = "文章标题" prop="articleTitle">
+                        <Input v-model="articleForm.articleTitle" style="width:200px"></Input>
+                    </FormItem>
+                    <FormItem label = "文章介绍" prop="articleDescription">
+                        <Input  v-model= "articleForm.articleDescription" maxlength="200" show-word-limit type="textarea" placeholder="Enter something..." style="width: 300px"></Input>
+                    </FormItem>
+                </Form>
             </Col>
         </Row>
     </div>
@@ -20,12 +33,27 @@ export default {
     name: 'markdown-editor',
     data(){
         return{
-            markdownContent:''
+            markdownContent:'',
+            articleForm:{
+                articleTitle:'',
+                articleDescription:''
+            },
+            articleRules:{
+                articleTitle:[
+                    { required: true, message: '请填写文章标题', trigger: 'blur' }
+                ],
+                articleDescription:[
+                    { required: true, message: '请填写文章描述', trigger: 'blur' }
+                ]
+            }
         }
     },
     methods:{
         getHTMLCode(f, s){
             console.log(f, s);
+        },
+        submitContent(){
+            console.log('hello, submit content');
         }
     }
 };