vue中使用emjio表情

首先看看效果，运用的是腾讯QQ表情包

封装了一下，直接上代码(owo.vue)

<template>
  <div class="ly-emotion">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'owo',
  mounted () {
    const name = this.$el.innerHTML
    const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
    let index = list.indexOf(name)
    let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
    this.$nextTick(() => {
      this.$el.innerHTML = imgHTML
    })
  },
}
</script>
<style scoped>
.ly-emotion {
  display: inline-block;
}
.ly-static-emotion {
  width: 24px;
  height: 24px;
  display: inline-block;
}
</style>

emjo.vue如下:

<!--
 * @Author: 1985881385@qq.com 1985881385@qq.com
 * @Date: 2022-11-30 09:35:46
 * @LastEditors: 1985881385@qq.com 1985881385@qq.com
 * @LastEditTime: 2022-12-02 10:15:56
 * @FilePath: \rafter-ark-chat\src\views\components\emjo.vue
 * @Description: 聊天表情组件，页面渲染
-->
<template>
  <div>
    <div class="emotion-box"
         :style="{height: height + 'px' }">
      <template v-for="(line, i) in list"
                :key="i">
        <owo class="emotion-item"
             v-for="(item, i) in line"
             :key="i"
             @click="clickHandler(i)">{{item}}</owo>
      </template>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import owo from './owo.vue'
export default {
  props: ['height'],
  components: {
    owo
  },

  setup (props, content) {
    let data = reactive({
      list: [
        ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴',
          '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过',
          '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢',
          '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂',
          '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见',
          '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠',
          '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀',
          '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰',
          '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀',
          '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强',
          '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你',
          'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈',
          '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极'],
      ],
      height: props.height || 200
    })


    /**
     * @desc:点击渲染表情
     * @param {*} i(传入的表情索引值)
     */
    const clickHandler = (i) => {
      let emotion = `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${i}.gif`
      // console.log(emotion);
      content.emit('emotion', emotion)
    }

    return {
      ...toRefs(data),
      clickHandler
    }
  }
}
</script>
<style scoped>
.emotion-box {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  overflow: hidden;
  overflow-y: auto;
}
.emotion-box::-webkit-scrollbar {
  width: 5px;
  height: 3px !important;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.emotion-box::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
}
.emotion-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
  margin: 5px;
}
</style>

最后，页面调用

import emjo from './../components/emjo.vue'
<el-icon>
                <el-popover placement="top-start"
                            trigger="click"
                            width="300px">
                  <template #reference>
                    <PictureRounded @click="sendEmjio()" />
                  </template>
                  <div>
                    <emjo class="emotion"
                          @emotion="emotion"
                          :height="200"></emjo>
                  </div>

                </el-popover>
              </el-icon>

自己完成了记录一下 (#^.#)