当前位置：首页 > VUE

vue实现输入表情

2026-03-10 11:48:37VUE

实现输入表情功能

在Vue中实现输入表情功能，可以通过以下几种方式完成：

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

npm install emoji-picker-vue

在组件中引入并使用：

<template>
  <div>
    <emoji-picker @select="onSelectEmoji" />
    <input v-model="message" />
  </div>
</template>

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

export default {
  components: { EmojiPicker },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onSelectEmoji(emoji) {
      this.message += emoji
    }
  }
}
</script>

自定义表情选择器 创建一个表情数据数组：

const emojis = ['😀', '😂', '😍', '👍', '❤️']

在模板中渲染表情按钮：

<template>
  <div>
    <div class="emoji-container">
      <button 
        v-for="(emoji, index) in emojis" 
        :key="index"
        @click="addEmoji(emoji)"
      >
        {{ emoji }}
      </button>
    </div>
    <textarea v-model="message"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emojis: ['😀', '😂', '😍', '👍', '❤️'],
      message: ''
    }
  },
  methods: {
    addEmoji(emoji) {
      this.message += emoji
    }
  }
}
</script>

集成原生输入法表情 对于移动端开发，可以设置输入类型为支持表情：

<input type="text" v-model="message" inputmode="emoji">

样式优化 为表情选择器添加基本样式：

.emoji-container {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.emoji-container button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

注意事项

vue实现输入表情