vue实现一个简单的表情包组件

最新推荐文章于 2024-06-13 18:27:41 发布
最新推荐文章于 2024-06-13 18:27:41 发布
阅读量3.3k 收藏 13
点赞数 5
文章标签： vue.js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47452289/article/details/115369000
版权

vue实现一个简单的表情包组件

创建一个emoji的数组js文件，将这个数组导出，引入到vue组建中，本文最下面有完整的代码
在这里插入图片描述

var emojiArr = [
 {
    name: '热门',
    iconArr: [{
      className: 'bg-1f4b0',
      icon: '💰'

    },
    {
      className: 'bg-1f604',
      icon: '😄'

    },
    {
      className: 'bg-1f60d',
      icon: '😍'
    },
    ......] //太多就省略了
  },
  {
    name: '表情',
    iconArr: [{
      className: 'bg-1f604',
      icon: '😄'
    },
    {
      className: 'bg-1f603',
      icon: '😃'
    },
    {
      className: 'bg-1f600',
      icon: '😀'
    },
    ......] //太多就省略了
  },
]
export {
  emojiArr
}

vue组件引入这个数组

import { emojiArr } from './emojiArr'

data () {
    return {
      faceList: emojiArr
    }
  },

简单写一个布局，用的是iview组建中的Poptip 组件和element中的Tab组件

<div>
		<!--input输入框-->
        <Input
          v-model="inputVal"
          placeholder="请输入"
          id="input"
          class="input">
        </Input>
        <!--表情包弹出组件-->
        <Poptip class="poptip">
          <Button icon="ios-search"></Button>
          <!--表情包内部结构-->
          <div slot="content">
          	
            <el-tabs tab-position="left" @tab-click="tabClick">
            <!--循环表情包的类型-->
              <el-tab-pane :label="item.name" v-for="(item,index) in faceList" :key="index">
                <div class="img-div">
                  <!--循环表情类型的每一个表情包-->
                  <p class="emoji" v-for="(item1,index1) in faceList[tabIndex].iconArr" :key="index1" @click="clickEmoji(item1.icon)">{{item1.icon}}</p>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </Poptip>
</div>

接下来是重点的js代码

data () {
    return {
      faceList: emojiArr, //引入的表情包数组
      tabIndex: 0,  //表情包的类型索引
      inputVal: ''  // 输入框内的值
    }
  },
  methods: {
    // 点击表情包
    clickEmoji (val) {
      // 获取文本输入框元素节点
      let ele = document.querySelector('#input .ivu-input')
      // 获取光标
      let cursor = ele.selectionStart
      // 设置文本内容
      ele.setRangeText(val)
      // 移动光标并聚焦
      ele.selectionStart = cursor + 2
      ele.focus()
      // 使文本输入框的内容等于当前的值
      this.inputVal = ele.value
    },
    // 点击标签页
    tabClick (tab) {
      this.tabIndex = tab.index - 0
    }
  }

然后就大功告成了😀😀😀，这就是成品图
在这里插入图片描述

完整的emoji数组代码

var emojiArr = [
  {
    name: '热门',
    iconArr: [{
      className: 'bg-1f4b0',
      icon: '💰'

    },
    {
      className: 'bg-1f604',
      icon: '😄'

    },
    {
      className: 'bg-1f60d',
      icon: '😍'

    },
    {
      className: 'bg-1f631',
      icon: '😱'

    },
    {
      className: 'bg-1f602',
      icon: '😂'

    },
    {
      className: 'bg-1f353',
      icon: '🍓'

    },
    {
      className: 'bg-1f37a',
      icon: '🍺'

    },
    {
      className: 'bg-f2615',
      icon: '☕'

    },
    {
      className: 'bg-1f340',
      icon: '🍀'

    },
    {
      className: 'bg-1f331',
      icon: '🌱'

    },
    {
      className: 'bg-f2728',
      icon: '✨'

    },
    {
      className: 'bg-f26a1',
      icon: '⚡'

    },
    {
      className: 'bg-1f4ab',
      icon: '💫'

    },
    {
      className: 'bg-1f4a5',
      icon: '💥'

    },
    {
      className: 'bg-1f3b5',
      icon: '🎵'

    },
    {
      className: 'bg-1f44f',
      icon: '👏'

    },
    {
      className: 'bg-1f4aa',
      icon: '💪'

    },
    {
      className: 'bg-1f44d',
      icon: '👍'

    },
    {
      className: 'bg-1f449',
      icon: '👉'

    },
    {
      className: 'bg-1f448',
      icon: '👈'

    },
    {
      className: 'bg-1f447',
      icon: '👇'

    },
    {
      className: 'bg-1f446',
      icon: '👆'

    },
    {
      className: 'bg-1f44a',
      icon: '👊'

    },
    {
      className: 'bg-1f48b',
      icon: '💋'

    },
    {
      className: 'bg-1f48d',
      icon: '💍'

    },
    {
      className: 'bg-1f451',
      icon: '👑'

    },
    {
      className: 'bg-1f4a5',
      icon: '💥'

    },
    {
      className: 'bg-1f495',
      icon: '💕'

    },
    {
      className: 'bg-1f496',
      icon: '💖'

    },
    {
      className: 'bg-1f389',
      icon: '🎉'

    },
    {
      className: 'bg-1f47b',
      icon: '👻'

    },
    {
      className: 'bg-f3299',
      icon: '㊙'

    },
    {
      className: 'bg-1f51e',
      icon: '🔞'

    },

    {
      className: 'bg-f2705',
      icon: '✅'

    },
    {
      className: 'bg-f2b07',
      icon: '⬇'

    },
    {
      className: 'bg-f27a1',
      icon: '➡'

    },
    {
      className: 'bg-1f4af',
      icon: '💯'

    },
    {
      className: 'bg-f2714',
      icon: '✔'

    },
    {
      className: 'bg-f2611',
      icon: '☑'

    },
    {
      className: 'bg-f2757',
      icon: '❗'

    },
    {
      className: 'bg-f2753',
      icon: '❓'

    },
    {
      className: 'bg-f2b55',
      icon: '⭕'

    },
    {
      className: 'bg-1f680',
      icon: '🚀'

    },
    {
      className: 'bg-f2708',
      icon: '✈'

    },
    {
      className: 'bg-1f697',
      icon: '🚗'

    },
    {
      className: 'bg-f26a0',
      icon: '⚠'

    },
    {
      className: 'bg-f2693',
      icon: '⚓'

    },
    {
      className: 'bg-1f4e2',
      icon: '📢'

    },
    {
      className: 'bg-1f514',
      icon: '🔔'

    },
    {
      className: 'bg-1f381',
      icon: '🎁'

    },
    {
      className: 'bg-1f384',
      icon: '🎄'

    },
    {
      className: 'bg-1f49b',
      icon: '💛'

    },
    {
      className: 'bg-1f525',
      icon: '🔥'

    },
    {
      className: 'bg-1f485',
      icon: '💅'

    },

    {
      className: 'bg-1f64b',
      icon: '🙋'

    },
    {
      className: 'bg-1f004',
      icon: '🀄'

    },
    {
      className: 'bg-1f33b',
      icon: '🌻'

    },
    {
      className: 'bg-1f37b',
      icon: '🍻'

    },
    {
      className: 'bg-1f648',
      icon: '🙈'

    },
    {
      className: 'bg-1f618',
      icon: '😘'

    },
    {
      className: 'bg-f3030',
      icon: '〰'

    }

    ]
  },
  {
    name: '表情',
    iconArr: [{
      className: 'bg-1f604',
      icon: '😄'
    },
    {
      className: 'bg-1f603',
      icon: '😃'
    },
    {
      className: 'bg-1f600',
      icon: '😀'
    },
    {
      className: 'bg-1f60a',
      icon: '😊'
    },
    {
      className: 'bg-1f609',
      icon: '😉'
    },
    {
      className: 'bg-1f60d',
      icon: '😍'
    },
    {
      className: 'bg-1f618',
      icon: '😘'
    },
    {
      className: 'bg-1f61a',
      icon: '😚'
    },
    {
      className: 'bg-1f617',
      icon: '😗'
    },
    {
      className: 'bg-1f619',
      icon: '😙'
    },
    {
      className: 'bg-1f61c',
      icon: '😜'
    },
    {
      className: 'bg-1f61d',
      icon: '😝'
    },
    {
      className: 'bg-1f61b',
      icon: '😛'
    },
    {
      className: 'bg-1f633',
      icon: '😳'
    },
    {
      className: 'bg-1f601',
      icon: '😁'
    },
    {
      className: 'bg-1f614',
      icon: '😔'
    },
    {
      className: 'bg-1f60c',
      icon: '😌'
    },
    {
      className: 'bg-1f612',
      icon: '😒'
    },
    {
      className: 'bg-1f61e',
      icon: '😞'
    },
    {
      className: 'bg-1f623',
      icon: '😣'
    },
    {
      className: 'bg-1f622',
      icon: '😢'
    },
    {
      className: 'bg-1f602',
      icon: '😂'
    },
    {
      className: 'bg-1f62d',
      icon: '😭'
    },
    {
      className: 'bg-1f62a',
      icon: '😪'
    },
    {
      className: 'bg-1f625',
      icon: '😥'
    },
    {
      className: 'bg-1f630',
      icon: '😰'
    },
    {
      className: 'bg-1f605',
      icon: '😅'
    },
    {
      className: 'bg-1f613',
      icon: '😓'
    },
    {
      className: 'bg-1f629',
      icon: '😩'
    },
    {
      className: 'bg-1f62b',
      icon: '😫'
    },
    {
      className: 'bg-1f628',
      icon: '😨'
    },
    {
      className: 'bg-1f631',
      icon: '😱'
    },
    {
      className: 'bg-1f620',
      icon: '😠'
    },
    {
      className: 'bg-1f621',
      icon: '😡'
    },
    {
      className: 'bg-1f624',
      icon: '😤'
    },
    {
      className: 'bg-1f616',
      icon: '😖'
    },
    {
      className: 'bg-1f606',
      icon: '😆'
    },
    {
      className: 'bg-1f60b',
      icon: '😋'
    },
    {
      className: 'bg-1f637',
      icon: '😷'
    },
    {
      className: 'bg-1f60e',
      icon: '😎'
    },
    {
      className: 'bg-1f634',
      icon: '😴'
    },
    {
      className: 'bg-1f635',
      icon: '😵'
    },
    {
      className: 'bg-1f632',
      icon: '😲'
    },
    {
      className: 'bg-1f61f',
      icon: '😟'
    },
    {
      className: 'bg-1f626',
      icon: '😦'
    },
    {
      className: 'bg-1f627',
      icon: '😧'
    },
    {
      className: 'bg-1f608',
      icon: '😈'
    },
    {
      className: 'bg-1f47f',
      icon: '👿'
    },
    {
      className: 'bg-1f62e',
      icon: '😮'
    },
    {
      className: 'bg-1f62c',
      icon: '😬'
    },
    {
      className: 'bg-1f610',
      icon: '😐'
    },
    {
      className: 'bg-1f615',
      icon: '😕'
    },
    {
      className: 'bg-1f62f',
      icon: '😯'
    },
    {
      className: 'bg-1f636',
      icon: '😶'
    },
    {
      className: 'bg-1f607',
      icon: '😇'
    },
    {
      className: 'bg-1f60f',
      icon: '😏'
    },
    {
      className: 'bg-1f611',
      icon: '😑'
    },
    {
      className: 'bg-1f63a',
      icon: '😺'
    },
    {
      className: 'bg-1f638',
      icon: '😸'
    },
    {
      className: 'bg-1f63b',
      icon: '😻'
    },
    {
      className: 'bg-1f63d',
      icon: '😽'
    },
    {
      className: 'bg-1f63c',
      icon: '😼'
    },

    {
      className: 'bg-1f640',
      icon: '🙀'
    },
    {
      className: 'bg-1f63f',
      icon: '😿'
    },
    {
      className: 'bg-1f639',
      icon: '😹'
    },
    {
      className: 'bg-1f63e',
      icon: '😾'
    },
    {
      className: 'bg-1f479',
      icon: '👹'
    },
    {
      className: 'bg-1f47a',
      icon: '👺'
    }
    ]
  },
  {
    name: '动物',
    iconArr: [{
      className: 'bg-1f436',
      icon: '🐶'
    },
    {
      className: 'bg-1f43a',
      icon: '🐺'
    },
    {
      className: 'bg-1f42d',
      icon: '🐱'
    },
    {
      className: 'bg-1f42d',
      icon: '🐭'
    },
    {
      className: 'bg-1f439',
      icon: '🐹'
    },
    {
      className: 'bg-1f430',
      icon: '🐰'
    }, {
      className: 'bg-1f438',
      icon: '🐸'
    },
    {
      className: 'bg-1f42f',
      icon: '🐨'
    },
    {
      className: 'bg-1f43b',
      icon: '🐻'
    },
    {
      className: 'bg-1f437',
      icon: '🐷'
    },
    {
      className: 'bg-1f43d',
      icon: '🐽'
    },
    {
      className: 'bg-1f42e',
      icon: '🐮'
    },
    {
      className: 'bg-1f417',
      icon: '🐗'
    },
    {
      className: 'bg-1f435',
      icon: '🐵'
    },
    {
      className: 'bg-1f412',
      icon: '🐒'
    },
    {
      className: 'bg-1f434',
      icon: '🐴'
    },
    {
      className: 'bg-1f411',
      icon: '🐑'
    },
    {
      className: 'bg-1f418',
      icon: '🐘'
    },
    {
      className: 'bg-1f43c',
      icon: '🐼'
    },
    {
      className: 'bg-1f427',
      icon: '🐧'
    },
    {
      className: 'bg-1f426',
      icon: '🐦'
    },
    {
      className: 'bg-1f424',
      icon: '🐤'
    },
    {
      className: 'bg-1f425',
      icon: '🐥'
    },
    {
      className: 'bg-1f423',
      icon: '🐣'
    },
    {
      className: 'bg-1f414',
      icon: '🐔'
    },
    {
      className: 'bg-1f40d',
      icon: '🐍'
    },
    {
      className: 'bg-1f422',
      icon: '🐢'
    },
    {
      className: 'bg-1f41b',
      icon: '🐛'
    },
    {
      className: 'bg-1f41d',
      icon: '🐝'
    },
    {
      className: 'bg-1f41c',
      icon: '🐜'
    },
    {
      className: 'bg-1f41e',
      icon: '🐞'
    },
    {
      className: 'bg-1f40c',
      icon: '🐌'
    },
    {
      className: 'bg-1f419',
      icon: '🐙'
    },
    {
      className: 'bg-1f420',
      icon: '🐠'
    },
    {
      className: 'bg-1f41f',
      icon: '🐟'
    },
    {
      className: 'bg-1f42c',
      icon: '🐬'
    },
    {
      className: 'bg-1f433',
      icon: '🐳'
    },
    {
      className: 'bg-1f40b',
      icon: '🐋'
    },
    {
      className: 'bg-1f404',
      icon: '🐄'
    },
    {
      className: 'bg-1f40f',
      icon: '🐏'
    },
    {
      className: 'bg-1f400',
      icon: '🐀'
    },
    {
      className: 'bg-1f403',
      icon: '🐃'
    },
    {
      className: 'bg-1f405',
      icon: '🐅'
    },
    {
      className: 'bg-1f407',
      icon: '🐇'
    },
    {
      className: 'bg-1f409',
      icon: '🐉'
    },
    {
      className: 'bg-1f40e',
      icon: '🐎'
    },
    {
      className: 'bg-1f410',
      icon: '🐐'
    },
    {
      className: 'bg-1f413',
      icon: '🐓'
    },
    {
      className: 'bg-1f415',
      icon: '🐕'
    },
    {
      className: 'bg-1f416',
      icon: '🐖'
    },

    {
      className: 'bg-1f401',
      icon: '🐁'
    },
    {
      className: 'bg-1f402',
      icon: '🐂'
    },
    {
      className: 'bg-1f432',
      icon: '🐲'
    },
    {
      className: 'bg-1f421',
      icon: '🐡'
    },
    {
      className: 'bg-1f40a',
      icon: '🐊'
    },
    {
      className: 'bg-1f42b',
      icon: '🐫'
    },
    {
      className: 'bg-1f42a',
      icon: '🐪'
    },

    {
      className: 'bg-1f406',
      icon: '🐆'
    },
    {
      className: 'bg-1f408',
      icon: '🐈'
    },
    {
      className: 'bg-1f429',
      icon: '🐩'
    },
    {
      className: 'bg-1f43e',
      icon: '🐾'
    },
    {
      className: 'bg-1f648',
      icon: '🙈'
    },
    {
      className: 'bg-1f649',
      icon: '🙉'
    },

    {
      className: 'bg-1f480',
      icon: '💀'
    },
    {
      className: 'bg-1f47d',
      icon: '👽'
    },
    {
      className: 'bg-1f63a',
      icon: '😺'
    },
    {
      className: 'bg-1f638',
      icon: '😸'
    },
    {
      className: 'bg-1f63b',
      icon: '😻'
    },
    {
      className: 'bg-1f63d',
      icon: '😽'
    },
    {
      className: 'bg-1f63c',
      icon: '😼'
    },
    {
      className: 'bg-1f640',
      icon: '🙀'
    },
    {
      className: 'bg-1f63f',
      icon: '😿'
    },
    {
      className: 'bg-1f639',
      icon: '😹'
    },

    {
      className: 'bg-1f63e',
      icon: '😾'
    }
    ]
  },
  {
    name: '食物',
    iconArr: [{
      className: 'bg-f2615',
      icon: '☕'
    },
    {
      className: 'bg-1f375',
      icon: '🍵'
    },
    {
      className: 'bg-1f376',
      icon: '🍶'
    },
    {
      className: 'bg-1f37c',
      icon: '🍼'
    },
    {
      className: 'bg-1f37a',
      icon: '🍺'
    },
    {
      className: 'bg-1f37b',
      icon: '🍻'
    },
    {
      className: 'bg-1f378',
      icon: '🍸'
    },
    {
      className: 'bg-1f379',
      icon: '🍹'
    },
    {
      className: 'bg-1f377',
      icon: '🍷'
    },

    {
      className: 'bg-1f374',
      icon: '🍴'
    },
    {
      className: 'bg-1f355',
      icon: '🍕'
    },
    {
      className: 'bg-1f354',
      icon: '🍔'
    },

    {
      className: 'bg-1f35f',
      icon: '🍟'
    },
    {
      className: 'bg-1f357',
      icon: '🍗'
    },

    {
      className: 'bg-1f356',
      icon: '🍖'
    },
    {
      className: 'bg-1f35d',
      icon: '🍝'
    },

    {
      className: 'bg-1f35b',
      icon: '🍛'
    },
    {
      className: 'bg-1f364',
      icon: '🍤'
    },
    {
      className: 'bg-1f363',
      icon: '🍣'
    },

    {
      className: 'bg-1f365',
      icon: '🍥'
    },
    {
      className: 'bg-1f359',
      icon: '🍙'
    },

    {
      className: 'bg-1f358',
      icon: '🍘'
    },
    {
      className: 'bg-1f35a',
      icon: '🍚'
    },
    {
      className: 'bg-1f35c',
      icon: '🍜'
    },

    {
      className: 'bg-1f372',
      icon: '🍲'
    },
    {
      className: 'bg-1f362',
      icon: '🍢'
    },
    {
      className: 'bg-1f361',
      icon: '🍡'
    },
    {
      className: 'bg-1f373',
      icon: '🍳'
    },

    {
      className: 'bg-1f35e',
      icon: '🍞'
    },
    {
      className: 'bg-1f369',
      icon: '🍩'
    },

    {
      className: 'bg-1f36e',
      icon: '🍮'
    },
    {
      className: 'bg-1f366',
      icon: '🍦'
    },
    {
      className: 'bg-1f368',
      icon: '🍨'
    },

    {
      className: 'bg-1f367',
      icon: '🍧'
    },
    {
      className: 'bg-1f382',
      icon: '🎂'
    },
    {
      className: 'bg-1f370',
      icon: '🍰'
    },

    {
      className: 'bg-1f36a',
      icon: '🍪'
    },
    {
      className: 'bg-1f36b',
      icon: '🍫'
    },
    {
      className: 'bg-1f36c',
      icon: '🍬'
    },

    {
      className: 'bg-1f36d',
      icon: '🍭'
    },
    {
      className: 'bg-1f36f',
      icon: '🍯'
    },
    {
      className: 'bg-1f34e',
      icon: '🍎'
    },
    {
      className: 'bg-1f34f',
      icon: '🍏'
    },
    {
      className: 'bg-1f34a',
      icon: '🍊'
    },
    {
      className: 'bg-1f34b',
      icon: '🍋'
    },

    {
      className: 'bg-1f352',
      icon: '🍒'
    },
    {
      className: 'bg-1f347',
      icon: '🍇'
    },

    {
      className: 'bg-1f349',
      icon: '🍉'
    },
    {
      className: 'bg-1f353',
      icon: '🍓'
    },
    {
      className: 'bg-1f351',
      icon: '🍑'
    },
    {
      className: 'bg-1f348',
      icon: '🍈'
    },

    {
      className: 'bg-1f34c',
      icon: '🍌'
    },
    {
      className: 'bg-1f350',
      icon: '🍐'
    },
    {
      className: 'bg-1f34d',
      icon: '🍍'
    },
    {
      className: 'bg-1f360',
      icon: '🍠'
    },
    {
      className: 'bg-1f346',
      icon: '🍆'
    },
    {
      className: 'bg-1f345',
      icon: '🍅'
    },

    {
      className: 'bg-1f33d',
      icon: '🌽'
    }

    ]
  },
  {
    name: '自然',
    iconArr: [{
      className: 'bg-1f490',
      icon: '💐'
    },
    {
      className: 'bg-1f338',
      icon: '🌸'
    },
    {
      className: 'bg-1f337',
      icon: '🌷'
    },
    {
      className: 'bg-1f340',
      icon: '🍀'
    },
    {
      className: 'bg-1f339',
      icon: '🌹'
    },
    {
      className: 'bg-1f33b',
      icon: '🌻'
    },
    {
      className: 'bg-1f33a',
      icon: '🌺'
    },
    {
      className: 'bg-1f341',
      icon: '🍁'
    },
    {
      className: 'bg-1f343',
      icon: '🍃'
    },
    {
      className: 'bg-1f342',
      icon: '🍂'
    },
    {
      className: 'bg-1f33f',
      icon: '🌿'
    },
    {
      className: 'bg-1f33e',
      icon: '🌾'
    },

    {
      className: 'bg-1f344',
      icon: '🍄'
    },
    {
      className: 'bg-1f335',
      icon: '🌵'
    },
    {
      className: 'bg-1f334',
      icon: '🌴'
    },

    {
      className: 'bg-1f332',
      icon: '🌲'
    },
    {
      className: 'bg-1f333',
      icon: '🌳'
    },

    {
      className: 'bg-1f330',
      icon: '🌰'
    },
    {
      className: 'bg-1f331',
      icon: '🌱'
    },
    {
      className: 'bg-1f33c',
      icon: '🌼'
    },
    {
      className: 'bg-1f310',
      icon: '🌐'
    },

    {
      className: 'bg-1f31e',
      icon: '🌞'
    },
    {
      className: 'bg-1f31d',
      icon: '🌝'
    },
    {
      className: 'bg-1f31a',
      icon: '🌚'
    },

    {
      className: 'bg-1f311',
      icon: '🌑'
    },
    {
      className: 'bg-1f312',
      icon: '🌒'
    },
    {
      className: 'bg-1f313',
      icon: '🌓'
    },

    {
      className: 'bg-1f314',
      icon: '🌔'
    },
    {
      className: 'bg-1f315',
      icon: '🌕'
    },
    {
      className: 'bg-1f316',
      icon: '🌖'
    },
    {
      className: 'bg-1f317',
      icon: '🌗'
    },
    {
      className: 'bg-1f31c',
      icon: '🌜'
    },

    {
      className: 'bg-1f31b',
      icon: '🌛'
    },
    {
      className: 'bg-1f319',
      icon: '🌙'
    },
    {
      className: 'bg-1f30d',
      icon: '🌍'
    },
    {
      className: 'bg-1f30e',
      icon: '🌎'
    },
    {
      className: 'bg-1f30f',
      icon: '🌏'
    },

    {
      className: 'bg-1f30b',
      icon: '🌋'
    },
    {
      className: 'bg-1f30c',
      icon: '🌌'
    },
    {
      className: 'bg-1f320',
      icon: '🌠'
    },
    {
      className: 'bg-f2b50',
      icon: '⭐'
    },

    {
      className: 'bg-f2600',
      icon: '☀'
    },

    {
      className: 'bg-f26c5',
      icon: '⛅'
    },
    {
      className: 'bg-f2601',
      icon: '☁'
    },
    {
      className: 'bg-f26a1',
      icon: '⚡'
    },

    {
      className: 'bg-f2614',
      icon: '☔'
    },
    {
      className: 'bg-f2744',
      icon: '❄'
    },
    {
      className: 'bg-f26c4',
      icon: '⛄'
    },

    {
      className: 'bg-1f300',
      icon: '🌀'
    },
    {
      className: 'bg-1f301',
      icon: '🌁'
    },
    {
      className: 'bg-1f308',
      icon: '🌈'
    },
    {
      className: 'bg-1f30a',
      icon: '🌊'
    },

    {
      className: 'bg-1f525',
      icon: '🔥'
    },
    {
      className: 'bg-f2728',
      icon: '✨'
    },
    {
      className: 'bg-1f31f',
      icon: '🌟'
    },
    {
      className: 'bg-1f4ab',
      icon: '💫'
    },
    {
      className: 'bg-1f4a5',
      icon: '💥'
    },
    {
      className: 'bg-1f4a2',
      icon: '💢'
    },
    {
      className: 'bg-1f4a6',
      icon: '💦'
    },
    {
      className: 'bg-1f4a7',
      icon: '💧'
    },
    {
      className: 'bg-1f318',
      icon: '🌘'
    },
    {
      className: 'bg-1f4a4',
      icon: '💤'
    },
    {
      className: 'bg-1f4a8',
      icon: '💨'
    }
    ]
  },
  {
    name: '生肖',
    iconArr: [{
      className: 'bg-1f401',
      icon: '🐁'
    },
    {
      className: 'bg-1f402',
      icon: '🐂'
    },
    {
      className: 'bg-1f405',
      icon: '🐅'
    },
    {
      className: 'bg-1f407',
      icon: '🐇'
    },
    {
      className: 'bg-1f409',
      icon: '🐉'
    },
    {
      className: 'bg-1f40d',
      icon: '🐍'
    },
    {
      className: 'bg-1f40e',
      icon: '🐎'
    },
    {
      className: 'bg-1f410',
      icon: '🐐'
    },
    {
      className: 'bg-1f412',
      icon: '🐒'
    },
    {
      className: 'bg-1f413',
      icon: '🐓'
    },
    {
      className: 'bg-1f415',
      icon: '🐕'
    },
    {
      className: 'bg-1f416',
      icon: '🐖'
    },
    {
      className: 'bg-f2648',
      icon: '♈'
    },
    {
      className: 'bg-f2649',
      icon: '♉'
    },
    {
      className: 'bg-f264a',
      icon: '♊'
    },
    {
      className: 'bg-f264b',
      icon: '♋'
    },
    {
      className: 'bg-f264c',
      icon: '♌'
    },
    {
      className: 'bg-f264d',
      icon: '♍'
    },
    {
      className: 'bg-f264e',
      icon: '♎'
    },
    {
      className: 'bg-f264f',
      icon: '♏'
    },
    {
      className: 'bg-f2650',
      icon: '♐'
    },
    {
      className: 'bg-f2651',
      icon: '♑'
    },
    {
      className: 'bg-f2652',
      icon: '♒'
    },
    {
      className: 'bg-f2653',
      icon: '♓'
    }

    ]
  },
  {
    name: '运动',
    iconArr: [{
      className: 'bg-1f4f0',
      icon: '📰'
    }, {
      className: 'bg-1f3a8',
      icon: '🎨'
    },
    {
      className: 'bg-1f3ac',
      icon: '🎬'
    }, {
      className: 'bg-1f3a4',
      icon: '🎤'
    },
    {
      className: 'bg-1f3a7',
      icon: '🎧'
    }, {
      className: 'bg-1f3bc',
      icon: '🎼'
    },
    {
      className: 'bg-1f3b5',
      icon: '🎵'
    }, {
      className: 'bg-1f3b6',
      icon: '🎶'
    },
    {
      className: 'bg-1f3b9',
      icon: '🎹'
    }, {
      className: 'bg-1f3bb',
      icon: '🎻'
    },
    {
      className: 'bg-1f3b7',
      icon: '🎷'
    }, {
      className: 'bg-1f3b8',
      icon: '🎸'
    },
    {
      className: 'bg-1f47e',
      icon: '👾'
    }, {
      className: 'bg-1f3ae',
      icon: '🎮'
    },
    {
      className: 'bg-1f0cf',
      icon: '🃏'
    }, {
      className: 'bg-1f3b4',
      icon: '🎴'
    },
    {
      className: 'bg-1f004',
      icon: '🀄'
    }, {
      className: 'bg-1f3b2',
      icon: '🎲'
    },
    {
      className: 'bg-1f3af',
      icon: '🎯'
    }, {
      className: 'bg-1f3c8',
      icon: '🏈'
    },
    {
      className: 'bg-1f3c0',
      icon: '🏀'
    }, {
      className: 'bg-f26bd',
      icon: '⚽'
    },
    {
      className: 'bg-f26be',
      icon: '⚾'
    }, {
      className: 'bg-1f3be',
      icon: '🎾'
    },
    {
      className: 'bg-1f3b1',
      icon: '🎱'
    }, {
      className: 'bg-1f3c9',
      icon: '🏉'
    },
    {
      className: 'bg-1f3b3',
      icon: '🎳'
    }, {
      className: 'bg-f26f3',
      icon: '⛳'
    },
    {
      className: 'bg-1f6b5',
      icon: '🚵'
    }, {
      className: 'bg-1f6b4',
      icon: '🚴'
    },
    {
      className: 'bg-1f3c1',
      icon: '🏁'
    }, {
      className: 'bg-1f3c7',
      icon: '🏇'
    },
    {
      className: 'bg-1f3c6',
      icon: '🏆'
    }, {
      className: 'bg-1f3bf',
      icon: '🎿'
    },
    {
      className: 'bg-1f3c2',
      icon: '🏂'
    }, {
      className: 'bg-1f3ca',
      icon: '🏊'
    },
    {
      className: 'bg-1f3c4',
      icon: '🏄'
    }, {
      className: 'bg-1f3a3',
      icon: '🎣'
    }

    ]
  },
  {
    name: '人物',
    iconArr: [{
      className: 'bg-1f442',
      icon: '👂'
    }, {
      className: 'bg-1f440',
      icon: '👀'
    }, {
      className: 'bg-1f443',
      icon: '👃'
    }, {
      className: 'bg-1f445',
      icon: '👅'
    }, {
      className: 'bg-1f444',
      icon: '👄'
    }, {
      className: 'bg-1f44d',
      icon: '👍'
    }, {
      className: 'bg-1f44e',
      icon: '👎'
    }, {
      className: 'bg-1f44c',
      icon: '👌'
    },
    {
      className: 'bg-1f44a',
      icon: '👊'
    }, {
      className: 'bg-f270a',
      icon: '✊'
    }, {
      className: 'bg-f270c',
      icon: '✌'
    }, {
      className: 'bg-1f44b',
      icon: '👋'
    }, {
      className: 'bg-f270b',
      icon: '✋'
    }, {
      className: 'bg-1f450',
      icon: '👐'
    }, {
      className: 'bg-1f446',
      icon: '👆'
    }, {
      className: 'bg-1f447',
      icon: '👇'
    },
    {
      className: 'bg-1f449',
      icon: '👉'
    }, {
      className: 'bg-1f448',
      icon: '👈'
    }, {
      className: 'bg-1f64c',
      icon: '🙌'
    }, {
      className: 'bg-1f64f',
      icon: '🙏'
    }, {
      className: 'bg-f261d',
      icon: '☝'
    }, {
      className: 'bg-1f44f',
      icon: '👏'
    }, {
      className: 'bg-1f6b6',
      icon: '🚶'
    }, {
      className: 'bg-1f4aa',
      icon: '💪'
    },
    {
      className: 'bg-1f3c3',
      icon: '🏃'
    }, {
      className: 'bg-1f483',
      icon: '💃'
    }, {
      className: 'bg-1f46b',
      icon: '👫'
    }, {
      className: 'bg-1f46a',
      icon: '👪'
    }, {
      className: 'bg-1f46c',
      icon: '👬'
    }, {
      className: 'bg-1f46d',
      icon: '👭'
    }, {
      className: 'bg-1f48f',
      icon: '💏'
    }, {
      className: 'bg-1f491',
      icon: '💑'
    },
    {
      className: 'bg-1f46f',
      icon: '👯'
    }, {
      className: 'bg-1f645',
      icon: '🙆'
    }, {
      className: 'bg-1f646',
      icon: '🙅'
    }, {
      className: 'bg-1f481',
      icon: '💁'
    }, {
      className: 'bg-1f64b',
      icon: '🙋'
    }, {
      className: 'bg-1f487',
      icon: '💇'
    }, {
      className: 'bg-1f485',
      icon: '💅'
    }, {
      className: 'bg-1f470',
      icon: '👰'
    },
    {
      className: 'bg-1f64e',
      icon: '🙎'
    }, {
      className: 'bg-1f64d',
      icon: '🙍'
    }, {
      className: 'bg-1f647',
      icon: '🙇'
    }, {
      className: 'bg-1f3a9',
      icon: '🎩'
    }, {
      className: 'bg-1f451',
      icon: '👑'
    }, {
      className: 'bg-1f452',
      icon: '👒'
    }, {
      className: 'bg-1f45f',
      icon: '👟'
    }, {
      className: 'bg-1f45e',
      icon: '👞'
    },
    {
      className: 'bg-1f461',
      icon: '👡'
    }, {
      className: 'bg-1f460',
      icon: '👠'
    }, {
      className: 'bg-1f462',
      icon: '👢'
    }, {
      className: 'bg-1f455',
      icon: '👕'
    }, {
      className: 'bg-1f454',
      icon: '👔'
    }, {
      className: 'bg-1f45a',
      icon: '👚'
    }, {
      className: 'bg-1f457',
      icon: '👗'
    }, {
      className: 'bg-1f3bd',
      icon: '🎽'
    },
    {
      className: 'bg-1f456',
      icon: '👖'
    }, {
      className: 'bg-1f458',
      icon: '👘'
    }, {
      className: 'bg-1f459',
      icon: '👙'
    }, {
      className: 'bg-1f4bc',
      icon: '💼'
    }, {
      className: 'bg-1f45c',
      icon: '👜'
    }, {
      className: 'bg-1f45d',
      icon: '👝'
    }, {
      className: 'bg-1f45b',
      icon: '👛'
    }, {
      className: 'bg-1f453',
      icon: '👓'
    },
    {
      className: 'bg-1f380',
      icon: '🎀'
    }, {
      className: 'bg-1f302',
      icon: '🌂'
    }, {
      className: 'bg-1f484',
      icon: '💄'
    }, {
      className: 'bg-1f48b',
      icon: '💋'
    }, {
      className: 'bg-1f463',
      icon: '👣'
    }, {
      className: 'bg-1f48e',
      icon: '💎'
    }, {
      className: 'bg-1f48d',
      icon: '💍'
    }

    ]
  },
  {
    name: '花样',
    iconArr: [{
      className: 'bg-1f451',
      icon: '👑'
    }, {
      className: 'bg-1f525',
      icon: '🔥'
    }, {
      className: 'bg-2728',
      icon: '✨'
    }, {
      className: 'bg-1f31f',
      icon: '🌟'
    }, {
      className: 'bg-1f4ab',
      icon: '💫'
    },
    {
      className: 'bg-1f4a5',
      icon: '💥'
    }, {
      className: 'bg-1f380',
      icon: '🎀'
    }, {
      className: 'bg-1f302',
      icon: '🌂'
    }, {
      className: 'bg-1f484',
      icon: '💄'
    }, {
      className: 'bg-1f49b',
      icon: '💛'
    },
    {
      className: 'bg-1f499',
      icon: '💙'
    }, {
      className: 'bg-1f49c',
      icon: '💜'
    }, {
      className: 'bg-1f49a',
      icon: '💚'
    }, {
      className: 'bg-f2764',
      icon: '❤'
    }, {
      className: 'bg-1f494',
      icon: '💔'
    },
    {
      className: 'bg-1f497',
      icon: '💗'
    }, {
      className: 'bg-1f493',
      icon: '💓'
    }, {
      className: 'bg-1f495',
      icon: '💕'
    }, {
      className: 'bg-1f496',
      icon: '💖'
    }, {
      className: 'bg-1f49e',
      icon: '💞'
    },
    {
      className: 'bg-1f498',
      icon: '💘'
    }, {
      className: 'bg-1f48c',
      icon: '💌'
    }, {
      className: 'bg-1f48b',
      icon: '💋'
    }, {
      className: 'bg-1f38d',
      icon: '🎍'
    }, {
      className: 'bg-1f49d',
      icon: '💝'
    },
    {
      className: 'bg-1f38e',
      icon: '🎎'
    }, {
      className: 'bg-1f392',
      icon: '🎒'
    }, {
      className: 'bg-1f393',
      icon: '🎓'
    }, {
      className: 'bg-1f38f',
      icon: '🎏'
    }, {
      className: 'bg-1f386',
      icon: '🎆'
    },
    {
      className: 'bg-1f387',
      icon: '🎇'
    }, {
      className: 'bg-1f390',
      icon: '🎐'
    }, {
      className: 'bg-1f391',
      icon: '🎑'
    }, {
      className: 'bg-1f383',
      icon: '🎃'
    }, {
      className: 'bg-1f47b',
      icon: '👻'
    },
    {
      className: 'bg-1f385',
      icon: '🎅'
    }, {
      className: 'bg-1f384',
      icon: '🎄'
    }, {
      className: 'bg-1f381',
      icon: '🎁'
    }, {
      className: 'bg-1f38b',
      icon: '🎋'
    }, {
      className: 'bg-1f389',
      icon: '🎉'
    },
    {
      className: 'bg-1f38a',
      icon: '🎊'
    }, {
      className: 'bg-1f388',
      icon: '🎈'
    }, {
      className: 'bg-1f38c',
      icon: '🎌'
    }
    ]
  },
  {
    name: '文字',
    iconArr: [{
      className: 'bg-1f22f',
      icon: '🈯'
    }, {
      className: 'bg-1f233',
      icon: '🈳'
    },
    {
      className: 'bg-1f235',
      icon: '🈵'
    }, {
      className: 'bg-1f234',
      icon: '🈴'
    }, {
      className: 'bg-1f232',
      icon: '🈲'
    }, {
      className: 'bg-1f250',
      icon: '🉐'
    },

    {
      className: 'bg-1f239',
      icon: '🈹'
    }, {
      className: 'bg-1f23a',
      icon: '🈺'
    },
    {
      className: 'bg-1f236',
      icon: '🈶'
    }, {
      className: 'bg-1f21a',
      icon: '🈚'
    }, {
      className: 'bg-1f6be',
      icon: '🚾'
    }, {
      className: 'bg-1f17f',
      icon: '🅿'
    },

    {
      className: 'bg-1f237',
      icon: '🈷'
    }, {
      className: 'bg-1f238',
      icon: '🈸'
    },
    {
      className: 'bg-1f202',
      icon: '🈂'
    }, {
      className: 'bg-f24c2',
      icon: 'Ⓜ'
    }, {
      className: 'bg-1f251',
      icon: '🉑'
    }, {
      className: 'bg-f3299',
      icon: '㊙'
    },

    {
      className: 'bg-f3297',
      icon: '㊗'
    }, {
      className: 'bg-1f191',
      icon: '🆑'
    },
    {
      className: 'bg-1f198',
      icon: '🆘'
    }, {
      className: 'bg-1f194',
      icon: '🆔'
    }, {
      className: 'bg-1f51e',
      icon: '🔞'
    }, {
      className: 'bg-1f6ab',
      icon: '🚫'
    },

    {
      className: 'bg-1f19a',
      icon: '🆚'
    }, {
      className: 'bg-1f171',
      icon: '🅱'
    },
    {
      className: 'bg-1f170',
      icon: '🅰'
    }, {
      className: 'bg-1f18e',
      icon: '🆎'
    }, {
      className: 'bg-1f17e',
      icon: '🅾'
    }, {
      className: 'bg-f2747',
      icon: '❇'
    }

    ]
  },
  {
    name: '物件',
    iconArr: [{
      className: 'bg-1f52e',
      icon: '🔮'
    }, {
      className: 'bg-1f3a5',
      icon: '🎥'
    },
    {
      className: 'bg-1f4f7',
      icon: '📷'
    }, {
      className: 'bg-1f4f9',
      icon: '📹'
    },
    {
      className: 'bg-1f4fc',
      icon: '📼'
    }, {
      className: 'bg-1f4bf',
      icon: '💿'
    },
    {
      className: 'bg-1f4c0',
      icon: '📀'
    }, {
      className: 'bg-1f4bd',
      icon: '💽'
    },
    {
      className: 'bg-1f4be',
      icon: '💾'
    }, {
      className: 'bg-1f4bb',
      icon: '💻'
    },
    {
      className: 'bg-1f4f1',
      icon: '📱'
    }, {
      className: 'bg-f260e',
      icon: '☎'
    },
    {
      className: 'bg-1f4de',
      icon: '📞'
    }, {
      className: 'bg-1f4df',
      icon: '📟'
    },
    {
      className: 'bg-1f4e0',
      icon: '📠'
    }, {
      className: 'bg-1f4e1',
      icon: '📡'
    },
    {
      className: 'bg-1f4fa',
      icon: '📺'
    }, {
      className: 'bg-1f4fb',
      icon: '📻'
    },
    {
      className: 'bg-1f50a',
      icon: '🔊'
    }, {
      className: 'bg-1f509',
      icon: '🔉'
    },
    {
      className: 'bg-1f508',
      icon: '🔈'
    }, {
      className: 'bg-1f507',
      icon: '🔇'
    },
    {
      className: 'bg-1f514',
      icon: '🔔'
    }, {
      className: 'bg-1f515',
      icon: '🔕'
    },
    {
      className: 'bg-1f4e2',
      icon: '📢'
    }, {
      className: 'bg-1f4e3',
      icon: '📣'
    },
    {
      className: 'bg-f23f3',
      icon: '⏳'
    }, {
      className: 'bg-f231b',
      icon: '⌛'
    },
    {
      className: 'bg-f23f0',
      icon: '⏰'
    }, {
      className: 'bg-f231a',
      icon: '⌚'
    },
    {
      className: 'bg-1f513',
      icon: '🔓'
    }, {
      className: 'bg-1f512',
      icon: '🔒'
    },
    {
      className: 'bg-1f510',
      icon: '🔐'
    }, {
      className: 'bg-1f511',
      icon: '🔑'
    },
    {
      className: 'bg-1f50e',
      icon: '🔎'
    }, {
      className: 'bg-1f4a1',
      icon: '💡'
    },
    {
      className: 'bg-1f526',
      icon: '🔦'
    }, {
      className: 'bg-1f506',
      icon: '🔆'
    },
    {
      className: 'bg-1f505',
      icon: '🔅'
    }, {
      className: 'bg-1f50c',
      icon: '🔌'
    },
    {
      className: 'bg-1f50b',
      icon: '🔋'
    }, {
      className: 'bg-1f50d',
      icon: '🔍'
    },
    {
      className: 'bg-1f6c1',
      icon: '🛁'
    }, {
      className: 'bg-1f6c0',
      icon: '🛀'
    },
    {
      className: 'bg-1f6bf',
      icon: '🚿'
    }, {
      className: 'bg-1f6bd',
      icon: '🚽'
    },
    {
      className: 'bg-1f527',
      icon: '🔧'
    }, {
      className: 'bg-1f529',
      icon: '🔩'
    },
    {
      className: 'bg-1f528',
      icon: '🔨'
    }, {
      className: 'bg-1f6aa',
      icon: '🚪'
    },
    {
      className: 'bg-1f6ac',
      icon: '🚬'
    }, {
      className: 'bg-1f4a3',
      icon: '💣'
    },
    {
      className: 'bg-1f52b',
      icon: '🔫'
    }, {
      className: 'bg-1f52a',
      icon: '🔪'
    },
    {
      className: 'bg-1f48a',
      icon: '💊'
    }, {
      className: 'bg-1f4b0',
      icon: '💰'
    },
    {
      className: 'bg-1f4b4',
      icon: '💴'
    }, {
      className: 'bg-1f4b5',
      icon: '💵'
    },
    {
      className: 'bg-1f4b7',
      icon: '💷'
    }, {
      className: 'bg-1f4b6',
      icon: '💶'
    },
    {
      className: 'bg-1f4b3',
      icon: '💳'
    }, {
      className: 'bg-1f4b8',
      icon: '💸'
    },
    {
      className: 'bg-1f4f2',
      icon: '📲'
    }, {
      className: 'bg-1f4e7',
      icon: '📧'
    },
    {
      className: 'bg-1f4e5',
      icon: '📥'
    }, {
      className: 'bg-1f4e4',
      icon: '📤'
    },
    {
      className: 'bg-f2709',
      icon: '✉'
    }, {
      className: 'bg-1f4e9',
      icon: '📩'
    },
    {
      className: 'bg-1f4e8',
      icon: '📨'
    }, {
      className: 'bg-1f4ef',
      icon: '📯'
    },
    {
      className: 'bg-1f4eb',
      icon: '📫'
    }, {
      className: 'bg-1f4ea',
      icon: '📪'
    },
    {
      className: 'bg-1f4ec',
      icon: '📬'
    }, {
      className: 'bg-1f4ed',
      icon: '📭'
    },
    {
      className: 'bg-1f4ee',
      icon: '📮'
    }, {
      className: 'bg-1f4e6',
      icon: '📦'
    },
    {
      className: 'bg-1f4dd',
      icon: '📝'
    }, {
      className: 'bg-1f4c4',
      icon: '📄'
    },
    {
      className: 'bg-1f4c3',
      icon: '📃'
    }, {
      className: 'bg-1f4d1',
      icon: '📑'
    },
    {
      className: 'bg-1f4ca',
      icon: '📊'
    }, {
      className: 'bg-1f4c8',
      icon: '📈'
    },
    {
      className: 'bg-1f4c9',
      icon: '📉'
    }, {
      className: 'bg-1f4dc',
      icon: '📜'
    },
    {
      className: 'bg-1f4cb',
      icon: '📋'
    }, {
      className: 'bg-1f4c5',
      icon: '📅'
    },
    {
      className: 'bg-1f4c6',
      icon: '📆'
    }, {
      className: 'bg-1f4c7',
      icon: '📇'
    },
    {
      className: 'bg-1f4c1',
      icon: '📁'
    }, {
      className: 'bg-1f4c2',
      icon: '📂'
    },
    {
      className: 'bg-f2702',
      icon: '✂'
    }, {
      className: 'bg-1f4cc',
      icon: '📌'
    },
    {
      className: 'bg-1f4ce',
      icon: '📎'
    }, {
      className: 'bg-f2712',
      icon: '✒'
    },
    {
      className: 'bg-f270f',
      icon: '✏'
    }, {
      className: 'bg-1f4cf',
      icon: '📏'
    },
    {
      className: 'bg-1f4d0',
      icon: '📐'
    }, {
      className: 'bg-1f4d5',
      icon: '📕'
    },
    {
      className: 'bg-1f4d7',
      icon: '📗'
    }, {
      className: 'bg-1f4d8',
      icon: '📘'
    },
    {
      className: 'bg-1f4d9',
      icon: '📙'
    }, {
      className: 'bg-1f4d3',
      icon: '📓'
    },
    {
      className: 'bg-1f4d4',
      icon: '📔'
    }, {
      className: 'bg-1f4d2',
      icon: '📒'
    },
    {
      className: 'bg-1f4da',
      icon: '📚'
    }, {
      className: 'bg-1f4d6',
      icon: '📖'
    },
    {
      className: 'bg-1f516',
      icon: '🔖'
    }, {
      className: 'bg-1f4db',
      icon: '📛'
    },
    {
      className: 'bg-1f52c',
      icon: '🔬'
    }
    ]
  },
  {
    name: '标识',
    iconArr: [{
      className: 'bg-1f6bb',
      icon: '🚻'
    }, {
      className: 'bg-1f6b9',
      icon: '🚹'
    }, {
      className: 'bg-1f6ba',
      icon: '🚺'
    }, {
      className: 'bg-1f6bc',
      icon: '🚼'
    }, {
      className: 'bg-1f6b0',
      icon: '🚰'
    }, {
      className: 'bg-1f6ae',
      icon: '🚮'
    }, {
      className: 'bg-f267f',
      icon: '♿'
    }, {
      className: 'bg-1f6ad',
      icon: '🚭'
    }, {
      className: 'bg-1f6c2',
      icon: '🛂'
    }, {
      className: 'bg-1f6c4',
      icon: '🛄'
    }, {
      className: 'bg-1f6c5',
      icon: '🛅'
    },
    {
      className: 'bg-1f6c3',
      icon: '🛃'
    }, {
      className: 'bg-1f6ab',
      icon: '🚫'
    }, {
      className: 'bg-1f51e',
      icon: '🔞'
    }, {
      className: 'bg-1f6af',
      icon: '🚯'
    }, {
      className: 'bg-1f6b1',
      icon: '🚱'
    }, {
      className: 'bg-1f6b3',
      icon: '🚳'
    }, {
      className: 'bg-1f6b7',
      icon: '🚷'
    }, {
      className: 'bg-1f6b8',
      icon: '🚸'
    }, {
      className: 'bg-f26d4',
      icon: '⛔'
    }, {
      className: 'bg-f2733',
      icon: '✳'
    }, {
      className: 'bg-f2747',
      icon: '❇'
    },
    {
      className: 'bg-f274e',
      icon: '❎'
    }, {
      className: 'bg-f2705',
      icon: '✅'
    }, {
      className: 'bg-f2734',
      icon: '✴'
    }, {
      className: 'bg-1f49f',
      icon: '💟'
    }, {
      className: 'bg-1f4f3',
      icon: '📳'
    }, {
      className: 'bg-1f4f4',
      icon: '📴'
    }, {
      className: 'bg-1f4a0',
      icon: '💠'
    }, {
      className: 'bg-f27bf',
      icon: '➿'
    }, {
      className: 'bg-f267b',
      icon: '♻'
    }, {
      className: 'bg-f26ce',
      icon: '⛎'
    }, {
      className: 'bg-1f51f',
      icon: '🔟'
    },

    {
      className: 'bg-f2b06',
      icon: '⬆'
    }, {
      className: 'bg-f2b07',
      icon: '⬇'
    }, {
      className: 'bg-f2b05',
      icon: '⬅'
    }, {
      className: 'bg-f27a1',
      icon: '➡'
    }, {
      className: 'bg-1f523',
      icon: '🔣'
    }, {
      className: 'bg-1f522',
      icon: '🔢'
    }, {
      className: 'bg-1f520',
      icon: '🔠'
    }, {
      className: 'bg-1f521',
      icon: '🔡'
    }, {
      className: 'bg-1f524',
      icon: '🔤'
    }, {
      className: 'bg-f2197',
      icon: '↗'
    }, {
      className: 'bg-f2196',
      icon: '↖'
    },
    {
      className: 'bg-f2198',
      icon: '↘'
    }, {
      className: 'bg-f2199',
      icon: '↙'
    }, {
      className: 'bg-f2194',
      icon: '↔'
    }, {
      className: 'bg-f2195',
      icon: '↕'
    }, {
      className: 'bg-1f504',
      icon: '🔄'
    }, {
      className: 'bg-f25c0',
      icon: '◀'
    }, {
      className: 'bg-f25b6',
      icon: '▶'
    }, {
      className: 'bg-1f53c',
      icon: '🔼'
    }, {
      className: 'bg-1f53d',
      icon: '🔽'
    }, {
      className: 'bg-f21a9',
      icon: '↩'
    }, {
      className: 'bg-f21aa',
      icon: '↪'
    },
    {
      className: 'bg-f2139',
      icon: 'ℹ'
    }, {
      className: 'bg-f23ea',
      icon: '⏪'
    }, {
      className: 'bg-f23eb',
      icon: '⏫'
    }, {
      className: 'bg-f23ec',
      icon: '⏬'
    }, {
      className: 'bg-f2935',
      icon: '⤵'
    }, {
      className: 'bg-f2934',
      icon: '⤴'
    }, {
      className: 'bg-1f197',
      icon: '🆗'
    }, {
      className: 'bg-1f500',
      icon: '🔀'
    }, {
      className: 'bg-1f501',
      icon: '🔁'
    }, {
      className: 'bg-1f502',
      icon: '🔂'
    }, {
      className: 'bg-1f195',
      icon: '🆕'
    },
    {
      className: 'bg-1f199',
      icon: '🆙'
    }, {
      className: 'bg-1f192',
      icon: '🆒'
    }, {
      className: 'bg-1f193',
      icon: '🆓'
    }, {
      className: 'bg-1f196',
      icon: '🆖'
    }, {
      className: 'bg-1f4f6',
      icon: '📶'
    }, {
      className: 'bg-1f3a6',
      icon: '🎦'
    }, {
      className: 'bg-1f201',
      icon: '🈁'
    }, {
      className: 'bg-1f52f',
      icon: '🔯'
    }, {
      className: 'bg-1f3e7',
      icon: '🏧'
    }, {
      className: 'bg-1f4b9',
      icon: '💹'
    }, {
      className: 'bg-1f4b2',
      icon: '💲'
    },
    {
      className: 'bg-1f4b1',
      icon: '💱'
    },
    {
      className: 'bg-f274c',
      icon: '❌'
    }, {
      className: 'bg-f2757',
      icon: '❗'
    }, {
      className: 'bg-f2753',
      icon: '❓'
    }, {
      className: 'bg-f2755',
      icon: '❕'
    }, {
      className: 'bg-f2754',
      icon: '❔'
    }, {
      className: 'bg-f2b55',
      icon: '⭕'
    }, {
      className: 'bg-1f51d',
      icon: '🔝'
    }, {
      className: 'bg-1f51a',
      icon: '🔚'
    }, {
      className: 'bg-1f519',
      icon: '🔙'
    },
    {
      className: 'bg-1f51b',
      icon: '🔛'
    }, {
      className: 'bg-1f51c',
      icon: '🔜'
    }, {
      className: 'bg-1f503',
      icon: '🔃'
    }, {
      className: 'bg-1f55b',
      icon: '🕛'
    }, {
      className: 'bg-1f551',
      icon: '🕑'
    }, {
      className: 'bg-1f552',
      icon: '🕒'
    }, {
      className: 'bg-1f55e',
      icon: '🕞'
    },
    {
      className: 'bg-1f553',
      icon: '🕓'
    },
    {
      className: 'bg-f2795',
      icon: '➕'
    }, {
      className: 'bg-f2796',
      icon: '➖'
    }, {
      className: 'bg-f2797',
      icon: '➗'
    }, {
      className: 'bg-f2660',
      icon: '♠'
    }, {
      className: 'bg-f2665',
      icon: '♥'
    }, {
      className: 'bg-f2663',
      icon: '♣'
    }, {
      className: 'bg-f2666',
      icon: '♦'
    },
    {
      className: 'bg-1f4ae',
      icon: '💮'
    }, {
      className: 'bg-1f4af',
      icon: '💯'
    }, {
      className: 'bg-f2714',
      icon: '✔'
    }, {
      className: 'bg-f2611',
      icon: '☑'
    }, {
      className: 'bg-1f518',
      icon: '🔘'
    }, {
      className: 'bg-1f517',
      icon: '🔗'
    }, {
      className: 'bg-f27b0',
      icon: '➰'
    }, {
      className: 'bg-f3030',
      icon: '〰'
    }, {
      className: 'bg-f303d',
      icon: '〽'
    }, {
      className: 'bg-1f531',
      icon: '🔱'
    }, {
      className: 'bg-f25fc',
      icon: '◼'
    },
    {
      className: 'bg-f25fb',
      icon: '◻'
    }, {
      className: 'bg-f25fe',
      icon: '◾'
    }, {
      className: 'bg-f25fd',
      icon: '◽'
    }, {
      className: 'bg-f25aa',
      icon: '▪'
    }, {
      className: 'bg-f25ab',
      icon: '▫'
    }, {
      className: 'bg-1f53a',
      icon: '🔺'
    }, {
      className: 'bg-1f532',
      icon: '🔲'
    }, {
      className: 'bg-1f533',
      icon: '🔳'
    }, {
      className: 'bg-f26ab',
      icon: '⚫'
    }, {
      className: 'bg-f26aa',
      icon: '⚪'
    }, {
      className: 'bg-1f534',
      icon: '🔴'
    },
    {
      className: 'bg-1f535',
      icon: '🔵'
    }, {
      className: 'bg-1f53b',
      icon: '🔻'
    }, {
      className: 'bg-1f536',
      icon: '🔶'
    }, {
      className: 'bg-1f537',
      icon: '🔷'
    }, {
      className: 'bg-1f538',
      icon: '🔸'
    }, {
      className: 'bg-1f539',
      icon: '🔹'
    }, {
      className: 'bg-f2716',
      icon: '✖'
    }
    ]
  },
  {
    name: '房车',
    iconArr: [{
      className: 'bg-1f3e0',
      icon: '🏠'
    }, {
      className: 'bg-1f3e1',
      icon: '🏡'
    }, {
      className: 'bg-1f3eb',
      icon: '🏫'
    }, {
      className: 'bg-1f3e2',
      icon: '🏢'
    },
    {
      className: 'bg-1f3e3',
      icon: '🏣'
    }, {
      className: 'bg-1f3e5',
      icon: '🏥'
    }, {
      className: 'bg-1f3e6',
      icon: '🏦'
    }, {
      className: 'bg-1f3ea',
      icon: '🏪'
    }, {
      className: 'bg-1f3e9',
      icon: '🏩'
    }, {
      className: 'bg-1f3e8',
      icon: '🏨'
    }, {
      className: 'bg-1f492',
      icon: '💒'
    }, {
      className: 'bg-f26ea',
      icon: '⛪'
    }, {
      className: 'bg-1f3ec',
      icon: '🏬'
    }, {
      className: 'bg-1f3e4',
      icon: '🏤'
    }, {
      className: 'bg-1f307',
      icon: '🌇'
    },
    {
      className: 'bg-1f306',
      icon: '🌆'
    }, {
      className: 'bg-1f3ef',
      icon: '🏯'
    }, {
      className: 'bg-1f3f0',
      icon: '🏰'
    }, {
      className: 'bg-f26fa',
      icon: '⛺'
    },
    {
      className: 'bg-1f3ed',
      icon: '🏭'
    }, {
      className: 'bg-1f5fc',
      icon: '🗼'
    }, {
      className: 'bg-1f5fe',
      icon: '🗾'
    }, {
      className: 'bg-1f5fb',
      icon: '🗻'
    }, {
      className: 'bg-1f304',
      icon: '🌄'
    }, {
      className: 'bg-1f6a2',
      icon: '🚢'
    }, {
      className: 'bg-f26f5',
      icon: '⛵'
    }, {
      className: 'bg-1f6a4',
      icon: '🚤'
    }, {
      className: 'bg-1f6a3',
      icon: '🚣'
    }, {
      className: 'bg-f2693',
      icon: '⚓'
    }, {
      className: 'bg-1f680',
      icon: '🚀'
    },
    {
      className: 'bg-f2708',
      icon: '✈'
    }, {
      className: 'bg-1f4ba',
      icon: '💺'
    }, {
      className: 'bg-1f681',
      icon: '🚁'
    }, {
      className: 'bg-1f682',
      icon: '🚂'
    },
    {
      className: 'bg-1f68a',
      icon: '🚊'
    }, {
      className: 'bg-1f689',
      icon: '🚉'
    }, {
      className: 'bg-1f69e',
      icon: '🚞'
    }, {
      className: 'bg-1f686',
      icon: '🚆'
    }, {
      className: 'bg-1f684',
      icon: '🚄'
    }, {
      className: 'bg-1f685',
      icon: '🚅'
    }, {
      className: 'bg-1f688',
      icon: '🚈'
    }, {
      className: 'bg-1f687',
      icon: '🚇'
    }, {
      className: 'bg-1f69d',
      icon: '🚝'
    }, {
      className: 'bg-1f68b',
      icon: '🚋'
    }, {
      className: 'bg-1f683',
      icon: '🚃'
    },
    {
      className: 'bg-1f68e',
      icon: '🚎'
    }, {
      className: 'bg-1f68c',
      icon: '🚌'
    }, {
      className: 'bg-1f68d',
      icon: '🚍'
    }, {
      className: 'bg-1f699',
      icon: '🚙'
    },
    {
      className: 'bg-1f698',
      icon: '🚘'
    }, {
      className: 'bg-1f697',
      icon: '🚗'
    }, {
      className: 'bg-1f695',
      icon: '🚕'
    }, {
      className: 'bg-1f696',
      icon: '🚖'
    }, {
      className: 'bg-1f69b',
      icon: '🚛'
    }, {
      className: 'bg-1f69a',
      icon: '🚚'
    }, {
      className: 'bg-1f6a8',
      icon: '🚨'
    }, {
      className: 'bg-1f693',
      icon: '🚓'
    }, {
      className: 'bg-1f694',
      icon: '🚔'
    }, {
      className: 'bg-1f692',
      icon: '🚒'
    }, {
      className: 'bg-1f691',
      icon: '🚑'
    },
    {
      className: 'bg-1f690',
      icon: '🚐'
    },
    {
      className: 'bg-1f6b2',
      icon: '🚲'
    },
    {
      className: 'bg-1f6a1',
      icon: '🚡'
    },
    {
      className: 'bg-1f69f',
      icon: '🚟'
    },
    {
      className: 'bg-1f6a0',
      icon: '🚠'
    },
    {
      className: 'bg-1f69c',
      icon: '🚜'
    },
    {
      className: 'bg-1f488',
      icon: '💈'
    },
    {
      className: 'bg-1f68f',
      icon: '🚏'
    },
    {
      className: 'bg-1f3ab',
      icon: '🎫'
    },
    {
      className: 'bg-1f6a6',
      icon: '🚦'
    },
    {
      className: 'bg-1f6a5',
      icon: '🚥'
    },
    {
      className: 'bg-f26a0',
      icon: '⚠'
    },
    {
      className: 'bg-1f6a7',
      icon: '🚧'
    },
    {
      className: 'bg-1f530',
      icon: '🔰'
    },
    {
      className: 'bg-f26fd',
      icon: '⛽'
    },
    {
      className: 'bg-1f3ee',
      icon: '🏮'
    },
    {
      className: 'bg-f2668',
      icon: '♨'
    },
    {
      className: 'bg-1f5ff',
      icon: '🗿'
    },
    {
      className: 'bg-1f3aa',
      icon: '🎪'
    },
    {
      className: 'bg-1f3ad',
      icon: '🎭'
    },
    {
      className: 'bg-1f4cd',
      icon: '📍'
    },

    {
      className: 'bg-1f6a9',
      icon: '🚩'
    }
    ]
  }
]
export {
  emojiArr
}
qq_47452289
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue表情输入组件 微信face表情组件
10-17
主要为大家详细介绍了Vue表情输入组件，微信face表情组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
表情包组件(vue)
sun_qqq的博客
12-17 7839
其实很早都想在博客的留言和评论处使用表情包，奈何博客需要完善的地方太多。于是一直推到了这几天，具体实现效果在博客上可以看到。 在网上查了下，发现微信官方的表情包对外开放。具体规则想如下，于是就有了思路 var EmotionList = ['微笑', '撇嘴', '色'];//改数组没有写完全 &lt;img src="https://res.wx.qq.com/mpres/htmledition...
vue实现表情包
最新发布
路人贾！
06-13 349
vue实现表情包，使用emoji 表情包
vue表情包公共组件（适用于聊天室）
爱吃水果和蔬菜__yaya的博客
03-04 2389
组件内容 <template> <div class="emoji-Bigbox"> <el-scrollbar ref="emojiScroll" class="emojiScroll"> <div class="emoji-box" v-for="(item, index) in emoji_icon" :key="index" @click="pickEmoji(index
论如何写出一篇高质量的英文论文_英文论文怎么写博客
2401_84435866的博客
05-04 440
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
Vue 表情包输入组件的实现代码
10-17
主要介绍了Vue 表情包输入组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE聊天室表情包资源
10-30
3. **组件开发**：创建一个Vue组件，用于展示表情包选择面板。这个组件需要渲染表情包列表，并处理用户的选择事件。 4. **事件绑定**：在输入框中添加监听事件，当用户选择表情包时，将其编码或名称插入到输入框的...
基于Vue20开发的emoji表情组件快速集成
08-12
基于Vue2.0开发的emoji表情组件，快速集成
vue 使用emoji表情包
豪先生的博客
08-15 2778
emoji表情包
Vue使用emoji表情包
西洲
07-30 1万+
1.资料库 vue组件库，有多个emoji相关的组件，根据需要选择一个。 vue组件库地址： https://vuejsexamples.com/tag/emoji/ 我选择的是vue-twemoji-picker vue组件地址： https://vuejsexamples.com/a-fast-plug-n-play-twitter-emoji-picker-for-vue/ github地址： https://github.com/kevinfaveri/vue-twemoji-pic
vueemoji基于Vue好用的emoji插件
08-14
vue-emoji基于Vue好用的emoji插件
2019-10-29 Vue-简单的表情组件
xumaozeng的博客
10-29 510
2019-10-29 Vue-简单的表情组件首先，定义表情对象包括src和title的JSON格式然后，定义表情组件样式文件index.vue，与face.json在同一目录下最后，在需要的文本框中插入选中的表情 开发一个简单的表情插件组件，其包含三个部分：表情图像的json格式对象、表情面板组成样式和点击表情插入文本内容中 首先，定义表情对象包括src和title的JSON格式 表情对象为一...
vue-emoji表情组件
qq_42669897的博客
07-13 5118
前段时间公司需求用到emoji表情包，在网上找了一下emoji表情插件 比如：Emoji-vue：这个插件，看起来都是有点问题，比如每次插入表情的时候，光标永远都定位在文本框开始的位置... 也找了一些jquery表情包插件，感觉和需求都不符，所以，我决定自己轮子（组件）。 效果地址： ...
Vue - 超详细实现 emoji 表情，安装并使用 v-emoji-picker 表情插件及各种功能，可在光标处插入表情和文字混排（提供了存入后端数据库的转码和解码方案，轻松将文字和表情发送给接口）
王佳斌
07-23 7194
vue emoji，vue通用emoji表情库，vue网页怎么在输入框中选表情，vue项目实现表情包，vue如何实现input框输入emoji表情，vue好用的表情插件库，vue聊天框输入emoji表情，vue显示emoji表情emoji微信表情，vue仿微信emoji表情包，vue表情符插件emoji表情符 表情输入框 类似微信qq的表情，vue使用v-emoji-picker，在vue中使用v-emoji-picker详细使用教程，v-emoji-picker插件怎么将修改search提示变成中文，v-
简洁好使用的emoji表情组件在vue2中的使用
weixin_54203047的博客
10-26 1964
第三步，在模板内使用，可以通过:style设置一些属性，通过@select调用emoji组件方法传递表情数据，在我们这个父组件中可以把他添加到评论内容里去。为什么我会找到这么一个表情选择器呢，因为我个人最近在开发一个个人博客，里面有个评论功能需要使用的emoji表情来丰富评论内容，营造更好的良性互动。第二步，在你封装的组件内导入,这三个必不可少，还要记得他也是一个封装好的组件，要声明一下。这里是官方提供的一个vue使用模板的网址。话不多说，接下来看怎么使用。首先呢，要先导入对应的依赖。
2024年前端最全表情包组件(vue)_vue表情包组件，秀出天际
2401_84411767的博客
05-06 563
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】/\*表情弹框打开按钮\*/methods:{// 打开表情包弹框},//表情选中后追加在input### 最后总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。
Vue 表情输入组件，微信face表情组件
热门推荐
qq_37141008的博客
01-17 1万+
VUE表情包输入组件，先来张成品图看看。 年底了没事干，把以前做过的项目中的组件拿出来再复习一下， 先说说思路吧。 注意： 1. 项目是用vue-cli3.0搭建起来的项目， 参考cli3.0官网地址 2.样式是用scss需要安装依赖： npm install node-sass sass-loader -D 思路： 页面内容总体分为三块区域（内容区，表情区，输入区），引入JSON文件表情库渲...
vue项目自定义表情包
07-28
6. 样式美化：最后，你可以为你的表情包组件添加样式来美化它们。可以使用CSS来设置表情包的大小、边框、阴影等样式属性。 这些步骤可以帮助你在Vue项目中实现自定义表情包的功能。根据你的具体需求，你还可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值