<template>
|
<div class="myFrom">
|
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
<a-form-model-item label="标题">
|
<a-input v-model="form.title" placeholder="限 50字内" />
|
</a-form-model-item>
|
|
<a-form-model-item label="模式切换">
|
<a-switch v-model="form.online" />
|
<span class="myTip">
|
本地编辑/由系统生成文件
|
</span>
|
</a-form-model-item>
|
|
|
<a-form-model-item label="日志文件" v-show="!form.online">
|
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
:default-file-list="form.blogFileList">
|
<a-button>
|
<a-icon type="upload" /> 限 md/html 文件
|
</a-button>
|
</a-upload>
|
</a-form-model-item>
|
|
<a-form-model-item label="日志内容" v-show="form.online">
|
<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
|
</a-form-model-item>
|
|
<a-form-model-item label="分类">
|
<a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
|
:getPopupContainer="getCalendarContainer()">
|
<a-select-option value="shanghai">
|
Zone one
|
</a-select-option>
|
<a-select-option value="beijing">
|
Zone two
|
</a-select-option>
|
<a-select-option value="beijing2">
|
Zone two
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
|
<a-form-model-item label="偏好">
|
<a-switch v-model="form.preference" />
|
</a-form-model-item>
|
|
<div v-show="form.preference" class="myBorder" style="padding:10px;">
|
<a-form-model-item label="草稿模式">
|
<a-switch v-model="form.tempSave" />
|
<span v-show="form.tempSave" class="myTip">
|
临时存储,将不会发布该篇日志
|
</span>
|
</a-form-model-item>
|
|
<a-form-model-item label=" 文件类型">
|
<a-radio-group v-model="form.blogType">
|
<a-radio value="Markdown">
|
Markdown
|
</a-radio>
|
<a-radio value="Html">
|
Html
|
</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
|
|
<a-form-model-item label="标签">
|
<template v-for="(tag, index) in tags">
|
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
|
{{ `${tag.slice(0, 20)}...` }}
|
</a-tag>
|
</a-tooltip>
|
<a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
|
{{ tag }}
|
</a-tag>
|
</template>
|
<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
|
:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
|
@keyup.enter="handleInputConfirm" />
|
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
|
<a-icon type="plus" /> New Tag
|
</a-tag>
|
</a-form-model-item>
|
|
|
<a-form-model-item label="封面">
|
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
|
:default-file-list="form.coverFileList" class="upload-list-inline">
|
<a-button>
|
<a-icon type="upload" /> jpg/png/jpeg..
|
</a-button>
|
</a-upload>
|
</a-form-model-item>
|
|
<a-form-model-item label="定时">
|
<a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
|
style="width: 100%;" :disabledDate="disabledDate"
|
:getCalendarContainer="getCalendarContainer()" />
|
</a-form-model-item>
|
|
|
|
<div v-bind:class="{'myBorder':form.lock}">
|
|
<a-form-model-item label="加锁">
|
<a-switch v-model="form.lock" />
|
<span v-show="!form.lock" class="myTip">
|
默认为公开
|
</span>
|
</a-form-model-item>
|
|
<div v-show="form.lock ">
|
<a-form-model-item label="阅读权限">
|
<a-radio-group v-model="form.auth">
|
<a-radio value="private">
|
私人
|
</a-radio>
|
<a-radio value="password">
|
密码授权
|
</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
|
<a-form-model-item label="授权密码" v-show="form.auth=='password'">
|
<a-input v-model="form.password" type="password" placeholder="Password">
|
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
|
</a-input>
|
</a-form-model-item>
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form-model>
|
</div>
|
</template>
|
|
<script>
|
import moment from "moment";
|
export default {
|
data() {
|
return {
|
blogFileList: [],
|
coverFileList: [
|
// {
|
// uid: '-1',
|
// name: 'xxx.png',
|
// status: 'done',
|
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// }
|
],
|
tags: [],
|
inputVisible: false,
|
inputValue: '',
|
labelCol: {
|
span: 5
|
},
|
wrapperCol: {
|
span: 19
|
},
|
form: {
|
preference: true,
|
title: '',
|
content: '',
|
class: [],
|
tempSave: false,
|
blogType: "Markdown",
|
publishDate: "",
|
lock: false,
|
auth: "private",
|
password: "",
|
blogFileList: [],
|
coverFileList: [
|
// {
|
// uid: '-1',
|
// name: 'xxx.png',
|
// status: 'done',
|
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// }
|
],
|
},
|
};
|
},
|
methods: {
|
disabledDate(current) {
|
return current < moment().subtract(1, "day");
|
},
|
getCalendarContainer(trigger) {
|
return trigger => trigger.parentNode;
|
},
|
handleClose(removedTag) {
|
const tags = this.tags.filter(tag => tag !== removedTag);
|
console.log(tags);
|
this.tags = tags;
|
},
|
|
showInput() {
|
this.inputVisible = true;
|
this.$nextTick(function() {
|
this.$refs.input.focus();
|
});
|
},
|
|
handleInputChange(e) {
|
this.inputValue = e.target.value;
|
},
|
|
handleInputConfirm() {
|
const inputValue = this.inputValue;
|
let tags = this.tags;
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
tags = [...tags, inputValue];
|
}
|
console.log(tags);
|
Object.assign(this, {
|
tags,
|
inputVisible: false,
|
inputValue: '',
|
});
|
},
|
onSubmit() {
|
console.log('submit!', this.form);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.myTip {
|
font-size: 10px;
|
color: #999;
|
}
|
|
.myBorder {
|
border: 1px solid #999;
|
}
|
|
.ant-upload-list-item-info {
|
a {
|
color: #999;
|
}
|
}
|
|
/* tile uploaded pictures */
|
.upload-list-inline>.ant-upload-list-item {
|
float: left;
|
width: 100px;
|
margin-right: 8px;
|
}
|
|
.upload-list-inline>.ant-upload-animate-enter {
|
animation-name: uploadAnimateInlineIn;
|
}
|
|
.upload-list-inline>.ant-upload-animate-leave {
|
animation-name: uploadAnimateInlineOut;
|
}
|
</style>
|
