说在前面
最近在搭建一个自己的博客网站，博客网站肯定少不了和读者的交流，因此需要一个评论模块来搭建起博主和读者的联系，在完成评论模块的时候顺手将其封装成了一个评论组件，在这里记录一下，也给大家简单分享一下，大家有什么好的建议都可以评论告诉我。
组件介绍
博客地址：http://jyeontu.xyz/JYeontuBlog/#/home\
组件在博客中的展示如上图，博客链接也贴在了上面，感兴趣的同学可以进去体验看看效果，可以顺便给我留下几句祝福就更好了。
组件主要实现了以下几个功能：
（1）数据转换
将扁平化数组通过父子id联系转换成树形数组，以树形结构在页面展示。
（2）引入VEmojiPicker组件，可以使用表情评论
内部完成表情转码解码，转码输出可以保存到数据库，数据库查询出数据可以直接输入组件内部解码展示。
（3）自由配置属性
可以通过参数配置展示数量,自定义pid、id和isAdmin关键字等属性
功能实现
（1）数据转换
将扁平化数组通过父子id联系转换成树形数组，以树形结构在页面展示。
/**
* 扁平化数组转换成树形数组
* @param {Array} data 需要转换的数组
* @param {string} id id
* @param {string} pid 父id
* @return {Array} 树形数组
*/
getTreeData(data, id = "id", pid = "pid") {
let cloneData = JSON.parse(JSON.stringify(data));
return cloneData.filter(parent => {
let branchArr = cloneData.filter(
child => parent[id] == child[pid]
);
for (let i = 0; i < branchArr.length; i++) {
branchArr.parent_nickname = parent.nickname;
}
branchArr.length > 0 ? (parent["children"] = branchArr) : "";
return parent[pid] === null;
});
}（2）引入VEmojiPicker组件，可以使用表情评论
内部完成表情转码解码，转码输出可以保存到数据库，数据库查询出数据可以直接输入组件内部解码展示。\
简介
V-Emoji-Picker是一个轻型表情符号选择器，可以在选择器组件中显示原生表情符号。安装
npm i v-emoji-picker使用
<template>
<div id="app">
<VEmojiPicker @select="selectEmoji" />
</div>
</template>
<script>
import VEmojiPicker from 'v-emoji-picker';
export default {
name: 'Demo',
components: {
VEmojiPicker
},
data: () => ({}),
methods: {
selectEmoji(emoji) {
console.log(emoji)
}
}
}
</script>
效果如上图。
转码
直接将表情存入数据库的话数据库会报错，我们可以对表情进行解码再存入，这样就可以成功地存入数据库
/**
* 表情转码
* @param {string} str 需要转码的表情
* @return {string} 转码后的字符串
*/
utf16toEntities(str) {
const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
str = str.replace(patt, char => {
let H,L,code,s;
if (char.length === 2) {
H = char.charCodeAt(0); // 取出高位
L = char.charCodeAt(1); // 取出低位
code = (H - 0xd800) * 0x400 + 0x10000 + L - 0xdc00; // 转换算法
s = `&#${code};`;
} else {
s = char;
}
return s;
});
return str;
},
/**
* 表情解码
* @param {string} str 需要解码的字符串
* @return {string} 转码后的表情
*/
entitiestoUtf16(strObj) {
const patt = /&#\d+;/g;
const arr = strObj.match(patt) || [];
let H,L,code;
for (let i = 0; i < arr.length; i += 1) {
code = arr[i];
code = code.replace("&#", "").replace(";", "");
// 高位
H = Math.floor((code - 0x10000) / 0x400) + 0xd800;
// 低位
L = ((code - 0x10000) % 0x400) + 0xdc00;
code = `&#${code};`;
const s = String.fromCharCode(H, L);
strObj = strObj.replace(code, s);
}
return strObj;
},（3）自由配置属性
可以通过参数配置展示数量,自定义pid、id和isAdmin关键字等属性。
\
可以通过以上配置项对组件进行自由配置，如：
<j-comment
:key-map="keyMap"
:showNumber="2"
:comment-datas="comments"
@submitComment="submitComment">
</j-comment>
<script>
export default {
data() {
return {
keyMap: {
pid: "parent_comment_id",
id: "id",
isAdmin: "admin_comment"
}
}
},
methods:{
submitComment(item) {
console.log("item: ", item);
}
}
}
</script>组件引入
组件文档：http://jyeontu.xyz/jvuewheel/#/JCommentView
（1）npm 安装
npm i @jyeontu/jvuewheel -S（2）main.js引入
//引入组件库
import jvuewheel from '@jyeontu/jvuewheel'
//引入样式
import '@jyeontu/jvuewheel/lib/jvuewhell.css'
Vue.use(jvuewheel);（3）项目地址
Gitee：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse\
参考文档:http://jyeontu.xyz/jvuewheel\
个人博客:http://jyeontu.xyz/JYeontuBlog
说在后面
🎉这里是JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球🏸 ，平时也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。
