当前位置：首页 > VUE

input实现发送表情vue

2026-02-21 17:46:46VUE

实现表情发送功能（Vue）

核心思路
通过input或textarea结合表情选择器组件，将表情符号转换为可识别的字符或HTML插入输入区域，最终提交时统一处理。

基础实现方案

安装表情库（可选）
使用第三方库如emoji-picker-vue简化开发：

npm install emoji-picker-vue

模板结构

<template>
  <div>
    <textarea v-model="message" ref="inputArea"></textarea>
    <button @click="toggleEmojiPicker">😀</button>

    <emoji-picker 
      v-if="showPicker"
      @select="insertEmoji"
      class="picker"
    />

    <button @click="sendMessage">发送</button>
  </div>
</template>

逻辑实现

<script>
import { EmojiPicker } from 'emoji-picker-vue';

export default {
  components: { EmojiPicker },
  data() {
    return {
      message: '',
      showPicker: false
    };
  },
  methods: {
    toggleEmojiPicker() {
      this.showPicker = !this.showPicker;
    },
    insertEmoji(emoji) {
      this.message += emoji.native;
      this.$refs.inputArea.focus();
      this.showPicker = false;
    },
    sendMessage() {
      console.log('发送内容:', this.message);
      // 调用API发送消息
    }
  }
};
</script>

自定义表情方案（非Unicode）

表情映射配置

data() {
  return {
    customEmojis: {
      '[微笑]': '/emojis/smile.png',
      '[狗头]': '/emojis/dog.png'
    }
  }
}

转换表情为图片

methods: {
  convertEmojis(text) {
    let result = text;
    Object.keys(this.customEmojis).forEach(key => {
      const img = `<img src="${this.customEmojis[key]}" class="emoji">`;
      result = result.replace(new RegExp(key, 'g'), img);
    });
    return result;
  }
}

提交处理

sendMessage() {
  const contentWithEmojis = this.convertEmojis(this.message);
  // 提交到服务器或显示
}

样式优化建议

CSS示例

input实现发送表情vue

.picker {
  position: absolute;
  z-index: 100;
}

.emoji {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

textarea {
  width: 300px;
  height: 100px;
}