前言

此文为Nuxt引入ant-design-vue+使用评论组件过程记录。

ant-design-vue

ant-design-vue是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。具有丰富的组件，但语法较为滞后，很多地方没有得到同步更新与维护。此次论坛搭建为方便起见使用了该组件库的评论组件。

官方网址：www.antdv.com/docs/vue/in…

开源地址：github.com/vueComponen…

nuxt引入ant-design-vue

1. npm i --save ant-design-vue
2. 在plugins中创建ant-design-vue.js

plugins/ant-design-vue.js

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' // Per Ant Design's docs

Vue.use(Antd)

3. nuxt.config.js配置

  plugins: [
    '@/plugins/ant-design-vue'
  ],

评论组件的使用

文档地址：www.antdv.com/components/…

<a-list
          v-if="comments.length"
          :data-source="comments"
          item-layout="horizontal"
        >
          <a-list-item slot="renderItem" slot-scope="item" :key="item.id">
            <a-comment>
              <a slot="author">{{item.author}}</a>
              <a-avatar
                slot="avatar"
                src="https://cdn.vuetifyjs.com/images/john.jpg"
                alt="User"
              />
              <p slot="content">
                {{item.content}}
              </p>
              <a-tooltip slot="datetime">
                <span> 发表于 {{ item.dateTime }}</span>
              </a-tooltip>
              <a-tooltip title="Delete" v-if="item.auth === true">//鉴权使用，只有本用户及管理员可以删评论
                <a>
                  <a-icon
                    type="delete"
                    color="#1976d2"
                    @click="deleteComment(item)"
                  >
                  </a-icon>
                </a>
              </a-tooltip>
            </a-comment>
          </a-list-item>
        </a-list>
        <a-comment>
          <a-avatar
            slot="avatar"
            src="https://cdn.vuetifyjs.com/images/john.jpg"
            alt="匿名用户"
          >
          </a-avatar>
          <div slot="content">
            <a-form-item>
              <a-textarea :rows="4" :value="value" @change="handleCommentChange">
              </a-textarea>
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" :loading="submitting" type="primary" @click="handleCommentSubmit">
                发表评论
              </a-button>
            </a-form-item>
          </div>
        </a-comment>

data(){
	return {
        value: '',
        comments: [],
        submitting: false,
    }
}

methods: {
      async handleCommentSubmit() {
        if (!this.value) {
          return;
        }
        if (!this.$store.state.username) {
          return this.$router.push('/login');
        }
        this.submitting = true;
        //TODO getdata() from server
        this.value = '';
      },
      handleCommentChange(e) {
        this.value = e.target.value;
      },
}

效果如下：