说在前面

最近在搭建一个自己的博客网站，博客网站肯定少不了和读者的交流，因此需要一个评论模块来搭建起博主和读者的联系，在完成评论模块的时候顺手将其封装成了一个评论组件，在这里记录一下，也给大家简单分享一下，大家有什么好的建议都可以评论告诉我。

组件介绍

博客地址：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，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球🏸 ，平时也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。