nuxt.js使用ant-design-vue实现评论组件

前言

此文为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/…

 

          
            
              {{item.author}}
              
              

                {{item.content}}
              
              
                 发表于 {{ item.dateTime }}
              
              //鉴权使用，只有本用户及管理员可以删评论
                
                  
                  
                
              
            
          
        
        
          
          
          

            
              
              
            
            
              
                发表评论
              
            
          
        

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;
      },
}