new_era/src/components/emoji/index.vue

<template>
  <div v-clickoutside="clickoutside">
    <div class="biaoqingContent" @click.stop>
      <img class="expression" @click.stop="show = !show" src="./expression.png" />
      <!--      表情选择框-->
      <div class="box" v-if="show" @click.stop>
        <div class="left">
          <ul>
            <li v-for="(item, index) in biaoqingList" :key="index" :class="['cursor', biaoqingActive === index ? 'active' : '']">
              <div @click="bqNameChange(index, item.iconArr)">
                {{ item.name }}
              </div>
            </li>
          </ul>
        </div>
        <div class="right">
          <button v-for="(i, index) in rightList" :key="index" class="emoji" @click.stop="insertHtmlAtCaret(i.icon)">
            <span>{{ i.icon }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 定义最后光标对象

import { biaoqingArr } from "./biaoqing.js";
export default {
  props: {
    //表情框宽度
    width: {
      type: String,
      default: "50%",
    },
    //表情框高度
    height: {
      type: String,
      default: "200px",
    },
    //表情框ID
    id: {
      type: String,
      default: "text",
    },
    //内容
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      lastEditRange: "",
      content: "",
      show: false,
      biaoqingList: biaoqingArr,
      biaoqingActive: 0,
      rightList: [],
      allList: [],
    };
  },
  watch: {
    value() {
      this.valueChange();
    },
  },
  methods: {
    clickoutside() {
      console.log("clickoutside", 111111);
      this.show = false;
    },
    valueChange() {
      if (!this.value) return;
      let str = this.value;
      let newStr = this.forArr(this.forArr(str), "className");
      document.getElementById(this.id).innerHTML = newStr;
    },
    //替换emoji 表情图片
    forArr(str, _type) {
      for (let j = 0; j < this.allList.length; j++) {
        let val = this.allList[j];
        let reg = _type === "className" ? `alt${val.className}` : val.icon;
        if (_type === "className") {
          str = str.replace(new RegExp(reg, "g"), val.icon);
        } else {
          str = str.replace(
            new RegExp(reg, "g"),
            `<img style="vertical-align: sub;" src="http://tkeasyemoji.oss-cn-shanghai.aliyuncs.com/images/placeholder.png" class="${val.className}" alt="alt${val.className}">`
          );
        }
      }
      return str;
    },
    // 表情title点击事件
    bqNameChange(index, arr) {
      this.biaoqingActive = index;
      this.rightList = arr;
    },
    contentClick() {
      // 获取选定对象
      var selection = getSelection();
      // 设置最后光标对象
      this.lastEditRange = selection.getRangeAt(0);
    },
    //表情插入文本框
    insertHtmlAtCaret(icon) {
      this.$emit("select", icon);
    },
  },

  created() {
    this.rightList = biaoqingArr[0].iconArr;
    biaoqingArr.forEach((e) => {
      this.allList = this.allList.concat(e.iconArr);
    });
  },
  mounted() {
    this.valueChange();

    window.addEventListener("message", (res) => {
      if (Object.prototype.toString.call(res.data) == "[object Object]") {
        if (res.data.source === "clickScene") {
          if (this.show) {
            this.show = false;
          }
        }
      }
    });
  },
  components: {},
};
</script>
<style>
@import "./emoji_sorites.css";
</style>
<style lang="less" scoped>
.contentBox {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  position: relative;
}
.biaoqingContent {
  padding: 5px;
  width: 30px;
  margin: 5px auto;
  position: relative;
  .expression {
    width: 20px;
    margin: 5px 0;
    cursor: pointer;
  }

  .box {
    border: 1px solid #73a8f9;
    width: 400px;
    min-height: 400px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    background: #fff;
    bottom: 100%;
    z-index: 999;
    left: 0;
    display: flex;
    position: absolute;
  }
  .left {
    width: 90px;
    height: 100%;
    display: table-cell;
    border-right: 1px solid #ebebeb;
    padding: 4px;

    ul {
      padding: 0;
      margin: 0;
      text-align: center;
      list-style-type: none;

      li {
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
        button {
          border: none;
          background: none;
          width: 100%;
          height: 100%;
        }
      }
    }

    .active {
      background-color: #3171d1;
      color: #000;
      border-radius: 4px;

      button {
        color: #000;
      }
    }
  }
  .right {
    flex: 1;
    padding-left: 10px;
    padding-top: 15px;
    overflow: auto;
    text-align: left;
    button {
      border: none;
      padding: 0;
      cursor: pointer;
      width: 32px;
      height: 32px;
    }

    .emoji {
      display: inline-block;
      padding: 3px;
      border: 1px solid transparent;
      cursor: pointer;
      background: #fff;
      color: #000;
      &:hover {
        height: 32px;
        background-color: #ddded8;
        border: 1px solid #b3c1fd;
        border-radius: 4px;
      }
    }
  }
  //样式一
  .box0 {
  }
}

@media screen and (max-width: 600px) {
  .biaoqingContent {
    .box {
      width: 80vw;
      right: -10vw;
      max-height: 26vh;
      min-height: unset;
      overflow-y: auto;
    }
  }
}
</style>