完全照搬不一定能寫出來 只是讓看個思想
|
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"> //首先根據這個來判斷發送表情彈窗用不用出現 <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"; //是一個長連接import _ from "lodash";//這個是js一個很強大的庫 import eventBus from '@/eventBus'//這是一個子父傳遞的公共文件console.log(emoji)export default { data() { this.imgs = _.chunk(emoji, 6) //這個是調用lodash庫的chunk方法 把 六個元素分成一個數組只不過是emoji這個數組中的二維數組 return { emojiShow: false //剛開始默認不顯示 點擊按鈕顯示 點擊的按鈕上可以寫@click='emojiShow=emojiShow'這種寫法 }; }, methods: { customEmoji(text) { //這個函數就是服務器端把傳過來的名稱轉化為圖片的 return text.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="./emoji/$1.png" style="width:30px; height:30px;">') }, inputEmoji(pic) { this.content += `[${pic}]`//傳過來的名字轉為圖片 }};</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> |
補充知識：vue+element-ui實現聊天表情包
我是用的本地json數據實現的，表情不是很多，首先創建個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); // 在未選中文本的情況下，重新設置光標位置 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; } }};</script><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> |
以上這篇vue界面發送表情的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文鏈接：https://blog.csdn.net/weixin_42790916/article/details/84977301
