Vue+element完成带表情评论功能

想实现一个带表情评论的功能，但是一搜索都是JQ的一些插件，使用emojiVue这个组件（https://github.com/shershen08/emoji-vue），出现了光标老是跑到第一个的情况，搜了一圈也没找到好的解决办法，于是自己进行了编写，新手入门请多谅解。

1. html部分采用了el-input+el-popover+el-tabs

<template>
  <div class="emoji-chat">
    <el-input
      class="chatText"
      id="textarea"
      autofocus
      v-model="textarea"
      type="textarea"
      autosize
      :placeholder="placeholder"
      :maxlength="maxlength"
      :show-word-limit="wordLimit"
    ></el-input>
    <div class="chat-emoji">
      <el-popover
        :placement="placement"
        :width="width"
        :trigger="trigger"
        popper-class="emoji-popover"
      >
        <div class="emoji-list">
          <el-tabs v-model="activeName">
            <el-tab-pane label="默认表情" name="first">
              <a
                href="javascript:void(0);"
                @click="getEmoji(index)"
                v-for="(item,index) in faceList"
                :key="index"
                class="emoji-item"
              >{{item}}</a>
            </el-tab-pane>
          </el-tabs>
        </div>
        <i class="iconfont icon-biaoqing-xue" slot="reference"></i>
      </el-popover>
    </div>
  </div>
</template>

2. css部分

<style lang="less" scoped>
.emoji-chat {
  display: flex;
  .chatText {
    width: 100%;
  }
  .chat-emoji {
    padding: 0 10px;
    font-size: 25px;
    i {
      cursor: pointer;
      font-size: 20px;
    }
  }
}
.emoji-list {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.emoji-item {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emoji-item {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emoji-item:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emoji-item:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emoji-item:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emoji-item:active {
  text-decoration: none;
}
</style>

4. js部分

<script>
export default {
  props: {
    // 输入框默认文字
    placeholder: {
      type: String,
      default: "请输入评论内容"
    },
    // 传过来的表情库
    faceList: {
      type: Array
    },
    // 想要回显的值
    inputValue: {
      type: String
    },
    // 限制输入框的最大长度
    maxlength: {
      type: Number,
      default: 200
    },
    // 是否显示限制字数
    wordLimit: {
      type: Boolean,
      default: true
    },
    // 表情框的宽度
    width: {
      type: Number,
      default: 400
    },
    // 表情框显示位置
    placement: {
      type: String,
      default: "bottom"
    },
    // 表情框触发方式
    trigger: {
      type: String,
      default: "click"
    }
  },
  data() {
    return {
      textarea: ""
    };
  },
  watch: {
    inputValue(newVal, oldVal) {
      this.textarea = newVal;
    },
    textarea(newVal, oldVal) {
      this.valueChange(newVal);
    }
  },
  methods: {
    // 获取用户点击之后的标签 ，存放到输入框内
    getEmoji(index) {
      var textElement = document.getElementById("textarea");
      this.changeSelectEmoji(this.faceList[index]);
      this.textarea = textElement.value; // 要同步data中的数据
      return;
    },
    changeSelectEmoji(str) {
      var textElement = document.getElementById("textarea");
      // 非IE浏览器
      if (window.getSelection) {
        textElement.setRangeText(str);
        textElement.selectionStart += str.length;
        textElement.focus();
      } else if (document.selection) {
        // IE浏览器
        textElement.focus();
        var sel = document.selection.createRange();
        sel.text = str;
      }
    },
    valueChange(e) {
      this.$emit("input", e);
    }
  }
};
</script>

4. 使用

import emoticons from "./emoticons.vue";

 components: {
    emoticons
  },

<div class="my-reply">
          <el-avatar class="header-img" :size="35" :src="'http://172.22.14.119:83'+myHeader"></el-avatar>
          <emoticons
            class="reply-info"
            @input="onInput($event)"
            :faceList="faceList"
            :inputValue="input"
            :maxlength="200"
            :placeholder="'请输入评论内容'"
            :wordLimit="true"
            :placement="'top-start'"
            :width="400"
            :trigger="'click'"
          ></emoticons>
          <div class="reply-btn-box">
            <el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
          </div>
        </div>

如有不足之处请指出，感谢大家！