完全照搬不一定能写出来 只是让看个思想
|
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