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.
142 lines
4.0 KiB
142 lines
4.0 KiB
<template>
|
|
<div class="wrap">
|
|
<!-- {{ str }} -->
|
|
<h2>标题：</h2>
|
|
<a-input style="margin-bottom: 20px" v-model.trim="title" />
|
|
<h2>封面图片</h2>
|
|
<a-upload
|
|
:action="action"
|
|
:default-file-list="fileList"
|
|
@change="fileChange"
|
|
list-type="picture"
|
|
name="files"
|
|
>
|
|
<a-button v-show="fileList.length === 0">
|
|
<a-icon type="upload" />点击上传
|
|
</a-button>
|
|
</a-upload>
|
|
<h2 style="margin-top: 20px">内容：</h2>
|
|
<div class="edit_container" style="height: auto; margin-bottom: 40px">
|
|
<quill-editor
|
|
:options="editorOption"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event)"
|
|
@focus="onEditorFocus($event)"
|
|
ref="myQuillEditor"
|
|
v-model="content"
|
|
></quill-editor>
|
|
</div>
|
|
<a-button @click="subMit" type="primary">发表</a-button>
|
|
<router-link @click="subMit" style="margin-left: 40px" tag="a-button" to="Community">取消</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
|
|
import 'quill/dist/quill.core.css';
|
|
import 'quill/dist/quill.snow.css';
|
|
import 'quill/dist/quill.bubble.css';
|
|
import { upload } from 'config/api';
|
|
import { addComment } from 'config/selComment';
|
|
|
|
export default {
|
|
name: 'Posting',
|
|
components: { quillEditor },
|
|
data() {
|
|
return {
|
|
str: '发帖界面',
|
|
title: '',
|
|
content: ``,
|
|
editorOption: {
|
|
placeholder: '请在这里输入',
|
|
modules: {
|
|
toolbar: [
|
|
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
|
|
['blockquote', 'code-block'], //引用，代码块
|
|
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
|
|
[{ list: 'ordered' }, { list: 'bullet' }], //列表
|
|
[{ script: 'sub' }, { script: 'super' }], // 上下标
|
|
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
|
[{ direction: 'rtl' }], // 文本方向
|
|
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
|
|
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
|
|
[{ font: [] }], //字体
|
|
[{ align: [] }], //对齐方式
|
|
['clean'], //清除字体样式
|
|
['image', 'video'], //上传图片、上传视频
|
|
],
|
|
},
|
|
},
|
|
action: upload,
|
|
fileList: [], // 附件列表
|
|
files: '', // 附件Id
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('home', ['postDetail', 'postVal']),
|
|
editor() {
|
|
return this.$refs.myQuillEditor.quill;
|
|
},
|
|
},
|
|
methods: {
|
|
onEditorReady(editor) {
|
|
// 准备编辑器
|
|
},
|
|
onEditorBlur() {}, // 失去焦点事件
|
|
onEditorFocus() {}, // 获得焦点事件
|
|
onEditorChange() {
|
|
// 内容改变事件
|
|
// console.log(this.content);
|
|
},
|
|
// 上传图片事件
|
|
fileChange(info) {
|
|
this.fileList = info.fileList;
|
|
if (info.file.status === 'done') {
|
|
this.files = [];
|
|
this.files = info.fileList[0].response.data[0].id;
|
|
console.log(this.files);
|
|
}
|
|
},
|
|
// 发帖
|
|
async subMit() {
|
|
try {
|
|
const params = {
|
|
param: {
|
|
content: this.content,
|
|
category: this.postVal,
|
|
picId: this.files,
|
|
title: this.title,
|
|
},
|
|
};
|
|
const res = await addComment(params);
|
|
const { msg, data, code } = res.data;
|
|
if (code === 200) {
|
|
this.$message.success('发表成功');
|
|
this.$router.push('/Community');
|
|
} else {
|
|
this.$message.error('发表失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error(error);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" >
|
|
.wrap {
|
|
width: 1260px;
|
|
min-height: 1037px;
|
|
margin: 80px auto 28px auto;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
}
|
|
|
|
.ql-editor {
|
|
min-height: 600px;
|
|
max-height: 800px;
|
|
}
|
|
</style>
|
|
|