Vue含表情评论回复组件

一、评论回复组件效果

使用vue开发一款精美实用的评论回复组件，并包含emoji表情包，整体效果如下

文本框获取焦点时弹出Emoji表情按钮、发送和取消按钮，如下图

点击Emoji表情即可弹出表情包，如下图

二、使用

1、使用下面命令下载hbl-comment组件

npm i hbl-comment

复制

2、下载完成之后在项目中引入

import comment from 'hbl-comment'
components:{
  comment
},

复制

3、使用

 <comment></comment>

复制

4、如果没有下载element-ui的使用下面命令进行下载

npm i element-ui -S

复制

5、下载完成后在main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

复制

三、属性及事件

1、props属性

评论列表commentList 包含多个评论comment，关于comment相关字段如下：

2、comment包含字段

3、用户包含字段

4、事件Events