You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<template>
|
|
|
|
|
<el-form :model="formData" @submit.native.prevent="handleSubmit">
|
|
|
|
|
<el-form-item label="文章标题：" :label-width="formLabelWidth">
|
|
|
|
|
<el-input v-model="formData.title" maxlength="50" required></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="封面图片：" :label-width="formLabelWidth">
|
|
|
|
|
<el-upload
|
|
|
|
|
action="#"
|
|
|
|
|
list-type="picture"
|
|
|
|
|
:on-change="handleFileUpload"
|
|
|
|
|
:file-list="fileList"
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发布时间：" :label-width="formLabelWidth">
|
|
|
|
|
<el-date-picker v-model="formData.publishDate" type="date" placeholder="选择日期"></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="文章标签：" :label-width="formLabelWidth">
|
|
|
|
|
<el-select v-model="formData.tags" placeholder="请选择">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="tag in availableTags"
|
|
|
|
|
:key="tag"
|
|
|
|
|
:label="tag"
|
|
|
|
|
:value="tag"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="内容：" :label-width="formLabelWidth">
|
|
|
|
|
<el-input type="textarea" v-model="formData.content" rows="10" required></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-checkbox v-model="formData.homepageTop">首页置顶</el-checkbox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-checkbox v-model="formData.notification">消息推送</el-checkbox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="handleSubmit">发布</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
formData: {
|
|
|
|
|
title: '',
|
|
|
|
|
coverImage: null,
|
|
|
|
|
publishDate: '',
|
|
|
|
|
tags: '',
|
|
|
|
|
content: '',
|
|
|
|
|
homepageTop: false,
|
|
|
|
|
notification: false
|
|
|
|
|
},
|
|
|
|
|
availableTags: ['标签1', '标签2', '标签3'],
|
|
|
|
|
fileList: [],
|
|
|
|
|
formLabelWidth: '100px'
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleFileUpload(file, fileList) {
|
|
|
|
|
this.fileList = fileList;
|
|
|
|
|
this.formData.coverImage = file.raw;
|
|
|
|
|
},
|
|
|
|
|
handleSubmit() {
|
|
|
|
|
console.log(this.formData);
|
|
|
|
|
this.$message.success('表单已提交');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.el-form {
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
