<template><div class="editor"><span class="h5 text-left">标题</span><Input v-model="title" size="large" placeholder="请输入标题~~~"/><span class="h5 text-left">内容</span><TinymceEditor ref="editor" v-model="content" :disabled="disabled" @onClick="onClick"></TinymceEditor><Button @click="submitPost">发布</Button><Button type="dashed" @click="submitPost">保存草稿</Button><Button type="warning" @click="clear">重置</Button></div>
</template><script>import TinymceEditor from '@/components/tinymce-editor'export default {name: "EidtPost",components: {TinymceEditor},data() {return {title: '',content: '',disabled: false}},mounted() {let postId = this.$route.params.postIdif (postId) {this.$axios({url: '/post',method: 'get',params: {postId}}).then(response => {let data = response.datathis.title = data.titlethis.content = data.content}).catch(error => {alert('出错了')})}},methods: {// 鼠标单击的事件(editor)
      onClick(e, editor) {// console.log('Element clicked')// console.log(e)// console.log(editor)
      },// 清空内容
      clear() {this.$refs.editor.clear()this.title = ''this.content = ''},submitPost() {this.$axios({url: '/createPost',method: 'post',data: {title: this.title,content: this.content}}).then(response => {let status = response.statuslet data = response.dataif (status === 200 && data.status === 1) {this.$Notice.success({title: '成功',desc: ''})this.$router.push({name: 'Index'})} else {this.$Notice.error({title: '出错',desc: data.msg})}}).catch(error => {alert("出错了")})}}}
</script><style scoped>.editor {padding: 20px;height: 100%;margin-left: 10%;margin-right: 10%;text-align: left;}</style>

{path: '/editPost',name: 'EidtPost',component: EidtPost
},

const create = () => {return {status: 1,msg: '成功'}
}Mock.mock('/createPost', 'post', create)

<template><div><Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="scroll" :height="height"><EditPostList v-for="(item,index) in postList" :postId="item.postId" :postTitle="item.title":content="item.content":postCount="postCount":key="index"></EditPostList></Scroll></div>
</template><script>import EditPostList from '@/components/edit-post-list'export default {name: "EditList",components: {EditPostList},data() {return {height: document.body.clientHeight * 0.85,scroll: [20, 20],postList: [],postCount: 100}},created() {this.getPostList()},methods: {handleReachBottom() {this.getPostList()},getPostList() {this.$axios({url: '/api/posts',method: 'get'}).then(response => {this.postList = [...this.postList, ...response.data.posts]})}}}
</script><style scoped></style>

<template><div style="background: #eee;padding: 1px; margin-left: 10%;margin-right: 10%"><router-link tag="div" :to="{name:'Post',params:{postId}}"><Card :bordered="false" class="text-left"><div><p slot="title" style="margin-bottom: 0px;height: 25px"><Avatar icon="ios-paper-outline" size="small"/>&nbsp;&nbsp;<b> {{postTitle}}</b></p><p>{{content}}</p><div><p>2019-05-29</p><Button style="position: absolute;right: 20px;bottom: 20px" size="small" @click.stop="editPost(postId)">修改</Button></div></div></Card></router-link></div>
</template><script>export default {name: "EditPostList",props: {postId: {type: String,default: ''},postTitle: {type: String,default: ''},content: {type: String,default: ''},postCount: {type: Number,default: 0}},methods: {editPost(postId){this.$router.push({name:'EidtPost',params:{postId}})}}}
</script><style scoped>div p {margin-bottom: 0px;height: 25px}
</style>

//引入mockjs
const Mock = require('mockjs')
// 获取mock.Random对象
const Random = Mock.Random//mock数据
const postList = () => {let posts = []for (let i = 0; i < 10; i++) {let post = {postId: Random.integer(1, 1000) + '',title: Random.csentence(5, 15),content: Random.csentence(50, 100)}posts.push(post)}return {posts: posts}
}
Mock.mock('/api/posts', 'get', postList)