微信qq表情输入文本 vue

效果图：

父组件

<template>
  <div style="padding:20px;width:90%;">
    <div class="textBox">
      <textarea :maxlength="maxNum" placeholder="请添加回复文字" v-model="shareText" ref="shareTextArea" @focus="showEmojiPanel = false"></textarea>
      <div class="textInputBox">
        <div>
          <img src="@/assets/smile.png" v-if="!showEmojiPanel" @click="showEmojiPanel = true"/>
          <img src="@/assets/keyboard.png" v-if="showEmojiPanel" @click="handleKeyboardClick"/>
        </div>
        <div class="textTips">还可以输入{{getNum}}字</div>
      </div>
      <emoji-input @onEmojiChoose="handleEmojiChoose" v-if="showEmojiPanel"></emoji-input>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      shareText: '',
      showEmojiPanel: true,
      maxNum: 300
    }
  },
  computed: {
    getNum () {
      return this.maxNum - this.shareText.length
    }
  },
  methods: {
    getcurtext () {
      console.log(this.shareText, '提交')
    },
    handleEmojiChoose (emoji) {
      let value = this.shareText
      let el = this.$refs.shareTextArea
      let startPos = el.selectionStart
      let endPos = el.selectionEnd
      let newValue = value.substring(0, startPos) + emoji + value.substring(endPos, value.length)
      this.shareText = newValue
      if (el.setSelectionRange) {
        setTimeout(() => {
          let index = startPos + emoji.length
          el.setSelectionRange(index, index)
        }, 0)
      }
    },
    handleKeyboardClick () {
      this.showEmojiPanel = false
      this.$refs.shareTextArea.focus()
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.textBox {
  background: #F9F9F9;
  width: 100%;
  textarea {
    box-sizing: border-box;
    height: 92px;
    width: calc(100% - 16px);
    margin: 8px;
    resize: none;
    font-size: 14px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
  }
  .textTips {
    font-size: 12px;
    color: #BBBBBB;
    letter-spacing: 0;
    margin-right: 10px;
  }
  img {
    width: 24px;
    height: 24px;
    margin-left: 14px;
  }
  .textInputBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #BBBBBB;
    padding-bottom: 8px;
  }
}
</style>

子组件

<template>
  <div class="emojiContainer">
    <div class="emojiPage">
      <a v-for="(item, i) in emojiList" :key=i @click="onEmojiClick(`[${item.title}]`)">
        <img :src=item.src width="24" height="24">
      </a>
    </div>
  </div>
</template>

<script>
import emojiJSON from './emoji.json'
export default {
  name: 'EmojiInput',
  data () {
    return {
      emojiList: emojiJSON
    }
  },
  methods: {
    onEmojiClick (emoji) {
      this.$emit('onEmojiChoose', emoji)
    }
  }
}
</script>

<style lang="scss" scoped>
.emojiContainer {
  width: 100%;
  background: #F6F6F6;
  display: flex;
  height: 280px;
  flex-direction: column;
  .emojiPage {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    a {
      width: 6.66%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
<style lang="scss">
.face-content .v-tabs__wrapper {
  display: none;
}
</style>

json 格式

[
  {
    "src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji",
    "title": "微笑"
  }
]