优化：图片输入组件
This commit is contained in:
jmal
parent
d27061de74
commit
23cab73238
@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
action="/api/upload-markdown-image"
|
||||
:headers="headers"
|
||||
:data="extraData"
|
||||
name="files"
|
||||
accept="image/*"
|
||||
:show-file-list="false"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
:on-remove="handleFileListRemove"
|
||||
>
|
||||
<el-button size="small" type="text">点击上传</el-button><span>或者输入图片的url</span>
|
||||
<div v-if="uploadState > 0" slot="tip">{{ uploadState === 1 ? '图片上传中' : '图片上传成功' }} <i :class="{'el-icon-loading': uploadState === 1, 'el-icon-check': uploadState === 2}"></i></div>
|
||||
</el-upload>
|
||||
<div class="upload">
|
||||
<div class="url-desc url-desc-first">输入图片的url 或</div>
|
||||
<el-upload
|
||||
class="upload"
|
||||
ref="uploadRef"
|
||||
action="/api/upload-markdown-image"
|
||||
:headers="headers"
|
||||
:data="extraData"
|
||||
name="files"
|
||||
accept="image/*"
|
||||
:show-file-list="false"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
:on-remove="handleFileListRemove"
|
||||
>
|
||||
<el-button size="small" type="text">点击上传</el-button>
|
||||
<div class="url-desc" v-if="uploadState > 0" slot="tip">{{ uploadState === 1 ? ' 图片上传中' : ' 图片上传成功' }} <i :class="{'el-icon-loading': uploadState === 1, 'el-icon-check': uploadState === 2}"></i></div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<el-input :autosize="{ minRows: 1, maxRows: 4}" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
|
||||
<el-input :autosize="{ minRows: 1, maxRows: 6}" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
|
||||
<div slot="content">
|
||||
<el-image style="width: 150px;" :src="currentValue" fit="contain" @load="loadSuccess"></el-image>
|
||||
</div>
|
||||
@ -53,7 +57,7 @@ export default {
|
||||
isLocked: false, // true表示输入框正在输入状态
|
||||
timer: null,
|
||||
uploadState: 0, // 文件上传状态, 0 没有文件上传, 1 正在上传, 2 上传成功
|
||||
uploadTip: ''
|
||||
uploadTip: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -117,6 +121,23 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.upload {
|
||||
display: flex;
|
||||
.url-desc {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.url-desc-first {
|
||||
padding: 4px 10px 4px 0;
|
||||
}
|
||||
}
|
||||
/deep/ .el-checkbox {
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
.el-checkbox__label {
|
||||
padding-left: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
/deep/ .el-upload-list--picture {
|
||||
.el-upload-list__item-thumbnail {
|
||||
width: unset;
|
||||
|
||||
@ -97,12 +97,7 @@
|
||||
<div class="more-setting">
|
||||
<h2>更多设置</h2>
|
||||
<p class="mark-setting-label">文章封面：</p>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom" :disabled="!file.cover || file.cover.length === 0">
|
||||
<el-input autosize type="textarea" width="100%" v-model="file.cover"></el-input>
|
||||
<div slot="content">
|
||||
<el-image style="width: 150px;" :src="file.cover" fit="contain"></el-image>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<upload-image-input v-model="file.cover"/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
@ -118,6 +113,7 @@
|
||||
import categoryApi from "@/api/category";
|
||||
import tagApi from "@/api/tag";
|
||||
import EditElement from "@/views/markdown/EditElement";
|
||||
import UploadImageInput from "@/components/input/UploadImageInput";
|
||||
|
||||
let toolbar = [
|
||||
'emoji',
|
||||
@ -162,7 +158,7 @@
|
||||
name: 'MarkdownEditor',
|
||||
components: {
|
||||
EditElement,
|
||||
DirTree, Vditor
|
||||
DirTree, Vditor, UploadImageInput
|
||||
},
|
||||
props: {
|
||||
hasChange: {
|
||||
|
||||
@ -60,28 +60,13 @@
|
||||
<span class="instruction">选中项会显示在导航栏中</span>
|
||||
|
||||
<div class="config-itme-label">归档界面背景大图：</div>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.archiveBackground || form.archiveBackground.length === 0">
|
||||
<el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.archiveBackground"></el-input>
|
||||
<div slot="content">
|
||||
<el-image style="width: 150px;" :src="form.archiveBackground" fit="contain"></el-image>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<upload-image-input v-model="form.archiveBackground"/>
|
||||
<span class="instruction">在这里填入图片的URL地址, 以在归档页面显示一个背景大图。</span>
|
||||
<div class="config-itme-label">分类界面背景大图：</div>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.categoryBackground || form.categoryBackground.length === 0">
|
||||
<el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.categoryBackground"></el-input>
|
||||
<div slot="content">
|
||||
<el-image style="width: 150px;" :src="form.categoryBackground" fit="contain"></el-image>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<upload-image-input v-model="form.categoryBackground"/>
|
||||
<span class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图。</span>
|
||||
<div class="config-itme-label">标签界面背景大图：</div>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.tagBackground || form.tagBackground.length === 0">
|
||||
<el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.tagBackground"></el-input>
|
||||
<div slot="content">
|
||||
<el-image style="width: 150px;" :src="form.tagBackground" fit="contain"></el-image>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<upload-image-input v-model="form.tagBackground"/>
|
||||
<span class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图。</span>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="网站页脚" name="4">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user