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属性

名称	类型	说明	默认值
avatar	String	头像	空
placeholder	String	文本框提示内容	在此输入评论内容…
minRows	Number	文本框最小行数	4
maxRows	Number	文本框最大行数	8
commentNum	Number	评论条数	2
authorId	Number	当前登录用户id	1
label	String	标签名	作者
commentWidth	String	文本框宽度	80%
commentList	Array	评论列表	包含内容较多，此处略

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

2、comment包含字段

名称	类型	说明
id	Number	评论id
commentUser	Object	评论用户
targetUser	Object	被评论用户
content	String	评论内容
createDate	String	评论时间
childrenList	Array	子评论列表

3、用户包含字段

名称	类型	说明
id	Number	用户id
nickName	String	用户昵称
avatar	String	用户头像

4、Events事件

名称	说明	参数
doSend(content)	初始文本框发送事件	评论内容
doChidSend(content,bid,pid)	评论列表中文本框发送事件	评论内容,被评论用户id,父级评论id

SSM后台管理系统开发实战课程链接

访问我的达人课

我的微信公众号

Vue含表情评论回复组件相关推荐

vue仿微博评论回复_Vue之 3.0升级
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了Vue之菜单权限控制的知识,今天跟大家分享下Vue之3. ...
vue.js表情文本输入框组件
文章目录参考链接效果图代码 emoji.json EmojiText.vue 使用参考链接 JS操作文本域获取光标/指定位置插入 vue.js支持表情输入 ttkwsd博客效果图代码不能 ...
vue仿微博评论回复_vue 网页版聊天系统|仿微信、微博网页端
最近一段时间一直在学习vue框架,对比了下react和angular发现vue上手快多了,之前有使用vue开发个vue版仿微信手机端IM聊天,最近想继续加强学习下,就做了一版网页端的vue聊天室. 依 ...
vue.js实现带表情评论功能前后端实现（仿B站评论）
文章目录学习链接效果图后台建表评论表(重要) 用户表实体类 Comment User CommentDTO(重要) WebConfig配置配置跨域和静态资源文件夹 Mybatisplus ...
Vue 表情包输入组件
Emotion 一个用于vue的表情输入组件 https://gitee.com/jiangliyue/vue_expression_input_module.git index是使用示例,emoti ...
vue + vuex 实现评论和回复
效果图组件需要的 json 格式 commentList: [ {id: 1,isFirstLevel: 0,commentUser: {userId: 10086,nickName: 'huazi ...
朋友圈自动回复评论_微信新版，朋友圈可以表情包回复了！网友：评论区斗起来.jpg...
你们发现了吗? 朋友圈可以发表情包评论了! 微信iOS版7.0.9正式版今天迎来更新支持发消息时可以引用之前的内容更令人惊喜的是不少网友都发现新版本还新增朋友圈自定义表情评论功能可以用表情包评论别人的 ...
Thinkphp带表情的评论回复实例
Thinkphp带表情的评论回复实例基于Thinkphp开发的一个简单的带表情的评论回复实例,可以无限回复,适合新手学习或作为毕业设计作品等. 评论提交验证 1 $(".submit-bt ...
vue 实现评论回复功能
参考文档https://blog.csdn.net/weixin_35987513/article/details/53748707 项目中分别有三个组件 1.dynamic (父组件) 2.repl ...
微信小程序实现类似微信评论区回复组件(mpx)
mpx开发微信小程序实现回复组件效果组件内容: <template><view class="apply-component"><van-popu ...

Vue含表情评论回复组件

一、评论回复组件效果

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

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

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

二、使用

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

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

3、使用

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

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

三、属性及事件

1、props属性

2、comment包含字段

3、用户包含字段

4、Events事件

我的微信公众号

Vue含表情评论回复组件相关推荐

最新文章

热门文章