vue 项目中使用评论功能带emoji表情包

先看下效果：

由于项目中需要做一个评论的功能，思索一番准备自己写，但打开度娘一下就看到这个vue评论插件，带表情包
挺好的，还带表情刚好满足需求
1.安装 2.引入插件3.使用就不在介绍上面的链接有
记录下我在项目中是怎么使用的以及改了哪些东西

这是实际开发项目效果如最上面的效果图
这里需要主要几点，关于使用和修改
1.你可以按照上面的步骤 npm安装，
2.也可以自己在项目中封装这样一个评论组件,这样你也好改一点
如果你是npm 安装的那么你需要改样式啊，参数啊什么的，那简单啊，我直接在node_modules中找到这个模块改对应组件就行了。
…对于node_modules中的模块你想改，这里说下node_modules 中各模块运行的其实是打包后的 dist中的js文件，你改的开发环境，当然不会生效。以下是一种方法
1.将这个模块下载到本地，npm install 安装依赖，（这个插件，拉到本地，你npm install 会报错，1.删掉package.json中的注释，使用npm install npm -g，然后在npm install）
2.运行模块，找到它开发的组件，进行修改
3.改完后打包 npm run build
4.打包完成后，在你的项目中node_modules找到这个模块替换掉模块中dist文件中的js文件
在运行你的项目就可以啦。。。。
这里针对于这个评论插件，我改了它的样式、提交的参数。插件自带的参数还是比较全面的，还提供多级评论，不过我这不需要这个多级的。
下面是改完后的代码

<template><div class="hbl-fa"><div class="hbl-comm"><!--      <div class="comment-avatar" v-if="showAvatar"><avatar :avatar="avatar"></avatar></div> --><div class="comment" :style="{ width: commentWidth }"><el-input @focus="showButton(0)" type="textarea" :autosize="{ minRows: minRows, maxRows: maxRows }":placeholder="placeholder" v-model="textareaMap[0]"></el-input><div class="hbl-owo"><div :class="pBodyMap[0] ? 'OwO' : 'OwO OwO-open'" class="emoj publish" :style="{ width: emojiWidth }"><div class="OwO-logo" @click="pBodyStatus(0)"><span @blur="blur"><img src="./img/icon/biaoqing.png" style="width: 32px;height: 32px;"></span></div><div class="OwO-body" v-if="pBodyMap[0]"><ul class="OwO-items OwO-items-show"><li class="OwO-item" v-for="(oitem, index) in OwOlist" :key="'oitem' + index" @click="choseEmoji(0, oitem.title)"><img :src="require('./img/face/' + oitem.url)" alt="" /></li></ul></div></div><div class="publish publish-btn"><button class="btn" @click="doSend(articleId,arguedId,arguedName,discussType,parentId,question,title)">发表回复</button><!-- <button @click="cancel(0)" class="btn btn-cancel">取消</button> --></div></div></div></div></div>
</template><script>import avatar from "./Avatar.vue";
export default {props: {emojiWidth: {type: String,default: "560px",},showAvatar: {type: Boolean,default: true,},avatar: {type: String,default: "",},placeholder: {type: String,default: "在此输入评论内容...",},minRows: {type: Number,default: 4,},maxRows: {type: Number,default: 8,},commentNum: {type: Number,default: 2,},arguedId:{type: Number,default: null,},arguedName:{type: String,default: "",},discussType:{type: Number,default: null,},parentId: {type: Number,default: null,},question:{type: String,default: "",},title:{type: String,default: "",},view:{type: String,default: "",},articleId: {type: Number,default: null,},label: {type: String,default: "作者",},commentWidth: {type: String,default: "100%",},},data() {return {replyMap: [],buttonMap: [],pBodyMap: [],textareaMap: [],OwOlist: [//表情包和表情路径{ title: "微笑", url: "weixiao.gif" },{ title: "嘻嘻", url: "xixi.gif" },{ title: "哈哈", url: "haha.gif" },{ title: "可爱", url: "keai.gif" },{ title: "可怜", url: "kelian.gif" },{ title: "挖鼻", url: "wabi.gif" },{ title: "吃惊", url: "chijing.gif" },{ title: "害羞", url: "haixiu.gif" },{ title: "挤眼", url: "jiyan.gif" },{ title: "闭嘴", url: "bizui.gif" },{ title: "鄙视", url: "bishi.gif" },{ title: "爱你", url: "aini.gif" },{ title: "泪", url: "lei.gif" },{ title: "偷笑", url: "touxiao.gif" },{ title: "亲亲", url: "qinqin.gif" },{ title: "生病", url: "shengbing.gif" },{ title: "太开心", url: "taikaixin.gif" },{ title: "白眼", url: "baiyan.gif" },{ title: "右哼哼", url: "youhengheng.gif" },{ title: "左哼哼", url: "zuohengheng.gif" },{ title: "嘘", url: "xu.gif" },{ title: "衰", url: "shuai.gif" },{ title: "吐", url: "tu.gif" },{ title: "哈欠", url: "haqian.gif" },{ title: "抱抱", url: "baobao.gif" },{ title: "怒", url: "nu.gif" },{ title: "疑问", url: "yiwen.gif" },{ title: "馋嘴", url: "chanzui.gif" },{ title: "拜拜", url: "baibai.gif" },{ title: "思考", url: "sikao.gif" },{ title: "汗", url: "han.gif" },{ title: "困", url: "kun.gif" },{ title: "睡", url: "shui.gif" },{ title: "钱", url: "qian.gif" },{ title: "失望", url: "shiwang.gif" },{ title: "酷", url: "ku.gif" },{ title: "色", url: "se.gif" },{ title: "哼", url: "heng.gif" },{ title: "鼓掌", url: "guzhang.gif" },{ title: "晕", url: "yun.gif" },{ title: "悲伤", url: "beishang.gif" },{ title: "抓狂", url: "zhuakuang.gif" },{ title: "黑线", url: "heixian.gif" },{ title: "阴险", url: "yinxian.gif" },{ title: "怒骂", url: "numa.gif" },{ title: "互粉", url: "hufen.gif" },{ title: "书呆子", url: "shudaizi.gif" },{ title: "愤怒", url: "fennu.gif" },{ title: "感冒", url: "ganmao.gif" },{ title: "心", url: "xin.gif" },{ title: "伤心", url: "shangxin.gif" },{ title: "猪", url: "zhu.gif" },{ title: "熊猫", url: "xiongmao.gif" },{ title: "兔子", url: "tuzi.gif" },{ title: "喔克", url: "ok.gif" },{ title: "耶", url: "ye.gif" },{ title: "棒棒", url: "good.gif" },{ title: "不", url: "no.gif" },{ title: "赞", url: "zan.gif" },{ title: "来", url: "lai.gif" },{ title: "弱", url: "ruo.gif" },{ title: "草泥马", url: "caonima.gif" },{ title: "神马", url: "shenma.gif" },{ title: "囧", url: "jiong.gif" },{ title: "浮云", url: "fuyun.gif" },{ title: "给力", url: "geili.gif" },{ title: "围观", url: "weiguan.gif" },{ title: "威武", url: "weiwu.gif" },{ title: "话筒", url: "huatong.gif" },{ title: "蜡烛", url: "lazhu.gif" },{ title: "蛋糕", url: "dangao.gif" },{ title: "发红包", url: "fahongbao.gif" },],};},components: {avatar,},methods: {//事件处理器blur() {alert("ss");},showButton(index) {//this.showFlag = true;console.log(index + "index");this.$set(this.buttonMap, index, true);},cancel(index) {this.$set(this.buttonMap, index, false);if (index !== 0) {this.$set(this.replyMap, index, false);}console.log(index + "index");//this.showFlag = false;},// 发送评论doSend(articleId,arguedId,arguedName,discussType,parentId,question,title) {//console.log("====="+this.textarea);this.$emit("doSend", this.textareaMap[0],articleId,arguedId,arguedName,discussType,parentId,question,title);this.$set(this.textareaMap, 0, "");},doChidSend(index, commentUserId, pid) {this.$emit("doChidSend", this.textareaMap[index], commentUserId, pid);this.$set(this.textareaMap, index, "");},//选择表情包choseEmoji: function (index, inner) {var con = "";if (!this.textareaMap[index]) {this.$set(this.textareaMap, index, "");}con = this.textareaMap[index] += "[" + inner + "]";this.$set(this.textareaMap, index, con);},analyzeEmoji: function (cont) {//编译表情替换成图片展示出来var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;var pattern2 = /\[[\u4e00-\u9fa5]+\]/;var content = cont.match(pattern1);var str = cont;if (content) {for (var i = 0; i < content.length; i++) {for (var j = 0; j < this.OwOlist.length; j++) {if ("[" + this.OwOlist[j].title + "]" == content[i]) {var src = this.OwOlist[j].url;break;}}var s = require("./img/face/" + src);var imoj = "<img src='" + s + "'/>";str = str.replace(pattern2, imoj);}}return str;},doReply(index) {this.$set(this.replyMap, index, true);console.log(this.replyMap[index]);},pBodyStatus(index) {this.$set(this.pBodyMap, index, !this.pBodyMap[index]);},},watch: {// 如果路由有变化，会再次执行该方法// '$route':'routeChange'},created() {//生命周期函数},mounted() {//页面加载完成后},
};
</script>

样式根据自己的需求改吧就不贴了，
这个函数，就是解析后台返回的表情字符找到对应的gif图片，插件中也写的很清楚

通过props将你发表评论需要的参数传过来，点击发表发射一个事件，发射事件的参数是你在props中定义的，父组件接收这个事件，拿到参数，调接口，完！
看中的是它的表情…还是比较实用的，就是这个表情用的是gif … 后期看看文件大小在做调整。。。。。

vue 项目中使用评论功能带emoji表情包相关推荐

聊一聊如何在 Vue 项目中实现水印功能
作者:熊的猫 https://juejin.cn/post/7132620574198595597 前言由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-water ...
写一段情人节耳钉礼物文案，要求100字左右，以小红书的形式展示，带emoji表情包，带分段，吸引眼球，情绪化，最后加一些tag...
❤️情人节特别礼物❤️ 爱你❤️不仅仅是因为你是我的最爱,更因为你是我生命中不可或缺的一部分. 这个情人节,献上我最真挚的爱意:一对精美的耳钉,镶嵌着世界上最珍贵的宝石--心形红宝石. 这对耳钉不仅仅 ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
Vue 项目中实现的微信、微博、QQ空间分享功能（亲测有效）
需求:文章添加分享功能(包括微信.微博.QQ空间) 如下图所示: 点击图标分别跳转到如下界面:(实现效果如下) 话不多说直接代码(可以封装成组件) <template><div cl ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
问题：在vue项目中如何使用element-ui的照片墙功能？
遇到的问题: 在vue项目中如何使用element-ui的照片墙功能,限制只上传9张照片fileList?尤其是在编辑的情况下. 解决方法: <el-uploadaction="htt ...
Vue项目中添加锁屏功能
0. 直接上预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...

vue 项目中使用评论功能带emoji表情包

vue 项目中使用评论功能带emoji表情包相关推荐

最新文章

热门文章

vue 项目中使用 评论功能 带emoji表情包

vue 项目中使用 评论功能 带emoji表情包相关推荐

最新文章

热门文章

vue 项目中使用评论功能带emoji表情包

vue 项目中使用评论功能带emoji表情包相关推荐