vue 实现评论区表情输入

最新推荐文章于 2025-07-02 14:55:26 发布

原创

最新推荐文章于 2025-07-02 14:55:26 发布 · 7.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue表情包

本文介绍了如何在Vue项目中实现在评论区输入中文、字母、数字、符号及iOS系统表情的功能。提供了两种实现方式，一种是将表情图片存储在本地，另一种是利用iOS系统的表情URL。详细讲解了HTML、JavaScript和CSS的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

实现评论区可输入中文，字母，数字，符号及表情的输入（表情为ios系统表情）

表情的输入，由两种方式实现，一是通过输入unicode编码如‘\ud83c\udf36’，二是，通过选择表情输入，传给后台以unicode的格式

二、效果

三、实现方式有两种

方式一：将所需图片存放到本地文件，避免用url显示不出来

HTML：

<!-- 将图片存到本地文件 -->
<template>
  <div class="emoji">
    <el-tabs v-model="activeFace" >
      <el-tab-pane label="表情" name="face"></el-tab-pane>
    </el-tabs>
    <ul class="emoji-container">
      <li v-for="(item, index) in faceList" :key="index" @click="shoseEmoji(item)">
        <a href="javaScript:;">
          <img :src="item.url" alt="">
        </a>
      </li>
    </ul>
  </div>
</template>

js：