完全照搬不一定能寫出來 只是讓看個(gè)思想
|
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
65
66
67
68
|
<template> <section class="dialogue-section clearfix" > <div class="row clearfix" v-for="(item,index) in msgs" :key = index> <img :src="item.uid == myInfo.uid ? myInfo.avatar :otherInfo.avatar" :class="item.uid == myInfo.uid ? 'headerleft' : 'headerright'"> <p :class="item.uid == myInfo.uid ? 'textleft' : 'textright'" v-html="customEmoji(item.content)"></p> </div> </section> <div id="emoji-list" class="flex-column" v-if="emojiShow"> //首先根據(jù)這個(gè)來判斷發(fā)送表情彈窗用不用出現(xiàn) <div class="flex-cell flex-row" v-for="list in imgs"> <div class="flex-cell flex-row cell" v-for="item in list" @click="inputEmoji(item)"> <img :src="'./emoji/'+ item + '.png'"> </div> </div> </div></template><script>import { sendMsg } from "@/ws"; //是一個(gè)長(zhǎng)連接import _ from "lodash";//這個(gè)是js一個(gè)很強(qiáng)大的庫 import eventBus from '@/eventBus'//這是一個(gè)子父?jìng)鬟f的公共文件console.log(emoji)export default { data() { this.imgs = _.chunk(emoji, 6) //這個(gè)是調(diào)用lodash庫的chunk方法 把 六個(gè)元素分成一個(gè)數(shù)組只不過是emoji這個(gè)數(shù)組中的二維數(shù)組 return { emojiShow: false //剛開始默認(rèn)不顯示 點(diǎn)擊按鈕顯示 點(diǎn)擊的按鈕上可以寫@click='emojiShow=emojiShow'這種寫法 }; }, methods: { customEmoji(text) { //這個(gè)函數(shù)就是服務(wù)器端把傳過來的名稱轉(zhuǎn)化為圖片的 return text.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="./emoji/$1.png" style="width:30px; height:30px;">') }, inputEmoji(pic) { this.content += `[${pic}]`//傳過來的名字轉(zhuǎn)為圖片 }};</script><style scoped>@import '../../assets/css/dialogue.css';#emoji-list { height: 230px; background: #fff;}#emoji-list .cell { line-height: 13vh; border-right: 1rpx solid #ddd; border-bottom: 1rpx solid #ddd;}.flex-row { display: flex; flex-direction: row; justify-content: center; align-items: center;}.flex-column { display: flex; flex-direction: column; justify-content: center; align-items: stretch;}.flex-cell { flex: 1;}.cell img { width: 35px; height: 35px;}</style> |
補(bǔ)充知識(shí)：vue+element-ui實(shí)現(xiàn)聊天表情包
我是用的本地json數(shù)據(jù)實(shí)現(xiàn)的，表情不是很多，首先創(chuàng)建個(gè)json文件，代碼如下：
|
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
[{ "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" }] |
vue組件中代碼直接貼出來，廢話不多說：
|
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<template> <div class="chatIcon"> <el-popover placement="top-start" width="400" trigger="click" class="emoBox" > <div class="emotionList"> <a href="javascript:void(0);" rel="external nofollow" @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> <el-input v-model="textarea" class="chatText" resize="none" type="textarea" id="textarea" rows="5" @keyup.enter.native="sendInfo" ></el-input> </div></template><script>const appData = require("@/utils/emoji.json");export default { mounted() { for (let i in appData) { this.faceList.push(appData[i].char); } }, data() { return { faceList: [], textarea: "" }; }, methods: { getEmo(index) { var textArea = document.getElementById("textarea"); function changeSelectedText(obj, str) { if (window.getSelection) { // 非IE瀏覽器 textArea.setRangeText(str); // 在未選中文本的情況下，重新設(shè)置光標(biāo)位置 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中的數(shù)據(jù) // console.log(this.faceList[index]); return; } }};</script><style lang="scss">/* el-popover是和app同級(jí)的，所以scoped的局部屬性設(shè)置了無效 *//* 需要設(shè)置全局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;}/*已經(jīng)訪問過的鏈接*/.emotionItem:visited { text-decoration: none;}/*鼠標(biāo)劃過(停留)的鏈接*/.emotionItem:hover { text-decoration: none;}/* 正在點(diǎn)擊的鏈接*/.emotionItem:active { text-decoration: none;}</style> |
以上這篇vue界面發(fā)送表情的實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
原文鏈接：https://blog.csdn.net/weixin_42790916/article/details/84977301
