vue 表情包

参考文章
json 地址 https://github.com/amio/emoji.json/blob/master/emoji.json

引入本地json https://blog.csdn.net/weixin_45115895/article/details/106713009?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-13-106713009.nonecase&utm_term=vue%E5%BC%95%E5%85%A5json%E6%96%87%E4%BB%B6

遍历显示表情包 https://blog.csdn.net/HarryHY/article/details/100557603

 emoji 表情包比较多，加载可能有点慢，建议删掉一部分表情包
很简单 就是引入emoji.js 遍历char 就行

<div class="browBox">
    <ul>
        <li v-for="(item,index) in faceList" :key="index" @click="getBrow(index)">{{item}}</li>
    </ul>
</div>
<textarea id="text" placeholder="说点什么吧..."></textarea>

import jsonData from "@/api/emoji";

data{
    return{
        appData: jsonData,
        faceList: [], // 存放表情包的数组
    }
}

methods:{
    faceContent() {
        for (let i in this.appData.emjoData) {
          this.faceList.push(this.appData.emjoData[i].char);
          // console.log(192, this.appData.emjoData[i]);
        }
    },
    // // 获取用户点击之后的标签 ，存放到输入框内
    getBrow(index) {
      let a = document.getElementById('text');
      
      for (let i in this.faceList) {
        if (index == i) {
          a.value += this.faceList[index];
          // console.log(209, a.value)
        }
      }
    },
}

.browBox {
  width:  460px;
  height: 200px;
  background: #e6e6e6;
  color: #000;
  position: absolute;
  bottom: 120%;
  overflow: scroll;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    li {
      cursor: pointer;
      width: 30px;
      font-size: 26px;
      list-style: none;
      text-align: center;
    }
  }
}