前言
此文为Nuxt引入ant-design-vue+使用评论组件过程记录。
ant-design-vue
ant-design-vue是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。具有丰富的组件,但语法较为滞后,很多地方没有得到同步更新与维护。此次论坛搭建为方便起见使用了该组件库的评论组件。
官方网址:www.antdv.com/docs/vue/in…
nuxt引入ant-design-vue
npm i --save ant-design-vue
- 在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;
},
}