当前位置：首页 > VUE

vue实现输入表情

2026-01-18 05:56:45VUE

Vue 实现输入表情的方法

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

使用 emoji 选择器组件

安装 emoji-picker-vue 或其他类似的 emoji 选择器库：

npm install emoji-picker-vue

在组件中引入并使用：

<template>
  <div>
    <input v-model="message" @focus="showPicker = true" />
    <emoji-picker v-if="showPicker" @select="addEmoji" />
  </div>
</template>

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

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

原生实现 emoji 选择器

创建一个自定义的 emoji 选择器组件：

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

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

<style>
.emoji-container span {
  cursor: pointer;
  margin-right: 5px;
  font-size: 20px;
}
</style>

使用第三方服务

集成第三方表情服务如 Twemoji：

<template>
  <div>
    <input v-model="message" />
    <button @click="insertEmoji('😊')">添加笑脸</button>
  </div>
</template>

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

实现富文本编辑器表情功能

使用 vue-quill-editor 等富文本编辑器实现表情插入：

<template>
  <div>
    <quill-editor 
      v-model="content" 
      :options="editorOptions"
    />
    <button @click="insertEmoji('😎')">添加表情</button>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: { quillEditor },
  data() {
    return {
      content: '',
      editorOptions: {
        modules: {
          toolbar: [
            ['bold', 'italic'],
            ['link', 'image']
          ]
        }
      }
    }
  },
  methods: {
    insertEmoji(emoji) {
      const range = this.$refs.quillEditor.quill.getSelection()
      this.$refs.quillEditor.quill.insertText(range.index, emoji)
    }
  }
}
</script>

以上方法可以根据具体需求选择适合的实现方式，从简单的静态表情选择到复杂的富文本编辑器集成均可实现。

vue实现输入表情