十次方项目前端，发布吐槽与吐槽评论（十六）

发布吐槽

1.构建页面

我们这里用到VUE常用的富文本编辑器vue-quill-editor
详见文档： https://www.npmjs.com/package/vue-quill-editor
（1）安装vue-quill-editor
yarn add vue-quill-editor
（2）plugins下创建nuxt-quill-plugin.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)

（3）修改nuxt.config.js ,配置插件和样式

  css: [
    'element-ui/lib/theme-chalk/index.css',
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css'
  ],
  plugins: [
    '@/plugins/element-ui',
    { src: '~plugins/vue-infinite-scroll', ssr: false },
    { src: '~plugins/nuxt-quill-plugin.js', ssr: false }
  ],

（4）pages/spit/submit.vue

<template>
<div class="wrapper release-tc">
  <div class="release-box">
    <h3>发布吐槽</h3>
    <div class="editor">
      <div class="quill-editor"
      :content="content"
      @change="onEditorChange($event)"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      v-quill:myQuillEditor="editorOption">
      </div>
      <div class="btns">
        <button class="sui-btn btn-danger btn-release" @click="save">发布</button>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
    <div class="clearfix"></div>
  </div>
</template>
<script>
import '~/assets/css/page-sj-spit-submit.css'
import spitApi from '@/api/spit'
export default {
  data () {
    return {
      content: '',
      editorOption: {
        // some quill options
        modules: {
          toolbar: [
            [{ 'size': ['small', false, 'large'] }],
            ['bold', 'italic'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['link', 'image']
          ]
        }
      }
    }
  },
  mounted() {
    console.log('app init, my quill insrance object is:',
    this.myQuillEditor)
  },
  methods: {
    onEditorBlur(editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus(editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    },
    onEditorChange({ editor, html, text }) {
      console.log('editor change!', editor, html, text)
    this.content = html
    },
    save(){
      spitApi.save({ content:this.content } ).then(res=>{
        this.$message({
          message: res.data.message,
          type: (res.data.flag?'success':'error')
        })
        if(res.data.flag){
          this.$router.push('/spit')
        }
      })
    }
  }
}
</script>
<style>
.quill-editor {
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
</style>

$router.push()的作用是路由跳转。
（5）修改pages/spit/index.vue 链接到此页面

<router-link class="sui-btn btn-block btn-share" to="/spit/submit">发吐槽</router-link>

2.提交吐槽

（1）easyMock模拟数据
URL:spit
Method: post

{
	"code": 20000,
	"flag": true,
	"message": "执行成功"
}

（2）修改api/spit.js ，增加提交吐槽的方法

    save(pojo) {
        return request({
        url: `/${api_name}`,
        method: 'post',
        data: pojo
        })
    }

吐槽评论

1.评论弹出框与提交评论

我们这里的评论弹出框使用elementUI的弹出框来实现
（1）修改pages/spit/_id.vue ,添加弹出框, 弹出框中放置富文本编辑器

<el-dialog  title="评论" :visible.sync="dialogVisible" width="40%" >
    <div class="quill-editor" :content="content" @change="onEditorChange($event)" v-quill:myQuillEditor="editorOption">
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">提交</el-button>
    </el-button>
    </span>
    </el-dialog>

为富文本编辑框添加样式：

<style>
.quill‐editor {
min‐height: 200px;
max‐height: 400px;
overflow‐y: auto;
}
</style>

（2）修改pages/spit/_id.vue代码部分

    data(){
        return {
            pojo:{},
            dialogVisible: false,
            dialogVisible: false,
            content: '',
            editorOption: {
              // some quill options
              modules: {
                toolbar: [
                [{ 'size': ['small', false, 'large'] }],
                ['bold', 'italic'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image']
                ]
              }
            }
        }
    },
        methods:{
      onEditorChange({ editor, html, text }) {
      this.content = html
      },
      save(){
        spitApi.save({ content:this.content,parentid: this.pojo.id }).then(res=>{
          this.$message({
            message: res.data.message,
            type: (res.data.flag?'success':'error')
          })
          if(res.data.flag){
            this.dialogVisible=false
            spitApi.commentlist(this.pojo.id).then(res=>{
            this.commentlist=res.data.data
          })
          }
        })
      }
    }

（3）修改pages/spit/_id.vue 中的回复链接

<a @click="dialogVisible=true;content=''"><i class="fa fa-commenting" aria-hidden="true"></i> {{pojo.comment}}</a>

在吐槽页面中也需要点击评论按钮进行评论，参考上面即可，注意用一个ID替换pojo.id

 <a href="#" @click="dialogVisible=true;content=''"  :id=item.id class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>