Zdsg-ui NPM | npm.io

zdsg-ui

博客评论相关UI

安装

npm install zdsg-ui -S

使用

main.js

import zdsgUi from 'zdsg-ui'
import 'zdsg-ui/lib/zdsg-ui.css'

Vue.use(zdsgUi)

组件使用

<zdsg-comment-rich ref="commentRich" placeholder="请留下你的治国方针..." :showLike="true" :showAddTime="true" @submit="submit">
</zdsg-comment-rich>

<zdsg-comment v-for="item in transCommentList" :key="item.commentId" :userName="item.userName" :commentData="item" @callbackComment="callbackComment" @submit="commentSubmit" @addLike="commentAddLike">
</zdsg-comment>

特点

树形结构评论
评论输入框支持输入表情包，文字

参数

commentRich (评论输入组件)

参数	说明	类型	默认值
showLike	是否展示点赞按钮	Boolean	false
showAddTime	是否展示打卡按钮	Boolean	false
placeholder	placeholder内容	String	请输入评论内容

comment (评论模块(树形结构数据))

参数	说明	类型	默认值
commentData	评论数据(数据格式详情见下表)	Object	{}
userName	用户名	String	-

comment组件commentData数据格式说明

参数	说明	类型
userPhoto	用户头像	String
userName	用户名	String
commentId	评论id	Number
parentCommentId	父评论id	Number
commentLikeCount	点赞数	Number
commentContent	评论内容	String
commentDate	评论时间	String
showInput	显示输入框标志位	Boolean
children	子数据(数据格式同commentData)	Array

事件

commentRich (评论输入组件)

事件名称	说明	回调参数
submit	提交按钮	string(文本内容)

comment (评论模块)

事件名称	说明	回调参数
submit	提交按钮	Object(commentData组件绑定数据，content评论内容)
addLike	点赞按钮	Object(组件绑定数据)
callbackComment	回复按钮	Object(组件绑定数据)