Implementation code of vue interface sending expression
- 2021-08-16 22:57:49
- OfStack
If you copy it completely, you will be able to write it. Just let me see an idea
<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"> // First of all, according to this, it is judged whether the pop-up window for sending expressions appears or not
<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"; // Yes 1 Long connection
import _ from "lodash";// This is js1 A very powerful library
import eventBus from '@/eventBus'// This is 1 Public files passed by child parents
console.log(emoji)
export default {
data() {
this.imgs = _.chunk(emoji, 6) // This is the call to lodash Library chunk Method Put 6 Elements are divided into 1 The array is just emoji In this array 2 Dimensional array
return {
emojiShow: false // Not displayed by default at first Click the button to display You can write on the clicked button @click='emojiShow=emojiShow' This way of writing
};
},
methods: {
customEmoji(text) { // This function is that the server transforms the passed name into a picture
return text.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="./emoji/$1.png" style="width:30px; height:30px;">')
},
inputEmoji(pic) {
this.content += `[${pic}]`// The passed name is turned into a picture
}
};
</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>
Additional knowledge: vue+element-ui to realize chat expression pack
I use the local json data to achieve, expression is not a lot, first create an json file, the code is as follows:
[{
"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"
}
]The code in vue component is posted directly, and there is no nonsense:
<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) {
// Non IE Browser
textArea.setRangeText(str);
// Resets the cursor position with no text selected
textArea.selectionStart += str.length;
textArea.focus();
} else if (document.selection) {
// IE Browser
obj.focus();
var sel = document.selection.createRange();
sel.text = str;
}
}
changeSelectedText(textArea, this.faceList[index]);
this.textarea = textArea.value; // To synchronize data Data in
// console.log(this.faceList[index]);
return;
}
}
};
</script>
<style lang="scss">
/* el-popover Yes and app At the same level, so scoped Invalid local property set for */
/* Need to set global 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;
}
/* Contains the following 4 Links of species */
.emotionItem {
text-decoration: none;
}
/* Normal unvisited links */
.emotionItem:link {
text-decoration: none;
}
/* Links that have been visited */
.emotionItem:visited {
text-decoration: none;
}
/* Mouse over ( Stay ) Links to */
.emotionItem:hover {
text-decoration: none;
}
/* The link being clicked */
.emotionItem:active {
text-decoration: none;
}
</style>