完成markdown

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "element-ui": "^1.1.6",
     "vue": "^2.1.10",
+    "vue-markdown": "^2.1.3",
     "vue-quill-editor": "^1.1.1",
     "vue-router": "^2.2.0",
     "vue-tables-2": "^0.4.33"

src/components/common/sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sidebar">
-        <el-menu default-active="basetable" class="el-menu-vertical-demo" theme="dark" unique-opened router>
+        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
             <el-submenu index="1">
                 <template slot="title"><i class="el-icon-menu"></i>表格</template>
                 <el-menu-item index="basetable">基础表格</el-menu-item>
@@ -10,6 +10,7 @@
                 <template slot="title"><i class="el-icon-date"></i>表单</template>
                 <el-menu-item index="baseform">基本表单</el-menu-item>
                 <el-menu-item index="vueeditor">编辑器</el-menu-item>
+                <el-menu-item index="markdown">markdown</el-menu-item>
                 <el-menu-item index="2-3">文件上传</el-menu-item>
             </el-submenu>
             <el-submenu index="3">
@@ -24,8 +25,10 @@
 </template>
 <script>
     export default {
-        methods:{
-
+        computed:{
+            onRoutes(){
+                return this.$route.path.replace('/','');
+            }
         }
     }
 </script>

src/components/page/Markdown.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
+                <el-breadcrumb-item>markdown</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="plugins-tips">
+            vue-markdown：一个基于vue.js的markdown语法解析插件。
+            访问地址：<a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>
+        </div>
+        <textarea class="markdown-left" v-model="content"></textarea>
+        <vue-markdown class="markdown-right" :source="content"></vue-markdown>
+    </div>
+</template>
+
+<script>
+    import VueMarkdown from 'vue-markdown';
+    export default {
+        data: function(){
+            return {
+                content:'# Hello BBK'
+            }
+        },
+        components: {
+            VueMarkdown
+        }
+    }
+</script>
+
+<style scoped>
+    .markdown-left,.markdown-right{
+        width:48%;
+        height: 700px;
+        float: left;
+        padding:10px;
+        box-sizing: border-box;
+        border: 1px solid #ddd;
+        overflow-y: scroll;
+    }
+    .markdown-right{
+        margin-left: 3%;
+    }
+</style>

src/components/page/VueEditor.vue

@@ -55,12 +55,4 @@
     .editor-btn{
         margin-top: 20px;
     }
-    .plugins-tips{
-        padding:10px;
-        margin-bottom: 20px;
-        background: #eef1f6;
-    }
-    .plugins-tips a{
-        color: #20a0ff;
-    }
 </style>

src/router/index.js

@@ -20,6 +20,10 @@ export default new Router({
         {
             path: '/vueeditor',
             component: resolve => require(['../components/page/VueEditor.vue'], resolve)
+        },
+        {
+            path: '/markdown',
+            component: resolve => require(['../components/page/Markdown.vue'], resolve)
         }
     ]
 })

static/css/main.css

@@ -27,40 +27,15 @@ a{text-decoration: none}
     margin: 20px 0;
     text-align: right;
 }
-.widget-box{
-    max-width: 1200px;
-    background: none repeat scroll 0 0 #F9F9F9;
-    border-left: 1px solid #F0F8FF;
-    border-top: 2px solid #27a9e3;
-    border-right: 2px solid #cdcdcd;
-    clear: both;
-    margin:0 auto 30px;
-    position: relative;
-}
-.widget-box:hover{
-    box-shadow: 0 2px 7px rgba(0,0,0,.15);
-}
-.widget-title{
-    background: #efefef;
-    border-bottom: 1px solid #F0F8FF;
-    height: 40px;
-}
-.widget-title h5 {
-    color: #666;
-    padding: 12px;
-    margin: 0;
-    font-weight: normal;
-}
-.widget-content {
-    padding:25px;
-    border-bottom: 2px solid #cdcdcd;
-}
-.widget-box .el-select,
-.widget-box .el-input,
-.widget-box .el-upload,
-.widget-box .el-tooltip{
-    display: inline-block;
+.plugins-tips{
+    padding:10px;
+    margin-bottom: 20px;
+    background: #eef1f6;
+}
+.plugins-tips a{
+    color: #20a0ff;
 }
+
 .el-button+.el-tooltip {
     margin-left: 10px;
 }
@@ -70,15 +45,9 @@ a{text-decoration: none}
 .el-table tr:hover{
     background: #f6faff;
 }
-.page-box{
-    margin-top: 20px;
-    text-align: right;
-}
-.page-box .el-pagination{
-    background: #f9f9f9;
-}
+
 .mgb20{
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 .mgb5{
     margin-bottom: 5px;