腾讯的表情实现总结

html

?
1
2
3
4
5
6
7
8
9
<div class="emoji_panel" v-show = '$store.state.showEmoji' @click.stop="showEmoji2()">
            <ul class="top">
                <li :class='emojiTab==1 ? "active": ""' @click="tabChange(1)">QQ表情</li>
                <li :class='emojiTab==2 ? "active": ""' @click="tabChange(2)">符号表情</li>
            </ul>
            <div class="panel_box" :class='emojiTab==1 ? "qq_face": "emoji_face"'>
                <a @click='chooseEmoji(emojiTab==1 ? "qq" : "emoji", index, $event)' v-for="(item, index) in (emojiTab==1 ? QQFaceList : EmojiList)" :title="item" :type='emojiTab==1 ? "qqface": "emoji"'  :key='index' :class='(emojiTab==1 ? "qqface" : "emoji") + index'>{{item}}</a>
            </div>
        </div>

　data数据

 

 

　　

js方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
insertAtCursor (dom, html) {
        if (dom != document.activeElement) { // 如果dom没有获取到焦点，追加
            dom.innerHTML = dom.innerHTML + html
            return
        }
        var sel, range
        if (window.getSelection) {
            // IE9 或 非IE浏览器
            sel = window.getSelection()
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0)
                range.deleteContents()
            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement('div')
                el.innerHTML = html
                var frag = document.createDocumentFragment()
                var node
                var lastNode
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node)
                }
                range.insertNode(frag)
            // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange()
                    range.setStartAfter(lastNode)
                    range.collapse(true)
                    sel.removeAllRanges()
                    sel.addRange(range)
                }
            }
        } else if (document.selection && document.selection.type != 'Control') {
            // IE < 9
            document.selection.createRange().pasteHTML(html)
        }
    },
    chooseEmoji (type, index, e) {
        let html = ''
        if (type === 'emoji') {
            html = QQFaceMap[ '<' + EmojiList[index] + '>'] ? ('<sapn style="display:inline-block"></span><span style="font-size:0;" class="emoji emoji' + QQFaceMap[ '<' + EmojiList[index] + '>'] + '" text="' + String.fromCodePoint('0x' + QQFaceMap[ '<' + EmojiList[index] + '>']) + '_web" src="../img/spacer.gif">' + String.fromCodePoint('0x' + QQFaceMap[ '<' + EmojiList[index] + '>']) + '</span><sapn style="display:inline-block"></span>') : ('<sapn style="display:inline-block"></span><span style="font-size:0;" class="qqemoji qqemoji' + QQFaceMap[EmojiList[index]] + '" text="[' + EmojiList[index] + ']_web" src="../img/spacer.gif">[' + EmojiList[index] + ']</span><sapn style="display:inline-block"></span>')
        } else {
            html = '<sapn style="display:inline-block"><sapn style="display:inline-block"></span><span style="font-size:0;" contenteditable="false" class="qqemoji qqemoji' + index + '" text="[' + QQFaceList[index] + ']_web" src="../img/spacer.gif">[' + QQFaceList[index] + ']</span><sapn style="display:inline-block"></span>'
        }
        this.insertAtCursor(document.getElementsByClassName('editArea')[0], html)
        var r = document.getElementsByClassName('editArea')[0].innerHTML.replace(/<(?:span).*?text=[\"']{(.*?)}[\"'].*?>/g,
                function () {
                    return arguments[1].replace('_web', '')
                }).replace(/<(.*?)>/g,
                function (a0, a1) {
                    return QQFaceMap[a0] ? a0 : QQFaceMap[a1] ? '[' + a1 + ']' : ''
                })
        console.log(r)
        // 这种只能插入到最前面需要研究记录光标位置
        // let html = ''
        // if (type === 'emoji') {
        //  html = QQFaceMap[ EmojiList[index] ] ?  String.fromCodePoint('0x' + QQFaceMap[ EmojiList[index] ])  : '[' + EmojiList[index] + ']'
        // } else {
        //  html = '[' + QQFaceList[index] + ']'
        // }
        // console.log(html)
        // document.getElementsByClassName('editArea')[0].focus()
        // this.pasteEditorMethod(html)
    },

　　

　

腾讯表情css

　　

posted @   地铁程序员  阅读(2178)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示