vue+element-ui实现优雅的emoji表情框

最新推荐文章于 2024-08-16 16:06:53 发布

秃头指非官

最新推荐文章于 2024-08-16 16:06:53 发布

阅读量1.4w

点赞数 25

分类专栏： vue 文章标签： vue element-ui emoji

本文链接：https://blog.csdn.net/qq_40340478/article/details/106579577

版权

本文介绍了如何利用vue和element-ui来实现一个优雅的emoji表情功能。作者从amio/emoji.json获取JSON文件，创建了一个表情框组件，通过slot插槽和textarea的光标定位实现表情插入。并提供了相关的CSS样式调整和效果展示。

摘要由CSDN通过智能技术生成

终于把表情包的功能实现了😁，网上很多用本地图库、雪碧图之类的，愣是没找到几个适合我的解决方案，于是从amio/emoji.json上面找了一个JSON文件，然后简单实现了自己聊天系统上面的一个默认表情功能。

文章目录

引入JSON文件

Code

template

css

script

效果

JSON文件

参考文章与资源

引入JSON文件

const appData = require("../static/utils/emoji.json");

Code

template

表情框组件，通过slot插槽按钮触发显示；输入框是一个textarea，我们要把点击选择的表情插入到textarea光标对应的位置之后。

<div class="chatIcon">
    <el-popover placement="top-start" width="400" trigger="click" class="emoBox">
        <div class="emotionList">
            <a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{
   {
   item}}</a>
        </div>
        <el-button
        class="emotionSelect"
        icon="iconfont icon-biaoqing"
        slot="reference"
        ></el-button>
    </el-popover>
</div>
<el-input
  v-model="textarea"
  class="chatText"
  resize="none"
  type="textarea"
  id='textarea'
  rows="5"
  @keyup.enter.native="sendInfo"
></el-input>

css

由于el-popover比较特殊，需要全局设置el-popover样式，并防止污染全局。

<style lang="scss">
/* el-popover是和app同级的，所以scoped的局部属性设置了无效 */
/* 需要设置全局style */
  .el-popover{
   
    height:200px;
    width:400px;
    overflow: scroll;
    overflow-x:auto;
  }
</style>

<style scoped>
.chatIcon {
   
  padding: 0 10px;
  font-size: 25px;
}
.emotionList{
   
  display: flex;
  flex-wrap: wrap;
  padding:5px;
}
.emotionItem{
   
  width:10%;
  font-size:20px;
  text-align:center;
}
/*包含以下四种的链接*/
.emotionItem {
   
    text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
   
    text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
   
    text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
   
    text