当前位置：首页 > VUE

vue实现表情功能

2026-02-17 06:51:25VUE

实现表情选择器组件

创建一个独立的EmojiPicker.vue组件，用于展示表情列表和选择功能。组件需要接收表情数据，并通过事件发射选中的表情。

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

<script>
export default {
  props: {
    emojis: {
      type: Array,
      default: () => ['😀', '😂', '😍', '🤔', '🙄', '😎']
    }
  },
  methods: {
    selectEmoji(emoji) {
      this.$emit('select', emoji);
    }
  }
}
</script>

<style>
.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
}

.emoji-item {
  font-size: 24px;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.emoji-item:hover {
  transform: scale(1.2);
}
</style>

在父组件中使用表情选择器

在需要使用表情功能的父组件中引入EmojiPicker，并处理表情选择事件。通常需要控制表情选择器的显示/隐藏状态。

<template>
  <div>
    <button @click="showPicker = !showPicker">添加表情</button>
    <EmojiPicker 
      v-if="showPicker"
      @select="addEmoji"
    />
    <div v-html="content"></div>
  </div>
</template>

<script>
import EmojiPicker from './EmojiPicker.vue'

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

扩展表情数据源

对于更丰富的表情支持，可以使用第三方表情库如emoji-picker-element或emoji-mart-vue。这些库提供了更完整的表情分类和搜索功能。

安装emoji-mart-vue：

npm install emoji-mart-vue

使用示例：

<template>
  <emoji-picker @select="addEmoji" />
</template>

<script>
import { Picker } from 'emoji-mart-vue'
export default {
  components: { 'emoji-picker': Picker },
  methods: {
    addEmoji(emoji) {
      console.log(emoji.native)
    }
  }
}
</script>

实现输入框表情插入

对于文本输入场景，需要在光标位置插入表情而非简单追加。这需要操作DOM的selection API。

<template>
  <textarea ref="input" v-model="content"></textarea>
  <EmojiPicker @select="insertEmoji" />
</template>

<script>
export default {
  methods: {
    insertEmoji(emoji) {
      const input = this.$refs.input
      const start = input.selectionStart
      const end = input.selectionEnd
      this.content = this.content.substring(0, start) + emoji + this.content.substring(end)
      input.focus()
      input.setSelectionRange(start + emoji.length, start + emoji.length)
    }
  }
}
</script>

表情渲染优化

当内容中包含大量表情时，可能需要特殊处理表情的渲染性能。可以创建一个表情渲染组件来优化显示。

<template>
  <span class="emoji-render">{{ emoji }}</span>
</template>

<script>
export default {
  props: {
    emoji: String
  }
}
</script>

<style>
.emoji-render {
  font-size: 1.2em;
  vertical-align: middle;
}
</style>

移动端适配

对于移动设备，需要考虑表情选择器的弹出方式和交互优化。可以使用固定定位或全屏模态框。

vue实现表情功能

/* 在EmojiPicker组件中添加移动样式 */
@media (max-width: 768px) {
  .emoji-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 50vh;
    overflow-y: auto;
  }
}