Skip to content

Commit a3f625e

Browse files
fxss5201fxss5201
committedMar 7, 2020
对编辑页面进行改版，更方便使用
1 parent 8eef246 commit a3f625e

File tree

3 files changed

+76
-38
lines changed

3 files changed

+76
-38
lines changed
 

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=zh_CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-blog/favicon.ico><title>vue-blog</title><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><link href=/vue-blog/css/group-about.c1fac219.css rel=prefetch><link href=/vue-blog/css/group-about~group-home~group-list.7213465d.css rel=prefetch><link href=/vue-blog/css/group-admin.cfce19f8.css rel=prefetch><link href=/vue-blog/css/group-detail.704a2ec8.css rel=prefetch><link href=/vue-blog/css/group-editor.84f50f17.css rel=prefetch><link href=/vue-blog/css/group-home.1ea2f575.css rel=prefetch><link href=/vue-blog/css/group-list.e0aa04df.css rel=prefetch><link href=/vue-blog/css/group-signIn.f23c9712.css rel=prefetch><link href=/vue-blog/js/group-about.35c63d02.js rel=prefetch><link href=/vue-blog/js/group-about~group-home~group-list.ffaef8aa.js rel=prefetch><link href=/vue-blog/js/group-admin.9a3416f2.js rel=prefetch><link href=/vue-blog/js/group-detail.520bba14.js rel=prefetch><link href=/vue-blog/js/group-editor.44453a49.js rel=prefetch><link href=/vue-blog/js/group-home.639d16e7.js rel=prefetch><link href=/vue-blog/js/group-list.4529e977.js rel=prefetch><link href=/vue-blog/js/group-signIn.ec72b8ae.js rel=prefetch><link href=/vue-blog/css/app.4d665074.css rel=preload as=style><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=preload as=style><link href=/vue-blog/js/app.b30ed408.js rel=modulepreload as=script><link href=/vue-blog/js/chunk-vendors.1510f57c.js rel=modulepreload as=script><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=stylesheet><link href=/vue-blog/css/app.4d665074.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script type=module src=/vue-blog/js/chunk-vendors.1510f57c.js></script><script type=module src=/vue-blog/js/app.b30ed408.js></script><script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/vue-blog/js/chunk-vendors-legacy.a9de3e9c.js nomodule></script><script src=/vue-blog/js/app-legacy.62d1d2ae.js nomodule></script></body></html>
1+
<!DOCTYPE html><html lang=zh_CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-blog/favicon.ico><title>vue-blog</title><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><link href=/vue-blog/css/group-about.c1fac219.css rel=prefetch><link href=/vue-blog/css/group-about~group-home~group-list.db8a14a4.css rel=prefetch><link href=/vue-blog/css/group-admin.12d3407c.css rel=prefetch><link href=/vue-blog/css/group-detail.000a71e8.css rel=prefetch><link href=/vue-blog/css/group-editor.dfb7a40f.css rel=prefetch><link href=/vue-blog/css/group-home.1ea2f575.css rel=prefetch><link href=/vue-blog/css/group-list.e0aa04df.css rel=prefetch><link href=/vue-blog/css/group-signIn.f23c9712.css rel=prefetch><link href=/vue-blog/js/group-about.35c63d02.js rel=prefetch><link href=/vue-blog/js/group-about~group-home~group-list.ffaef8aa.js rel=prefetch><link href=/vue-blog/js/group-admin.9a3416f2.js rel=prefetch><link href=/vue-blog/js/group-detail.520bba14.js rel=prefetch><link href=/vue-blog/js/group-editor.89b65ee4.js rel=prefetch><link href=/vue-blog/js/group-home.639d16e7.js rel=prefetch><link href=/vue-blog/js/group-list.4529e977.js rel=prefetch><link href=/vue-blog/js/group-signIn.ec72b8ae.js rel=prefetch><link href=/vue-blog/css/app.31207544.css rel=preload as=style><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=preload as=style><link href=/vue-blog/js/app.c35af113.js rel=modulepreload as=script><link href=/vue-blog/js/chunk-vendors.1510f57c.js rel=modulepreload as=script><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=stylesheet><link href=/vue-blog/css/app.31207544.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script type=module src=/vue-blog/js/chunk-vendors.1510f57c.js></script><script type=module src=/vue-blog/js/app.c35af113.js></script><script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/vue-blog/js/chunk-vendors-legacy.a9de3e9c.js nomodule></script><script src=/vue-blog/js/app-legacy.a3c80318.js nomodule></script></body></html>

‎src/plugins/mavon-editor-toolbars.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default {
1414
imagelink: true, // 图片链接
1515
code: true, // code
1616
table: true, // 表格
17-
fullscreen: true, // 全屏编辑
17+
fullscreen: false, // 全屏编辑
1818
readmodel: true, // 沉浸式阅读
1919
htmlcode: true, // 展示html源码
2020
help: true, // 帮助

‎src/views/Editor.vue

+74-36
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,54 @@
44
:rules="rules"
55
ref="articleInfo"
66
label-width="100px">
7-
<el-page-header @back="$router.go(-1)" content="编辑页面" style="padding: 0 0 20px 30px;margin-bottom: 22px;line-height: 32px;border-bottom: 1px solid #EBEEF5;"></el-page-header>
8-
<el-form-item label="文章标题" prop="name">
9-
<el-input v-model="articleInfo.name" placeholder="请填入文章标题"></el-input>
10-
</el-form-item>
11-
<el-form-item label="文章性质" prop="nature">
12-
<el-select v-model="articleInfo.nature" placeholder="请选择文章性质">
13-
<el-option label="原创" :value="0"></el-option>
14-
<el-option label="转载" :value="1"></el-option>
15-
<el-option label="翻译" :value="2"></el-option>
16-
</el-select>
17-
</el-form-item>
18-
<el-form-item label="文章关键词">
19-
<el-tag
20-
v-for="tag in articleInfo.keyWords"
21-
:key="tag"
22-
closable
23-
:disable-transitions="false"
24-
@close="handleClose(tag)">
25-
{{tag}}
26-
</el-tag>
27-
<el-input
28-
class="input-new-tag"
29-
v-if="inputVisible"
30-
v-model="inputValue"
31-
ref="saveTagInput"
32-
size="small"
33-
@keyup.enter.native="handleInputConfirm"
34-
@blur="handleInputConfirm"
35-
>
36-
</el-input>
37-
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
38-
</el-form-item>
39-
<el-form-item label="文章内容" prop="desc">
7+
<el-page-header @back="$router.go(-1)" class="editor-page-header">
8+
<template v-slot:title>
9+
<div class="back">返回</div>
10+
</template>
11+
<template v-slot:content>
12+
<div class="flex">
13+
<el-form-item label-width="0" prop="name" style="flex: auto;">
14+
<el-input v-model="articleInfo.name" placeholder="请填入文章标题"></el-input>
15+
</el-form-item>
16+
<el-form-item label-width="20px">
17+
<el-button type="primary" @click="submitForm('articleInfo')">{{ $route.params.id ? '更新' : '保存' }}</el-button>
18+
</el-form-item>
19+
</div>
20+
</template>
21+
</el-page-header>
22+
<div class="flex">
23+
<el-form-item label="文章性质" prop="nature">
24+
<el-select v-model="articleInfo.nature" placeholder="请选择文章性质">
25+
<el-option label="原创" :value="0"></el-option>
26+
<el-option label="转载" :value="1"></el-option>
27+
<el-option label="翻译" :value="2"></el-option>
28+
</el-select>
29+
</el-form-item>
30+
<el-form-item label="文章关键词">
31+
<el-tag
32+
v-for="tag in articleInfo.keyWords"
33+
:key="tag"
34+
closable
35+
:disable-transitions="false"
36+
@close="handleClose(tag)">
37+
{{tag}}
38+
</el-tag>
39+
<template v-if="articleInfo.keyWords.length < 4">
40+
<el-input
41+
class="input-new-tag"
42+
v-if="inputVisible"
43+
v-model="inputValue"
44+
ref="saveTagInput"
45+
size="small"
46+
@keyup.enter.native="handleInputConfirm"
47+
@blur="handleInputConfirm"
48+
>
49+
</el-input>
50+
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
51+
</template>
52+
</el-form-item>
53+
</div>
54+
<el-form-item label="文章内容" prop="desc" style="margin-bottom: 0;">
4055
<mavon-editor
4156
v-model="articleInfo.desc"
4257
codeStyle="vs2015"
@@ -45,13 +60,11 @@
4560
:boxShadow="false"
4661
:autofocus="false"
4762
:toolbars="toolbars"
63+
:tabSize="2"
4864
@imgAdd="imgAdd"
4965
@imgDel="imgDel">
5066
</mavon-editor>
5167
</el-form-item>
52-
<el-form-item>
53-
<el-button type="primary" @click="submitForm('articleInfo')">{{ $route.params.id ? '更新' : '保存' }}</el-button>
54-
</el-form-item>
5568
</el-form>
5669
</template>
5770

@@ -248,6 +261,29 @@ export default {
248261
</script>
249262

250263
<style scoped lang="scss">
264+
.editor-page-header {
265+
padding: 0 0 0 30px;
266+
margin-bottom: 22px;
267+
border-bottom: 1px solid #EBEEF5;
268+
/deep/ {
269+
.el-page-header__left {
270+
margin-bottom: 20px;
271+
}
272+
.el-page-header__content {
273+
flex: auto;
274+
}
275+
.el-form-item {
276+
margin: 0;
277+
}
278+
}
279+
.back {
280+
line-height: 40px;
281+
}
282+
}
283+
.flex {
284+
display: flex;
285+
align-items: center;
286+
}
251287
.el-tag + .el-tag,
252288
.el-tag + .button-new-tag,
253289
.el-tag + .input-new-tag {
@@ -265,5 +301,7 @@ export default {
265301
}
266302
.v-note-wrapper {
267303
border: 1px solid #DCDFE6;
304+
height: calc(100vh - 190px);
305+
max-height: calc(100vh - 190px);
268306
}
269307
</style>

0 commit comments

Comments
 (0)
Failed to load comments.