vue+element-ui實現優雅的emoji表情框

終於把表情包的功能實現了😁，網上很多用本地圖庫、雪碧圖之類的，愣是沒找到幾個適合我的解決方案，於是從amio/emoji.json上面找了一個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-decoration: none;
}
/* 正在點擊的鏈接*/
.emotionItem:active {
    text-decoration: none;
}
</style>

script

mounted() {
    for(let i in appData){
      this.faceList.push(appData[i].char);
    }
},
data() {
    return {
      faceList: [],
      textarea: ""
    };
},
method(){
    getEmo(index){
        var textArea=document.getElementById('textarea');
        function changeSelectedText(obj, str) {
          if (window.getSelection) {
            // 非IE瀏覽器
            textArea.setRangeText(str);
            // 在未選中文本的情況下，重新設置光標位置
            textArea.selectionStart += str.length;
            textArea.focus()
          } else if (document.selection) {
            // IE瀏覽器
            obj.focus();
            var sel = document.selection.createRange();
            sel.text = str;
          }
        }
        changeSelectedText(textArea,this.faceList[index]);
        this.textarea=textArea.value;// 要同步data中的數據
        // console.log(this.faceList[index]);
        return;
      },
}

效果

UI比較簡單哈哈

JSON文件

放到資源下載那邊了，還有一個壓縮版：
emoji表情本地JSON文件

[
    {
        "codes": "1F600",
        "char": "😀",
        "name": "grinning face"
    },
    {
        "codes": "1F603",
        "char": "😃",
        "name": "grinning face with big eyes"
    },
    {
        "codes": "1F604",
        "char": "😄",
        "name": "grinning face with smiling eyes"
    },
    {
        "codes": "1F601",
        "char": "😁",
        "name": "beaming face with smiling eyes"
    },
    {
        "codes": "1F606",
        "char": "😆",
        "name": "grinning squinting face"
    },
    {
        "codes": "1F605",
        "char": "😅",
        "name": "grinning face with sweat"
    },
    {
        "codes": "1F923",
        "char": "🤣",
        "name": "rolling on the floor laughing"
    },
    {
        "codes": "1F602",
        "char": "😂",
        "name": "face with tears of joy"
    },
    {
        "codes": "1F642",
        "char": "🙂",
        "name": "slightly smiling face"
    },
    {
        "codes": "1F643",
        "char": "🙃",
        "name": "upside-down face"
    },
    {
        "codes": "1F609",
        "char": "😉",
        "name": "winking face"
    },
    {
        "codes": "1F60A",
        "char": "😊",
        "name": "smiling face with smiling eyes"
    },
    {
        "codes": "1F607",
        "char": "😇",
        "name": "smiling face with halo"
    },
    {
        "codes": "1F970",
        "char": "🥰",
        "name": "smiling face with hearts"
    },
    {
        "codes": "1F60D",
        "char": "😍",
        "name": "smiling face with heart-eyes"
    },
    {
        "codes": "1F929",
        "char": "🤩",
        "name": "star-struck"
    },
    {
        "codes": "1F618",
        "char": "😘",
        "name": "face blowing a kiss"
    },
    {
        "codes": "1F617",
        "char": "😗",
        "name": "kissing face"
    },
    {
        "codes": "1F61A",
        "char": "😚",
        "name": "kissing face with closed eyes"
    },
    {
        "codes": "1F619",
        "char": "😙",
        "name": "kissing face with smiling eyes"
    },
    {
        "codes": "1F44B",
        "char": "👋",
        "name": "waving hand"
    },
    {
        "codes": "1F91A",
        "char": "🤚",
        "name": "raised back of hand"
    },
    {
        "codes": "1F590",
        "char": "🖐",
        "name": "hand with fingers splayed"
    },
    {
        "codes": "270B",
        "char": "✋",
        "name": "raised hand"
    },
    {
        "codes": "1F596",
        "char": "🖖",
        "name": "vulcan salute"
    },
    {
        "codes": "1F44C",
        "char": "👌",
        "name": "OK hand"
    },
    {
        "codes": "1F90F",
        "char": "🤏",
        "name": "pinching hand"
    },
    {
        "codes": "270C",
        "char": "✌",
        "name": "victory hand"
    },
    {
        "codes": "1F91E",
        "char": "🤞",
        "name": "crossed fingers"
    },
    {
        "codes": "1F91F",
        "char": "🤟",
        "name": "love-you gesture"
    },
    {
        "codes": "1F918",
        "char": "🤘",
        "name": "sign of the horns"
    },
    {
        "codes": "1F919",
        "char": "🤙",
        "name": "call me hand"
    },
    {
        "codes": "1F448",
        "char": "👈",
        "name": "backhand index pointing left"
    },
    {
        "codes": "1F449",
        "char": "👉",
        "name": "backhand index pointing right"
    },
    {
        "codes": "1F446",
        "char": "👆",
        "name": "backhand index pointing up"
    },
    {
        "codes": "1F595",
        "char": "🖕",
        "name": "middle finger"
    },
    {
        "codes": "1F447",
        "char": "👇",
        "name": "backhand index pointing down"
    },
    {
        "codes": "261D FE0F",
        "char": "☝️",
        "name": "index pointing up"
    },
    {
        "codes": "1F44D",
        "char": "👍",
        "name": "thumbs up"
    },
    {
        "codes": "1F44E",
        "char": "👎",
        "name": "thumbs down"
    },
    {
        "codes": "270A",
        "char": "✊",
        "name": "raised fist"
    },
    {
        "codes": "1F44A",
        "char": "👊",
        "name": "oncoming fist"
    },
    {
        "codes": "1F91B",
        "char": "🤛",
        "name": "left-facing fist"
    },
    {
        "codes": "1F91C",
        "char": "🤜",
        "name": "right-facing fist"
    }
    
]

參考文章與資源

[1] https://blog.csdn.net/HarryHY/article/details/100557603 【vue當中引入本地emoji表情】 by HarryHY
[2] https://blog.csdn.net/qq_38453189/article/details/77428895 【關於各瀏覽器下textarea中光標位置的獲取問題詳解】 by 王先發
[3] https://github.com/amio/emoji.json

如果對你有幫助的話，還請點個贊👍給我哦！