add 博客preview

src/store/modules/app.js

@@ -6,6 +6,7 @@ import http from '@/libs/http.js';
 
 const app = {
     state: {
+      md:'',
         username:'',
         dashData:{userNumber:11,browNumber:4988,articleNumber:50,discussionNumber:20},
         cachePage: [],
@@ -198,9 +199,9 @@ const app = {
                 let data = response.data
                 let user = data.data;
                 commit('setAvator',"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg")
-                
+
                 this.state.username = user.name
-    
+
                 resolve()
               }
             }).catch(error => {
@@ -216,7 +217,7 @@ const app = {
         //     }).then(response => {
         //       if (response.data) {
         //         // console.log(response.data)
-    
+
         //         removeToken()
         //         commit('CLEAR_STATE')
         //         console.log(this.state)

src/views/articles/add-article.vue

@@ -243,6 +243,7 @@ export default {
 
         return self.parse(plainText);
       }
+
     });
     this.offenUsedClass = [
       {
@@ -308,7 +309,10 @@ export default {
       this.publishTimeType = "immediately";
       this.editPublishTime = false;
     },
-    handlePreview() {},
+    handlePreview() {
+      this.$store.state.app.md = this.simplemde.value();
+       this.$router.push({name: "preview_article"});
+    },
     handlePublish() { this.publishLoading = true;},
     handleSaveDraft() {}
   }

src/views/articles/articles.vue

@@ -2,7 +2,7 @@
   <div>
           <Row :gutter="16">
        <Col span="4">
-       <Button @click="handleSelectAll(true)" type="primary">创建文章</Button>
+       <Button @click="toCreateArticle()" type="primary">创建文章</Button>
       </Col>
         <Col :xs="{ span: 14, offset: 2 }" :sm="{ span: 8, offset: 8}" :md="{ span: 6, offset: 10 }" :lg="{ span: 4, offset: 12 }" >
        <Form  label-position="right" :label-width="60">
@@ -173,6 +173,9 @@ export default {
       console.log(datass);
     }, toQuery() {
       console.log('query', this.query)
+    },
+    toCreateArticle(){
+           this.$router.push({name: "add_article"});
     }
   }
 }

src/views/articles/preview.vue

@@ -1,19 +1,40 @@
 <template>
-<div>
-<div class="nav-bar">
-  preview
-</div>
-
-</div>
+  <div class=" markdown " v-html="rawHtml"></div>
 </template>
 
-
 <script>
+import emojione from 'emojione'
+import marked from 'marked'
+import hljs from 'highlight.js'
 export default {
 
+  data() {
+    return {
+      rawHtml: ''
+    }
+  },
+  mounted() {
+    this.rawHtml = this.parse(this.$store.state.app.md)
+  },
+  methods: {
+    parse(content) {
+      marked.setOptions({
+        highlight: (code) => {
+          return hljs.highlightAuto(code).value
+        },
+        sanitize: true
+      })
+
+      return emojione.toImage(marked(content))
+    },
+  },
 }
+
 </script>
-<style lang="less" scoped>
+<style>
 
+@import "simplemde/dist/simplemde.min.css";
+@import "highlight.js/styles/atom-one-dark.css";
+@import "./markdown.css";
 </style>