vue 实现评论区表情输入

一、背景

实现评论区可输入中文，字母，数字，符号及表情的输入（表情为ios系统表情）

表情的输入，由两种方式实现，一是通过输入unicode编码如‘\ud83c\udf36’，二是，通过选择表情输入，传给后台以unicode的格式

二、效果

三、实现方式有两种

方式一：将所需图片存放到本地文件，避免用url显示不出来

HTML：

<!-- 将图片存到本地文件 -->
<template>
  <div class="emoji">
    <el-tabs v-model="activeFace" >
      <el-tab-pane label="表情" name="face"></el-tab-pane>
    </el-tabs>
    <ul class="emoji-container">
      <li v-for="(item, index) in faceList" :key="index" @click="shoseEmoji(item)">
        <a href="javaScript:;">
          <img :src="item.url" alt="">
        </a>
      </li>
    </ul>
  </div>
</template>

js：

 export default {
    name: 'emoji',
    data () {
      return {
        activeFace: 'face',
        faceList: [ // 存放在本地文件的图片的获取方式需要用require
          {value: '\ud83d\ude00', url: require('../assets/imgs/emoji/grinning-face_1f600.png')},  // value为表情对应的unicode码，url为路径
          {value: '\ud83d\ude01', url: require('../assets/imgs/emoji/grinning-face-with-smiling-eyes_1f601.png')}
        ]
      }
    },
    methods: {
      shoseEmoji (emoji) {
        this.$emit('select', emoji)
      }
    }
  }
</script>

css：

.emoji {
    width: 480px;
    height: 186px;
    bottom: 50px;
    background: #fff;
    z-index: 10;
    padding: 10px;
    margin-right: 10px;
    background: white;
    overflow-y: scroll;
    border-radius: 10px;
  }
  .emoji-container {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }
  .emoji-container li {
    float: left;
    width:30px;
    height: 30px;
    margin: 5px
  }
  .emoji-container li a {
    display: block;
    float: left;
    overflow: hidden;
    width: 35px;
    height: 35px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition: all ease-out .2s;
    border-radius: 4px;
  }
  .emoji-container li a img {
    display: block;
    width: 30px;
    height: 30px;
  }
  .emoji-container li a:hover {
    background-color: #d8d8d8;
    border-color: #d8d8d8;
  }

方式二：通过使用ios系统公开的表情url

html：

<template>
  <div class="emoji">
    <el-tabs v-model="activeFace" >
      <el-tab-pane label="表情" name="face"></el-tab-pane>
    </el-tabs>
    <ul class="emoji-container">
      <li v-for="(item, index) in faceList" :key="index" @click="shoseEmoji(item)">
        <img :src="'https://emojipedia-us.s3.amazonaws.com/thumbs/60/apple/76/'+ item.url" alt="" style="width :30px;height: 30px;display: block">
        <a href="javaScript:;">
        </a>
      </li>
    </ul>
  </div>
</template>

js:

 export default {
    name: 'emoji',
    data () {
      return {
        activeFace: 'face',
        faceList: [
          {value: '\ud83d\ude00', url: 'grinning-face_1f600.png'}       
        ]
      }
    },
    methods: {
      shoseEmoji (emoji) {
        this.$emit('select', emoji)
      }
    }
  }

css同上