input实现发送表情vue

实现表情发送功能

在Vue中实现input发送表情功能，可以通过以下方法完成：

使用第三方表情库 安装emoji-mart-vue库：

npm install emoji-mart-vue

在组件中引入并使用：

<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage" />
    <emoji-picker @select="addEmoji" />
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
import { Picker } from 'emoji-mart-vue'
export default {
  components: { 'emoji-picker': Picker },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    addEmoji(emoji) {
      this.message += emoji.native
    },
    sendMessage() {
      this.$emit('send', this.message)
      this.message = ''
    }
  }
}
</script>

自定义表情选择器

创建自定义表情选择器组件：

<template>
  <div class="emoji-container">
    <div v-for="emoji in emojis" :key="emoji" @click="selectEmoji(emoji)">
      {{ emoji }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emojis: ['😀', '😂', '😍', '👍', '❤️', '🔥']
    }
  },
  methods: {
    selectEmoji(emoji) {
      this.$emit('selected', emoji)
    }
  }
}
</script>

集成到输入框

将表情选择器集成到输入框组件：

<template>
  <div>
    <input v-model="message" />
    <button @click="toggleEmojiPicker">表情</button>
    <emoji-picker 
      v-if="showPicker"
      @selected="addEmoji"
      @close="showPicker = false"
    />
    <button @click="send">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      showPicker: false
    }
  },
  methods: {
    toggleEmojiPicker() {
      this.showPicker = !this.showPicker
    },
    addEmoji(emoji) {
      this.message += emoji
      this.showPicker = false
    },
    send() {
      this.$emit('send', this.message)
      this.message = ''
    }
  }
}
</script>

处理表情显示

在接收端显示表情时，确保HTML不被转义：

<template>
  <div v-html="parseEmojis(message)"></div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    parseEmojis(text) {
      // 简单替换表情符号为HTML实体
      const emojiMap = {
        ':)': '😊',
        ':(': '😞'
      }
      return text.replace(/:\w+:/g, match => emojiMap[match] || match)
    }
  }
}
</script>

移动端优化

针对移动端输入优化：

<template>
  <div class="input-container">
    <textarea 
      v-model="message"
      @focus="adjustInput"
      ref="input"
    ></textarea>
    <emoji-picker @selected="addEmoji" />
  </div>
</template>

<script>
export default {
  methods: {
    adjustInput() {
      // 防止键盘遮挡输入框
      setTimeout(() => {
        this.$refs.input.scrollIntoView({ behavior: 'smooth' })
      }, 300)
    },
    addEmoji(emoji) {
      const input = this.$refs.input
      const startPos = input.selectionStart
      const endPos = input.selectionEnd

      this.message = 
        this.message.substring(0, startPos) +
        emoji +
        this.message.substring(endPos)

      // 恢复光标位置
      setTimeout(() => {
        input.selectionStart = input.selectionEnd = startPos + emoji.length
        input.focus()
      }, 0)
    }
  }
}
</script>