Vue中使用emoji表情

矫情吗；* 2021-07-25 13:34 2179阅读 1赞

## 效果图：  ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 使用： ##

<template>
      <div class="main">
        输入：
        <el-input v-model="inputValue" />
        <el-button @click="analyzeEmoji(inputValue)">显示：</el-button>
        <span v-html="content" />
        <OwO
          ref="ref_owo"
          :emojiWidth="emojiWidth"
          @chooseEmoji="chooseEmoji"
        ></OwO>
      </div>
    </template>
    
    <script>
    import OwO from "@/components/OwO.vue";
    export default {
      components: { OwO },
      data() {
        return {
          inputValue: "",
          content: "",
          emojiWidth: "50%", //写法：400px、50%(默认)
        };
      },
      props: {},
      created() {},
      mounted() {},
      computed: {},
      methods: {
        chooseEmoji(value) {
          this.inputValue += "[" + value + "]";
        },
        analyzeEmoji(value) {
          this.content = this.$refs["ref_owo"].analyzeEmoji(value);
        },
      },
    };
    </script>

@/components/OwO.vue:

<template>
      <div class="OwO" :style="{ width: emojiWidth }">
        <div class="OwO-body">
          <ul class="OwO-items">
            <li
              class="OwO-item"
              v-for="(oitem, index) in OwOlist"
              :key="index"
              @click="chooseEmoji(oitem.title)"
            >
              <img :src="require('@/assets/img/face/' + oitem.url)" alt />
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          OwOlist: [
            //表情包和表情路径
            { title: "微笑", url: "weixiao.gif" },
            { title: "嘻嘻", url: "xixi.gif" },
            { title: "哈哈", url: "haha.gif" },
            { title: "可爱", url: "keai.gif" },
            { title: "可怜", url: "kelian.gif" },
            { title: "挖鼻", url: "wabi.gif" },
            { title: "吃惊", url: "chijing.gif" },
            { title: "害羞", url: "haixiu.gif" },
            { title: "挤眼", url: "jiyan.gif" },
            { title: "闭嘴", url: "bizui.gif" },
            { title: "鄙视", url: "bishi.gif" },
            { title: "爱你", url: "aini.gif" },
            { title: "泪", url: "lei.gif" },
            { title: "偷笑", url: "touxiao.gif" },
            { title: "亲亲", url: "qinqin.gif" },
            { title: "生病", url: "shengbing.gif" },
            { title: "太开心", url: "taikaixin.gif" },
            { title: "白眼", url: "baiyan.gif" },
            { title: "右哼哼", url: "youhengheng.gif" },
            { title: "左哼哼", url: "zuohengheng.gif" },
            { title: "嘘", url: "xu.gif" },
            { title: "衰", url: "shuai.gif" },
            { title: "吐", url: "tu.gif" },
            { title: "哈欠", url: "haqian.gif" },
            { title: "抱抱", url: "baobao.gif" },
            { title: "怒", url: "nu.gif" },
            { title: "疑问", url: "yiwen.gif" },
            { title: "馋嘴", url: "chanzui.gif" },
            { title: "拜拜", url: "baibai.gif" },
            { title: "思考", url: "sikao.gif" },
            { title: "汗", url: "han.gif" },
            { title: "困", url: "kun.gif" },
            { title: "睡", url: "shui.gif" },
            { title: "钱", url: "qian.gif" },
            { title: "失望", url: "shiwang.gif" },
            { title: "酷", url: "ku.gif" },
            { title: "色", url: "se.gif" },
            { title: "哼", url: "heng.gif" },
            { title: "鼓掌", url: "guzhang.gif" },
            { title: "晕", url: "yun.gif" },
            { title: "悲伤", url: "beishang.gif" },
            { title: "抓狂", url: "zhuakuang.gif" },
            { title: "黑线", url: "heixian.gif" },
            { title: "阴险", url: "yinxian.gif" },
            { title: "怒骂", url: "numa.gif" },
            { title: "互粉", url: "hufen.gif" },
            { title: "书呆子", url: "shudaizi.gif" },
            { title: "愤怒", url: "fennu.gif" },
            { title: "感冒", url: "ganmao.gif" },
            { title: "心", url: "xin.gif" },
            { title: "伤心", url: "shangxin.gif" },
            { title: "猪", url: "zhu.gif" },
            { title: "熊猫", url: "xiongmao.gif" },
            { title: "兔子", url: "tuzi.gif" },
            { title: "喔克", url: "ok.gif" },
            { title: "耶", url: "ye.gif" },
            { title: "棒棒", url: "good.gif" },
            { title: "不", url: "no.gif" },
            { title: "赞", url: "zan.gif" },
            { title: "来", url: "lai.gif" },
            { title: "弱", url: "ruo.gif" },
            { title: "草泥马", url: "caonima.gif" },
            { title: "神马", url: "shenma.gif" },
            { title: "囧", url: "jiong.gif" },
            { title: "浮云", url: "fuyun.gif" },
            { title: "给力", url: "geili.gif" },
            { title: "围观", url: "weiguan.gif" },
            { title: "威武", url: "weiwu.gif" },
            { title: "话筒", url: "huatong.gif" },
            { title: "蜡烛", url: "lazhu.gif" },
            { title: "蛋糕", url: "dangao.gif" },
            { title: "发红包", url: "fahongbao.gif" },
          ],
        };
      },
      props: {
        emojiWidth: {
          type: String,
          default: "50%",
        },
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        //选择表情包
        chooseEmoji: function (content) {
          this.$emit("chooseEmoji", content);
        },
        analyzeEmoji: function (cont) {
          //编译表情替换成图片展示出来
          var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
          var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
          var content = cont.match(pattern1);
          var str = cont;
          if (content) {
            for (var i = 0; i < content.length; i++) {
              for (var j = 0; j < this.OwOlist.length; j++) {
                if ("[" + this.OwOlist[j].title + "]" == content[i]) {
                  var src = this.OwOlist[j].url;
                  break;
                }
              }
              var s = require("@/assets/img/face/" + src);
              var imoj = "<img src='" + s + "'/>";
    
              str = str.replace(pattern2, imoj);
            }
          }
          return str;
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .OwO {
      position: relative;
      z-index: 1;
      color: black;
      .OwO-body {
        position: absolute;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0 4px 4px 4px;
    
        .OwO-items {
          max-height: 197px;
          overflow-y: scroll;
          padding: 10px;
          .OwO-item {
            background: #f7f7f7;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            margin: 0 10px 12px 0;
            transition: 0.3s;
            line-height: 19px;
            font-size: 20px;
            cursor: pointer;
            &:hover {
              background: #eee;
              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
            }
          }
        }
      }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/232f72b893ee448aaf20a166d48288da.png