添加了转载文章按钮,并对于界面布局进行了调整
代码如下:
<template>
<div>
<headers_copy>
</headers_copy>
<div class="m-content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
style="margin-top: 20px;margin-right: 20px" class="demo-ruleForm">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="摘要" prop="summary">
<el-input type="textarea" v-model="ruleForm.summary"></el-input>
</el-form-item>
<div>
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
</div>
<br>
<el-form-item label="内容" prop="mdContent">
<mavon-editor v-model="ruleForm.mdContent" ref="md" @imgAdd="imgAdd">
</mavon-editor>
</el-form-item>
<el-form-item label="保存至草稿箱" prop="state" class="draftbutton">
<el-switch v-model="ruleForm.state "
active-value="0"
inactive-value="1">
</el-switch>
</el-form-item>
<el-form-item label="转载文章" prop="state" class="draftbutton">
<el-switch v-model="ruleForm.original "
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import Headers_copy from "@/components/headers_copy";
import request from "@/utils/request";
const axios = require('axios');
import qs from 'qs';
export default {
name: "BlogEdit",
components: {Headers_copy, Headers},
data() {
return {
aid:"",
ruleForm:
{
uid: sessionStorage.getItem("uid"),
title: "",
summary: "",
mdContent: "",
state: '',
tags:[],
sid:'',
aid:'',
original:0
},
dynamicTags: [],
inputVisible: false,
inputValue: '',
rules: {
title: [
{required: true, message: '请输入标题', trigger: 'blur'},
{min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
],
summary: [
{required: true, message: '请输入摘要', trigger: 'blur'}
],
mdContent: [
{required: true, message: '请输入内容', trigger: 'blur'}
],
}
};
},
methods: {
imgAdd(pos, $file) {
let formdata = new FormData();
formdata.append('file', $file);
formdata.append('aid',-1)
formdata.append('sid',-1)
axios.post('/upload',formdata
).then((res) => {
if (res.data.code === 200)
{
this.$message.success("上传成功!");
this.$refs.md.$img2Url(pos, res.data.data);
}
else
{
this.$message.error(res.data.data.msg);
}
});
},
submitForm(formName) {
const _this =this
this.$refs[formName].validate((valid) => {
if (valid) {
//axios的post方法提交Markdown数据
// let para = this.ruleForm
let url='http://47.107.40.143:8080/creatArticle';//请求的接口地址
let url_data=this.$qs.stringify({ //使用qs编译转换参数 ,将参数赋值与url_data
//qs编译转换的参数, user_id为接口关键字,7为参数值
// 传递测试数据
uid:sessionStorage.getItem("uid") ,
title: this.ruleForm.title,
summary: this.ruleForm.summary,
mdContent: this.ruleForm.mdContent,
state: this.ruleForm.state,
tags:_this.dynamicTags,
sid:this.$route.query.sid,
aid:'',
atype:this.$route.query.atype,
original:this.ruleForm.original
},{arrayFormat:'repeat'})
this.$axios.post(url,url_data).then(rese=>{ //post接口请求
this.aid=rese.data.data
if(rese.data.code!==200)
{
_this.$alert(rese.data.msg, '提示', {
confirmButtonText: '确定',
callback: action => {
_this.$router.push("/blog/add")
}
});
}
if(rese.data.code===200)
{
_this.$alert('新建成功', '提示', {
confirmButtonText: '确定',
callback: action => {
this.$router.push(
{
name:'BlogDetail',
query:{aid:this.aid}
}
)
}
});
}
}
)
} else {
console.log('error submit!!');
return false;
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}
}
}
</script>
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.m-content{
text-align: center;
}
.draftbutton{
text-align: left;
margin-left: 50px;
}
.tag{
float: left;
}
</style>
界面布局如下: