vue实现输入表情
Vue 实现输入表情的方法
使用 emoji 选择器组件
在 Vue 项目中可以集成第三方 emoji 选择器组件，如 emoji-mart-vue。安装后通过简单的配置即可实现表情选择功能。
npm install emoji-mart-vue在组件中引入并使用：
<template>
<div>
<emoji-picker @select="addEmoji"/>
<input v-model="message"/>
</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
}
}
}
</script>原生 Unicode 表情支持
现代浏览器都支持直接输入 Unicode 表情符号。可以通过监听输入事件，在特定触发条件下显示表情面板。
<template>
<div>
<button @click="showEmojis = !showEmojis">😀</button>
<div v-if="showEmojis" class="emoji-grid">
<span v-for="emoji in emojis" @click="insertEmoji(emoji)">{{ emoji }}</span>
</div>
<textarea v-model="text"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
showEmojis: false,
text: '',
emojis: ['😀', '😂', '🤣', '😍', '🤔', '🙄', '😴']
}
},
methods: {
insertEmoji(emoji) {
this.text += emoji
this.showEmojis = false
}
}
}
</script>使用 contenteditable 实现富文本输入
对于需要更复杂富文本编辑的场景，可以使用 contenteditable div 配合表情插入功能。
<template>
<div>
<div
contenteditable
ref="editor"
@input="updateContent"
></div>
<button @click="insertEmoji('😊')">插入表情</button>
</div>
</template>
<script>
export default {
methods: {
insertEmoji(emoji) {
const editor = this.$refs.editor
const selection = window.getSelection()
const range = selection.getRangeAt(0)
range.deleteContents()
const textNode = document.createTextNode(emoji)
range.insertNode(textNode)
selection.collapseAfter(textNode)
},
updateContent() {
this.content = this.$refs.editor.innerHTML
}
}
}
</script>移动端键盘表情支持
在移动端开发时，可以利用系统自带的表情键盘。通过设置 input 元素的 inputmode 属性来提示键盘类型。
<template>
<input
v-model="message"
inputmode="emoji"
placeholder="点击这里可以输入表情"
>
</template>注意事项
- 考虑表情符号在不同平台上的显示一致性
- 处理表情符号的存储和传输时注意编码问题
- 对于自定义表情集，需要准备相应的图片资源
- 在 contenteditable 实现中要注意 XSS 防护
以上方法可根据项目需求选择使用，组合使用效果更佳。对于社交类应用，推荐使用成熟的第三方表情选择器组件。
