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

短暂又灿烂的 2022-08-06 09:10:56 阅读数:574

JSNuxt.js使用ant-design-vuenuxt

前言

此文为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;
},
}

 

 

 

版权声明:本文为[短暂又灿烂的]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/weixin_42232156/article/details/126140675