From e57335fca9c5927ce980a15474f34103407d0e24 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sun, 6 Dec 2020 23:53:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/markdown/index.vue | 46 +++++++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index a979db1..df047d0 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -10,9 +10,20 @@
             <span class="title-label">标题：</span>
             <el-input class="articles-title" placeholder="文章标题" v-model="filename" />
           </div>
+          <p class="url-slug"><span>{{ articleLink }}</span>
+            <el-input
+              class="mark-setting-input"
+              placeholder="缩略名"
+              v-model="file.slug"
+              autosize
+              size="mini"
+              :style="{width:text(file.slug)}"
+            >
+            </el-input>
+          </p>
         </el-header>
         <el-main>
-          <div id="vditor" v-loading="vditorLoading"></div>
+          <div id="vditor" :style="{maxHeight: clientHeight + 'px'}" v-loading="vditorLoading"></div>
         </el-main>
       </div>
       <div class="editor-right">
@@ -29,13 +40,6 @@
             placeholder="输入图片URL"
             v-model="file.cover">
           </el-input>
-          <p class="mark-setting-label">缩略名：</p>
-          <el-input
-            class="mark-setting-input"
-            placeholder="缩略名"
-            v-model="file.slug">
-          </el-input>
-          <span class="instruction">本文链接：<a>{{file.slug ? articleLink+file.slug : articleLink+file.id}}</a></span>
           <p class="mark-setting-label">分类：</p>
           <el-tree
             class="category-tree"
@@ -217,6 +221,17 @@
         this.valueHasChanged()
       }
     },
+    computed: {
+      text () {
+        return function (value) {
+          if (value === '' || value === 0) {
+            return '100%'
+          } else {
+            return String(value).length * 14 - 30 + 'px'
+          }
+        }
+      }
+    },
     methods: {
       reload() {
         this.getMarkdown(true)
@@ -461,7 +476,7 @@
 <style lang="scss" scoped>
 @import "src/styles/setting";
   /deep/ .el-main {
-    padding: 30px 20px 20px 20px;
+    padding: 60px 20px 20px 20px;
     .v-note-wrapper {
       z-index: 200;
     }
@@ -598,4 +613,17 @@
   max-height: 500px;
   overflow: auto;
 }
+/deep/ .url-slug {
+  span {
+    color: #aaaaaa;
+  }
+  input {
+    font-size: 14px;
+    padding: 0;
+    background-color: #3f9eff2e;
+    border: 0;
+    height: 18px;
+    line-height: 18px;
+  }
+}
 </style>